イベントキャプチャ、イベントバブリング
イベント監視：同じイベントの複数の監視を許可します（複数のイベント処理機能を追加します）
element.addEventListener("事件名", 事件处理函数, 是否采取捕获boolean --默认false)
イベントバインディングのキャンセル：
element.removeEventListener("事件名", 声明函数的名字)
element.on事件名 = null
キャプチャイベント：ターゲット要素の親要素は、サブクラスによって追加されたイベントをキャプチャできます。イベントがトリガーされると、対応するイベントのバインディング機能を事前にトリガーできます。
イベントバブリング：ターゲット要素イベントがトリガーされた後、イベントはDOMツリーに沿って移動します。その親要素が渡され、親要素に対応するイベントハンドラーがトリガーされます。目标元素触发事件 --> 目标元素父系元素执行捕获事件，从DOM树上层向下层传递 --> 目标元素执行自身事件 --> 目标元素父系元素执行冒泡事件，从DOM树下层向上层传递
イベントの委任
イベントバブリングメカニズムとevent.targetを使用すると、トリガーイベント要素の特性を見つけて、子要素のイベントを親要素に委託して監視するプロセスを実現できます。
利点：
1。DOM操作の数を節約します
2.新しく追加された子要素にもイベントを含めることができます
<ul class="ul">
<li>li_1</li>
<li>li_2</li>
<li>li_3</li>
<li>li_4</li>
</ul>
<button class="btn">新增li</button>
<script>
//
var ulEl = document.querySelector('.ul');
// 循环绑定事件
var lis = document.querySelectorAll('.ul>li');
//
var btn = document.querySelector('.btn');
// for(var i = 0 ; i < lis.length ; i ++){
// lis[i].onclick = function(){
// console.log(this.innerText);
// }
// }
btn.onclick = function(){
lis = document.querySelectorAll('.ul>li');
// 1. appendChild
// 2. innerHtml
var li = document.createElement('li');
li.innerText = 'li_'+(lis.length+1); // li_5
ulEl.appendChild(li);
}
// 如何给新增的元素添加事件??
ulEl.onclick = function(e){
// 触发点击事件对象
var target = e.target;
// 判断过滤委托对象本身(ul)
// if(target.tagName(''))
// console.log(target.tagName);
if(target.tagName == 'LI'){
//给目标元素添加事件即可
console.log(target.innerText);
}else{
console.log('点歪了...');
}
}
</script>
行動イベントの委任
特定の特性に基づいてイベントのタイプを宣言し、ドキュメントオブジェクトを使用してイベントを監視します。
<body>
<button data-count="0">0</button>
<p data-count="0">0</p>
<span data-count="0">0</span>
<div>14</div>
<p data-color="orange">忽如一夜春风来，千树万树梨花开。</p>
<h3 data-color="purple">李白乘舟将欲行，忽闻岸上踏歌声。</h3>
<script type="text/javascript">
/*
行为型事件委托：根据某个特征声明一类事件，用文档对象监听事件
*/
document.body.addEventListener("click", function () {
if(event.target.dataset.count){
event.target.innerText = Number(event.target.innerText) + 1;
}
})
document.body.addEventListener("click", function () {
if(event.target.dataset.color){
event.target.style.color = event.target.dataset.color;
}
})
</script>
</body>