JavaScriptでイベントをバインドする方法

方法: 1. HTML タグのイベント属性 onclick を使用し、構文 "onclick="event handler"" でハンドラーをバインドします。 2. イベント ソースのイベント属性を使用してハンドラーをバインドします。 、構文「obj.on イベント名 = ハンドラー関数」; 3. addEventListener() を使用してハンドラーをバインドします。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

イベントの発生時にブラウザが対応するイベント ハンドラーを自動的に呼び出してイベントを処理できるようにするには、イベント ハンドラーをイベント ソースにバインドする必要があります (バインドされたイベント ハンドラーは登録済みイベントとも呼ばれます)。ハンドラ）。

イベント ハンドラーをバインドするには 3 つの方法があります。

• #HTML タグのイベント属性 onclick を使用して、イベント ハンドラーをバインドします。このメソッドは、タグのイベント属性値をイベント ハンドラーに設定します。この方法は現在推奨されていません。

• イベント ソースのイベント属性を使用して、イベント ハンドラー関数をバインドします。このメソッドは、イベントソースオブジェクトのイベント属性値をイベント処理関数に設定します。

• addEventListener() メソッドを使用して、イベントとイベント処理関数をバインドします (IE9 より前のバージョンでは、attach Event() メソッドを使用します。

1. HTML タグのイベント属性を使用してハンドラーをバインドします。

上記のコードのボタンはクリック イベントの対象オブジェクトであり、イベント処理用のラベルのイベント属性 onclick を通じて 2 つのスクリプト コードをバインドします。上記のコードは Chrome ブラウザの後に実行され、ユーザーがボタンをクリックすると警告ダイアログ ボックスが表示され、結果は次の図のようになります。 #イベント ハンドラーに 3 つ以上のコードが含まれる場合、例 1 のようにイベント ハンドラーをバインドするとプログラムが読みにくくなります。代わりに、イベント ハンドラーを関数として定義し、イベント プロパティでその関数を呼び出します。

上記コードの実行結果は例1と全く同じです。上記 2 つの例から、タグのイベント属性は JS スクリプト コードと HTML タグが混在することになり、JS と HTML を分離するという Web 標準の原則に違反します。

obj.on事件名 = 事件处理函数

イベントソースのイベント属性バインディングハンドラの例:

oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
      alert('hi')
};

3. addEventListener() を使用してハンドラーをバインドします

# #イベント ソース オブジェクトのイベント属性を使用してイベント ハンドラーをバインドするのは簡単ですが、欠点があります: イベントは 1 つのハンドラーにのみバインドでき、後でバインドされたイベント ハンドラーは以前にバインドされたイベントを上書きします。実際のアプリケーションでは、イベント ソースからのイベントが複数の関数によって処理される場合があります。

当一个事件源需要使用多个函数来处理时，可以通过事件源调用 addEventListener()（针对标准浏览器）来绑定事件处理函数以实现此需求。一个事件源通过方法绑定多个事件函数的实现方式是：对事件源对象调用多次 addEventListener()，其中每次的调用只绑定一个事件处理函数。

addEventListener() 是标准事件模型中的一个方法，对所有标准浏览器都有效。使用 addEvent Liste ner() 绑定事件处理程序的格式如下：

事件源.addEventListener(事件名称,事件处理函数名,是否捕获);

参数“事件名称”是一个不带“on”的事件名；参数“是否捕获”是一个布尔值，默认值为 false，取 false 时实现事件冒泡，取 true 时实现事件捕获。

通过多次调用 addEventListener() 可以为一个事件源对象的同一个事件类型绑定多个事件处理函数。当对象发生事件时，所有该事件绑定的事件处理函数就会按照绑定的顺序依次调用执行。另外，需要注意的是，addEventListener() 绑定的事件处理函数中的 this 指向事件源。

addEventListener() 绑定处理程序示例：

document.addEventListener('click',fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener('click',fn2,true);//click事件绑定fn2函数实现事件捕获

【例 4】使用 addEventListener() 绑定事件函数。

上述代码在浏览器中运行后，当单击文档窗口时，会依次弹出显示“fn1()”和“fn2()”的警告对话框。

【推荐学习：javascript高级教程】

以上がJavaScriptでイベントをバインドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。