ホームページ >ウェブフロントエンド >jsチュートリアル >JS バインディング イベント_JavaScript スキルを理解する
JS バインディング イベント_JavaScript スキルを理解する
- WBOYオリジナル
- 2016-05-16 15:19:081258ブラウズ
この記事では、参考のために JS バインディング イベントの詳細な分析を提供します。具体的な内容は次のとおりです。
IE の初期のバージョンでは、obj.attachEvent() が使用されていましたが、他のブラウザでは addEventListener() が使用されていました。
どちらのメソッドにも 3 つのパラメータがあります。 イベント タイプ、イベント関数 、最後のパラメータは ブール値 、true または false です。
true はイベント キャプチャ フェーズで実行することを意味し、false はイベント バブリング フェーズで実行することを意味します。
IE はイベント バブリングのみをサポートしているため、ほとんどの場合、イベント ハンドラーはイベント フローのバブリング ステージに追加されます。デフォルトは「false」です
これにより、さまざまなブラウザとの互換性が最大限に高められます。 イベントがターゲットに到達する前にイベントをインターセプトする必要がある場合にのみ、イベント ハンドラーをキャプチャ フェーズに追加することをお勧めします。 特に必要な場合を除き、イベント キャプチャ フェーズ中にイベント ハンドラーを登録することはお勧めしません。
さまざまなブラウザのイベント バインディングと互換性があります:
function addEvent(obj, eventType, callback, bubble){
if(obj.addEventListener){
obj.addEventListener(eventType, callback, bubble);
}else{
obj.attachEvent(eventType, callback, bubble);
}
}
呼び出すときは、コールバック関数には setTimeout と同様に括弧が必要ないことに注意してください。
この部分は比較的理解しやすいですが、最後のパラメータについては、よく理解していない人が多いと思います。つまり、実際に理解するには、まだプログラムを作成してテストする必要があります。
HTML 部分:
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="">
<title>Document</title>
<!--css js 文件的引入-->
</head>
<body>
<div id="out">
<p>我是路人甲</p>
<div id="middle">
<div id="inner">最里面的</div>
</div>
<p>我是路人乙</p>
</div>
</body>
</html>
js コンテンツ: (最初のケース)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：inner-------middle------out
out.addEventListener('click',function(){alert("我是最外面的");},false);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
js コンテンツ: (2 番目のケース)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out------inner-------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>
js コンテンツ: (3 番目のケース)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out------inner-------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
js コンテンツ: (4 番目のケース)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out-------middle------inner
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
js コンテンツ: (5 番目の状況)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：middle-------inner------out
out.addEventListener('click',function(){alert("我是最外面的");},false);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
js コンテンツ: (6 番目のケース)
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out-------inner------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>
上記の 6 つの状況に対応する結果を読めば、最後のパラメータが true か false かの違いがすでに深く理解できると思います。