ホームページ > 記事 > ウェブフロントエンド > jQuery イベント委任インスタンス分析_jquery
jQuery イベント委任インスタンス分析_jquery
- WBOYオリジナル
- 2016-05-16 15:50:141459ブラウズ
イベント委任は主にイベント バブリング現象を利用して実装されます。イベント委任を正確に習得すると、コードの実行効率が向上します。まずコード例を見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style type="text/css">
table{
width:300px;
height:60px;
background-color:green;
}
table td{
background-color:white;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td").bind("click",function(){
$(this).text("哈哈");
})
})
</script>
</head>
<body>
<table cellspacing="1">
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
上記のコードでは、bind() メソッドを使用してクリック イベント ハンドラーを各 TD にバインドし、セルがクリックされるとセル内のテキストがリセットされます。このメソッドは目的の効果を達成し、非常に完璧に見えますが、セルが多すぎる場合、セルを走査して各セルにイベント処理関数をバインドすると、コードのパフォーマンスが大幅に低下します。イベントをリッスンするセルの要素を使用する場合は、最初にイベントをトリガーした DOM 要素が td であるかどうかを判断するだけで済みます。
コードは次のように変更されます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style type="text/css">
table{
width:300px;
height:60px;
background-color:green;
}
table td{
background-color:white;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("table").bind("click",function(e){
var target = e.target;
$target=$(target);
if ($target.is("td")){
$target.text('哈哈');
}
})
})
</script>
</head>
<body>
<table cellspacing="1">
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
上記のコードは同じ機能を実装していますが、効率が大幅に向上しています。
要約: いわゆるイベント委任とは、イベント ターゲットがイベント自体を処理するのではなく、処理タスクをその親要素や祖先要素、さらにはルート要素に委任することを意味します。
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。