イベントの委任
1.定義
イベント委任
*-要素の共通の祖先要素へのイベントの統合されたバインディングを指します。これにより、子孫要素のイベントがトリガーされると
、応答を通じてイベントを処理するために、祖先要素にバブルアップします*祖先要素の機能。
*-イベントの委任はバブリングを使用します。委任により、イベントバインディングの数を減らし、プログラムのパフォーマンスを向上させることができます。
2.問題が解決しました
イベントが複数の要素に一度だけ適用できることを願っています。要素が後で追加された場合でも、要素
の共通の祖先要素にバインドすることを試みることができます。
* 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
* 我们可以尝试将其绑定给元素的共同的祖先元素
3.コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="ul" style="background-color: #bfa;">
<li>
<p>我是p元素</p>
</li>
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
<script type="text/javascript">
var ul = document.getElementById("ul");
var btn = document.getElementById("btn01");
btn.onclick = function(){
var li = document.createElement('li');
li.innerHTML = "<a href='javascript:;' class='link'>超链接</a>";
ul.appendChild(li);
};
/*
* 为每一个超链接都绑定一个单击响应函数
* 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
* 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
* //获取所有的a
var allA = document.getElementsByTagName("a");
//遍历
for(var i=0 ; i<allA.length ; i++){
allA[i].onclick = function(){
alert("我是a的单击响应函数！！！");
};
}
*/
/*
* 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
* 我们可以尝试将其绑定给元素的共同的祖先元素
*
*/
ul.onclick = function(event){
event = event||window.event;
//如果触发事件的对象是我们期望的元素，则执行否则不执行
if(event.target.className=="link"){
alert("我是a的单击响应函数！！！");
}
}
</script>
</body>
</html>