ホームページ > 記事 > ウェブフロントエンド > JavaScriptでイベントをバインドする方法は何ですか
JavaScriptでイベントをバインドする方法は何ですか
- 青灯夜游オリジナル
- 2021-06-17 15:47:063338ブラウズ
バインド方法: 1. タグ内で直接「onclick」属性を使用してイベントをバインドします。 2. 「object.onclick=function(){event}」ステートメントを使用してイベントをバインドします。 3. 「object .attachEvent('click',function(){event})」ステートメントを使用してイベントをバインドします。
このチュートリアルの動作環境: 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('btn').onclick = function(){
alert(1)
}
</script>
3.イベント監視
<button id="btn">按钮</button>
<script>
document.getElementById('btn').addEventListener('click',function(){
alert(1)
})
//兼容IE
document.getElementById('btn').attachEvent('click',function(){
alert(1)
})
</script>
拡張情報:イベント委任
「イベント ハンドラーが多すぎる」への対応問題はイベントの委任です。イベント委任はイベント バブリングを利用しており、特定の種類のすべてのイベントを管理するために開発できるイベント ハンドラーは 1 つだけです。たとえば、クリック イベントは常にドキュメント レイヤーにバブルアップします。つまり、各イベントに個別にハンドラーを追加するのではなく、onclick イベント ハンドラーのみを指定できます。
アリババの筆記試験問題の例を見てみましょう。
#スタイルと 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('.user-delete');
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('#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 サイトの他の関連記事を参照してください。