啓発イベントバブリング
私の意見では、イベントのバブリングでは、彼は単純なポイントは、我々はトリガイベントの要素を持っている場合、親要素の同じタイプのすべてのイベントの祖先をトリガすることです
私たちは、バブルイベントは、次のような特徴を持っているかを知りたいです
-
イベントバブリングはデフォルトで有効になっているが、我々は、JSコードイベントのバブリングによって制御することができます
当触发我们的事件函数时，事件函数其实会接收到一个event对象，该对象上的stopPropagation()可以阻止事件冒泡。 当我们在我们的事件函数中执行event.stopPropagation()方法，那么事件冒泡到此就结束了 -
すべてのタイプのイベントは、イベントバブリングをサポートしているわけではありません
-
イベントバブリングイベントは、機能の同じタイプをトリガーします
例えば
コンセプトは、実用的な例に続いて、あまりにも漠然としています
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<title>事件冒泡</title>
<style>
.outer1,
.outer2 {
width: 200px;
height: 200px;
margin: 20px;
position: relative;
}
.outer1 {
background: red;
}
.outer2 {
background: yellowgreen;
}
.inner1,
.inner2 {
width: 100px;
height: 100px;
position: absolute;
top: 25%;
left: 25%;
}
.inner1 {
background: blue;
}
.inner2 {
background: pink;
}
</style>
</head>
<body onclick="bodyF()">
<div class="outer1" onclick="outer1F()" onchange="outer1CF()">
<div class="inner1" onclick="inner1F()"></div>
</div>
<div class="outer2" onclick="outer1F()">
<div class="inner2" onclick="inner2F(event)"></div>
</div>
<script>
function bodyF(){
console.log("body is clicked")
}
function outer1CF() {
console.log("outer1 change event has been triggered")
}
function outer1F() {
console.log("outer1 is clicked")
}
function inner1F() {
console.log("inner1 is clicked")
}
function outer2F() {
console.log("outer2 is clicked")
}
function inner2F(event) {
// 阻止事件冒泡
event.stopPropagation();
console.log("inner2 is clicked")
}
</script>
</body>
</html>
レンダリング：
[OK]を、今、私たちは実験を開始します
まず、我々はをクリックして、青のdiv結果の実装は、以下のブラウザ
原因分析
1. 首先，当我们点击蓝色的div时，会执行蓝色div所绑定的点击事件
2. 然后，开始事件冒泡，朝着蓝色div的父元素及祖先元素冒泡，如果其父元素及祖先元素也绑定相同类型的事件，则执行
在这里，蓝色的div的父元素是红色的div,其祖先元素就只有body元素
首先，执行蓝色div的点击事件函数
然后，再执行其父元素红色div的点击事件函数
最后，执行其祖先元素body的点击事件函数
因此，浏览器的执行效果如上图所示
次に、我々はをクリックして、ピンクのdiv結果の実装で、ブラウザは以下の
分析を
1. 首先，我们点击粉色的div时，会触发粉色div的点击事件函数
2. 由于粉色div的点击事件函数中有event.stopPropagation()执行，则会使得事件冒泡到此就结束了
因此，浏览器的执行效果如上图所示
今、私たちは、次の操作を行います
- 緑のdivクリックイベント関数にするevent.stopPropagation（）メソッドのピンクのdivクリックイベント機能。
- するevent.stopPropagation）（ピンクdivのクリックイベント機能を削除するコードステートメント
- その後、我々は上でもう一度クリックしますピンクのdiv
図に示すように、ブラウザの結果の実装。
原因分析
1. 首先，点击了粉色的div,则触发粉色div的点击事件函数
2. 因为粉色div的点击事件函数并没有阻止事件冒泡，则事件冒泡到粉色div的父元素，绿色的div
3. 然后触发绿色的div点击事件函数
4. 因为绿色的div点击事件函数有执行event.stopPropagation()，即停止事件冒泡。粉色div的祖先元素body的点击事件就无法触发
因此，点击粉色的div,就执行了粉色div的点击事件和绿色div的点击事件
浏览器的执行效果如上图所示
クリックして、赤のdivと緑のdiv、最終的に自分自身をトリガし、その親クリックイベント機能や祖先要素。
ほとんど上記と原理の分析、などがないあまり手の込んだ
イベントのデリゲート
私たちは、イベントバブルの原則に従い、「イベントのデリゲート」と呼ばれるメカニズムを実装することができます
为什么要提出“事件委托”这种机制
原因
1. 当我们为一个元素注册事件时是需要付出内存的代价的，当我们为元素的事件过多时会影响到页面的性能
2. 代码编写的方便，如果按照我们之前原来的写法，我们需要为每一个元素一个一个注册事件，这样太麻烦了。我们如果使用“事件委托”机制就可以为一系列标签注册事件，减少我们代码的编写
ここでは、「イベントのデリゲート」のを使用した例と
サンプルコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul onclick="handleClick(event)">
<li>this is li one</li>
<li>this is li two</li>
<li>this is li three</li>
</ul>
<script>
function handleClick(event) {
alert(event.srcElement.innerHTML);
}
</script>
</body>
</html>
今、私は、対応する李李に対応するポップアップコンテンツをクリックすることで、それを実現したいです
、オリジナルの練習によると、あなたは、各li要素にクリックイベントを登録する必要がある場合
その後、我々は長い間それを扱う統一彼らの共通の親要素のクリックイベント登録、などとして、「イベント委譲」メカニズムを使用している場合。そうすることで、書き込みに多くのコードを減らすことができます
イベントは、イベントタグによってトリガ現在のイベントオブジェクトについての情報を受け取ることができ、ラベルは、我々はこれに基づいてイベントをトリガすることができるオブジェクトは真を知っている機能をトリガー
ここでは、これらの三つの要素UL李の共通の親のクリックイベントを登録し、パラメータイベントを受信しました
event对象上的srcElement的值是指被触发事件的标签（在这里是被点击的li标签）
その後、我々は、Liタグは以下のような効果があり、適切なコンテンツを表示する]をクリック
李クリックしてください
最初の二つのliをクリックして
最初の3つの李をクリック
エンド！！！
