jqueryイベントbubble_jqueryを理解する-jsチュートリアル-php.cn

jqueryイベントbubble_jqueryを理解する

WBOY

リリース： 2016-05-16 15:22:07

オリジナル

1181 人が閲覧しました

1. jquery イベントバブリングとは
多くの教科書やマニュアルには、イベントバブリングの概念が含まれています。もちろん、これはベテランにとっては最も基本的な概念ですが、初心者にとっては馴染みがない、または聞いたことがないことがよくあります。イベントバブリングとは何かをコード例を用いて簡単に紹介しましょう。
コード例は次のとおりです:

<html>
<head>
<meta charset=" gb2312">
<title>事件冒泡</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#second").click(function(){
  alert("我是second");    
 })
 $("#first").click(function(){
  alert("我是first");    
 })
})
</script>
</head>
<body>
<p id="first"><a id="second" href="http://www.baidu.com">点击查看效果</a></p>
</body>
</html>

ログイン後にコピー

上記のコードでは、アンカーポイントをクリックした後に「私は 3 番目です」をポップアップ表示したいだけかもしれませんが、奇妙なことに、親要素によって定義されたすべてのクリックイベントがトリガーされることです。これは典型的なイベントのバブリング効果です。いわゆるバブリングイベントとは、オブジェクト上で特定のタイプのイベント (上記の例のクリックイベントなど) がトリガーされると、このイベントがオブジェクトの親オブジェクトに伝播し、親オブジェクトで定義された同様のイベントをトリガーすることを意味します。。イベントの伝播方向は、水の底から上昇する水の泡と同様に、下から上へです。
2. JavaScript でイベントのバブリングを防ぐ方法
イベントのバブリングは便利な場合もありますが、場合によってはトラブルの原因となることもあります。イベントのバブリングを防ぐ方法について簡単に説明します。
コード例は次のとおりです:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<head>
<title>事件冒泡</title>
<style type="text/css">
#grandfather{
 border:1px solid #0066FF;
 cellpadding:0px;
 cellspacing:0px;
}
#grandfather td{
 border: 1px solid #0066FF;
}
</style>
<script type="text/javascript">
function trclick(){
 alert("父亲的onclick事件触发");
}
function tableclick(){
 alert("祖父的onclick事件触发");
}
window.onload=function(){
 var grandfather=document.getElementById("grandfather");
 var father=document.getElementById("father");
 var noStop=document.getElementById("noStop");
 var haveStop=document.getElementById("haveStop");
 
 grandfather.onclick=tableclick;
 father.onclick=trclick;
 
 noStop.onclick=function(){
 alert("没有阻止冒泡的子元素");
 }
 haveStop.onclick=function(evt){
 alert("阻止冒泡的子元素");
 if(window.event){
 event.cancelBubble=true;
 }
 else if(evt){
 evt.stopPropagation();
 }
 }
}
</script>
</head>
<body>
<table width="204" id="grandfather">
 <tr >
 <td width="96"></td>
 <td width="96"></td>
 </tr>
 <tr id="father">
 <td id="noStop">没有阻止事件冒泡</td>
 <td id="haveStop">阻止了事件冒泡</td>
 </tr>
 <tr>
 <td> </td>
 <td> </td>
 </tr>
</table>
</body>
</html>

ログイン後にコピー

コードのコメント:
1.if(window.event) は、IE8 および IE8 ブラウザとの互換性を保つために使用されます。
2. evt.stopPropagation() は標準ブラウザです。

上記のコードでは、1 つのセルはイベントのバブリングを妨げていますが、もう 1 つのセルはイベントのバブリングを妨げていません。これが皆さんの学習に役立つことを願っています。