UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#285 JavaScript DOM操作 イベントを追加する方法に関して

記入日:2023-10-20 編集日:2023-10-20

JavaScript DOM操作 イベントを追加する方法に関して解説をしてみようと思います。

この記事を読むと(約5分)
JavaScript DOM操作 イベントを追加する方法に関してイメージできます。

JavaScript DOM操作 イベントを追加

JavaScriptを使用してDOM(Document Object Model)を操作し、イベントを追加する方法をいくつかの事例を交えて解説します。

1. クリックイベントの追加
例えば、ボタンをクリックしたときにアラートメッセージを表示するシンプルな例を考えてみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>クリックイベントの例</title>
</head>
<body>
  <button id="myButton">クリックしてください</button>

  <script>
    // ボタン要素を取得
    var button = document.getElementById('myButton');

    // クリックイベントを追加
    button.addEventListener('click', function() {
      alert('ボタンがクリックされました!');
    });
  </script>
</body>
</html>
この例では、まずHTMLにボタン要素を作成し、それに'id'属性を付けました。JavaScriptのスクリプト部分では、`document.getElementById()`を使ってボタン要素を取得し、`addEventListener()`を使ってクリックイベントを追加しています。

2. マウスオーバーイベントの追加
次に、マウスが要素に乗ったときに背景色を変える例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>マウスオーバーイベントの例</title>
  <style>
    .myElement {
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="myElement"></div>

  <script>
    // 要素を取得
    var element = document.querySelector('.myElement');

    // マウスオーバーイベントを追加
    element.addEventListener('mouseover', function() {
      this.style.backgroundColor = 'blue';
    });

    // マウスアウトイベントを追加
    element.addEventListener('mouseout', function() {
      this.style.backgroundColor = '#ccc';
    });
  </script>
</body>
</html>
この例では、最初にCSSで`.myElement`クラスの要素のスタイルを定義しています。JavaScript部分では、`document.querySelector()`を使ってその要素を取得し、`addEventListener()`を使ってマウスオーバーとマウスアウトの2つのイベントを追加しています。

3. フォームのサブミットイベントの防止
フォームが送信されるのを防ぐ例を示します。

<!DOCTYPE html>
<html>
<head>
    <title>フォームのサブミットイベントの防止</title>
</head>
<body>
  <form id="myForm">
    <input type="text" name="username" required>
    <button type="submit">送信</button>
  </form>

  <script>
    var form = document.getElementById('myForm');

    form.addEventListener('submit', function(event) {
      event.preventDefault(); // デフォルトの送信動作を防止

      var username = this.querySelector('[name="username"]').value;
      alert('こんにちは、' + username + 'さん!');
    });
  </script>
</body>
</html>
この例では、フォームの送信を防ぐために`event.preventDefault()`を使っています。そして、フォーム内のユーザー名を取得し、アラートメッセージで表示しています。

これらの例は、JavaScriptを使用してDOMを操作し、イベントを追加する基本的な方法を示しています。DOM操作とイベントの組み合わせは、Webページやアプリケーションのインタラクティブな要素を作成する上で非常に重要です。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。