バインド方法: 1. タグ内で直接「onclick」属性を使用してイベントをバインドします。 2. 「object.onclick=function(){event}」ステートメントを使用してイベントをバインドします。 3. 「object .attachEvent('click',function(){event})」ステートメントを使用してイベントをバインドします。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JavaScript でイベントをバインドする方法
まず、イベントをバインドするために通常使用する 3 つの方法を紹介します。
#1. タグ内でイベントを直接バインドする
2. JavaScript オブジェクトを使用してイベントをバインドする
3.イベント監視
拡張情報:イベント委任
「イベント ハンドラーが多すぎる」への対応問題はイベントの委任です。イベント委任はイベント バブリングを利用しており、特定の種類のすべてのイベントを管理するために開発できるイベント ハンドラーは 1 つだけです。たとえば、クリック イベントは常にドキュメント レイヤーにバブルアップします。つまり、各イベントに個別にハンドラーを追加するのではなく、onclick イベント ハンドラーのみを指定できます。
アリババの筆記試験問題の例を見てみましょう。
#スタイルと 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でイベントをバインドする方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。