ホームページ > 記事 > ウェブフロントエンド > JavaScriptイベントバインディングのメソッドにはどのようなものがありますか?
JavaScriptイベントバインディングのメソッドにはどのようなものがありますか?
- 青灯夜游オリジナル
- 2021-09-08 18:15:296045ブラウズ
バインド方法: 1. "object.on イベント名 = function(){code}" ステートメントを使用してバインドします; 2. "イベントソース.addEventListener(イベント名、イベント処理関数名、 Capture );" state binding; 3. HTML タグの「onclick」属性を使用してイベントをバインドします。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
1. イベント ソースのイベント属性バインディング ハンドラーを使用する
HTML と JS を分離する方法の 1 つは、イベント ソースのイベント属性バインディングを使用することです。イベント処理関数のバインド形式は次のとおりです。形式内の
obj.on事件名 = 事件处理函数
obj はイベント ソース オブジェクトです。バインドされたイベント プログラムは通常、無名関数の定義ステートメント、または関数名です。
イベント ソース イベント属性バインディング ハンドラーの例:
oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
alert('hi')
};2. addEventListener() を使用してハンドラーをバインドします
addEventListener() はい のメソッド標準イベント モデル。すべての標準ブラウザで有効です。 addEvent Lister() を使用してイベント ハンドラーをバインドする形式は次のとおりです:
事件源.addEventListener(事件名称,事件处理函数名,是否捕获);
パラメータ「イベント名」は「on」を除いたイベント名であり、パラメータ「キャプチャするかどうか」はブール値です。デフォルト値は false で、false の場合はイベントバブリングが実現され、true の場合はイベントキャプチャが実現されます。
addEventListener() を複数回呼び出すことで、複数のイベント ハンドラーをイベント ソース オブジェクトの同じイベント タイプにバインドできます。オブジェクトでイベントが発生すると、そのイベントにバインドされたすべてのイベント処理関数が呼び出され、バインドされた順序で順番に実行されます。さらに、addEventListener() によってバインドされたイベント処理関数内の this がイベント ソースを指していることに注意してください。
addEventListener() バインディング ハンドラーの例:
document.addEventListener('click',fn1,false);//click事件绑定fn1函数实现事件冒泡 document.addEventListener('click',fn2,true);//click事件绑定fn2函数实现事件捕获
3. HTML タグのイベント属性バインディング ハンドラーを使用します
注意してください。 HTML タグのイベント属性を使用してイベント ハンドラーをバインドする場合、イベント属性内のスクリプト コードには関数宣言を含めることはできませんが、関数呼び出しまたはセミコロンで区切られた一連のスクリプト コードを含めることはできます。
例: HTML タグのイベント属性を使用してイベント ハンドラーをバインドします。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML标签的事件属性绑定事件处理程序</title>
</head>
<body>
<input type="button" onclick="var name='张三';alert(name);" value="事件绑定测试"/>
</body>
</html>上記のコードのボタンはクリック イベントのターゲット オブジェクトであり、ラベルのイベント属性 onclick を通じてイベント処理用の 2 つのスクリプト コードをバインドします。上記のコードを Chrome ブラウザで実行した後、ユーザーがボタンをクリックすると、警告ダイアログ ボックスが表示されます。
[推奨学習: JavaScript 上級チュートリアル]
以上がJavaScriptイベントバインディングのメソッドにはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。