JavaScriptでイベントをバインドする方法は何ですか-jsチュートリアル-php.cn

バインド方法: 1. タグ内で直接「onclick」属性を使用してイベントをバインドします。 2. 「object.onclick=function(){event}」ステートメントを使用してイベントをバインドします。 3. 「object .attachEvent('click',function(){event})」ステートメントを使用してイベントをバインドします。

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

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

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

まず、イベントをバインドするために通常使用する 3 つの方法を紹介します。

#1. タグ内でイベントを直接バインドする

ログイン後にコピー

2. JavaScript オブジェクトを使用してイベントをバインドする

ログイン後にコピー

3.イベント監視

ログイン後にコピー

拡張情報:イベント委任

「イベントハンドラーが多すぎる」への対応問題はイベントの委任です。イベント委任はイベントバブリングを利用しており、特定の種類のすべてのイベントを管理するために開発できるイベントハンドラーは 1 つだけです。たとえば、クリックイベントは常にドキュメントレイヤーにバブルアップします。つまり、各イベントに個別にハンドラーを追加するのではなく、onclick イベントハンドラーのみを指定できます。

アリババの筆記試験問題の例を見てみましょう。

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

#スタイルと DOM 構造

 
    序号
姓名
性别
电话号码
省份
操作
 
  1
张三
男
13788888888
浙江
删除
 2
李四
女
13788887777
四川
删除
 3
王二
男
13788889999
广东
删除

ログイン後にコピー

**イベントの委任は必要ありません。 **この方法のコストはパフォーマンスを大幅に無駄にします。データが数千個ある場合、

ページがひどくスタックしたり、クラッシュしたりすることがあります。

function Contact(){ this.init(); } Contact.prototype.init = function(){ var userdel = document.querySelectorAll('.user-delete'); for(var i=0;i
        
         ログイン後にコピー

イベント委任を使用し、イベントを 1 回だけバインドします。これにより、パフォーマンスの損失が大幅に軽減されます。これは、多数のイベントハンドラーが必要な場合にも非常に優れたソリューションです。

function Contact(){ this.init(); } Contact.prototype.init = function(){ var lis = document.querySelector('#J_List'); lis.addEventListener('click', function(e){ var target = e.target || e.srcElement; if (!!target && target.className.toLowerCase()==='user-delete') { } }) } new Contact();

ログイン後にコピー

【関連する推奨事項:

JavaScript 学習チュートリアル】

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