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

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

青灯夜游

リリース： 2021-06-17 15:47:06

オリジナル

3436 人が閲覧しました

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

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

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

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

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

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

<button onclick="open()">按钮</button>

<script>
function open(){
	alert(1)
}
</script>

ログイン後にコピー

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

<button id="btn">按钮</button>
<script>
document.getElementById(&#39;btn&#39;).onclick = function(){
	alert(1)
}
</script>

ログイン後にコピー

3.イベント監視

<button id="btn">按钮</button>
<script>
document.getElementById(&#39;btn&#39;).addEventListener(&#39;click&#39;,function(){
	alert(1)
})
//兼容IE
document.getElementById(&#39;btn&#39;).attachEvent(&#39;click&#39;,function(){
	alert(1)
})
</script>

ログイン後にコピー

拡張情報:イベント委任

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

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

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

#スタイルと DOM 構造

 <style>
   * {
     padding: 0;
     margin: 0;
   }
   
   .head, li div {
     display: inline-block;
     width: 70px;
     text-align: center;
   }

   li .id, li .sex, .id, .sex {
     width: 15px;
   }

   li .name, .name {
     width: 40px;
   }

   li .tel, .tel {
     width: 90px;
   }

   li .del, .del {
     width: 15px;
   }

   ul {
     list-style: none;
   }

   .user-delete {
     cursor: pointer;
   }

 </style>
</head>

<body>
<div id="J_container">
	<div class="record-head">
	  <div class="head id">序号</div><div class="head name">姓名</div><div class="head sex">性别</div><div class="head tel">电话号码</div><div class="head province">省份</div><div class="head">操作</div>
	</div>
   <ul id="J_List">
     <li><div class="id">1</div><div class="name">张三</div><div class="sex">男</div><div class="tel">13788888888</div><div class="province">浙江</div><div class="user-delete">删除</div></li>
     <li><div class="id">2</div><div class="name">李四</div><div class="sex">女</div><div class="tel">13788887777</div><div class="province">四川</div><div class="user-delete">删除</div></li>
     <li><div class="id">3</div><div class="name">王二</div><div class="sex">男</div><div class="tel">13788889999</div><div class="province">广东</div><div class="user-delete">删除</div></li>
   </ul>
 </div>
 </body>

ログイン後にコピー

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

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

function Contact(){
    this.init();
}
	

Contact.prototype.init = function(){
	var userdel = document.querySelectorAll(&#39;.user-delete&#39;);
	for(var i=0;i<lis.length;i++){
		(function(j){
			userdel[j].onclick = function(){
	userdel[j].parentNode.parentNode.removeChild(userdel[j].parentNode);
			}
		})(i);
	}	
}

new Contact();

ログイン後にコピー

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

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

new Contact();

ログイン後にコピー

【関連する推奨事項:

JavaScript 学習チュートリアル】

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