JavaScriptの事件の委任
12007 ワード
イベントの委任:要素共有の祖先要素にイベントを統合し、後代元素のイベントがトリガされると、祖先元素に泡が立ち、祖先元素の応答関数によって事件を処理する.
イベントの委任は、発泡を利用し、委任によりバインディングの回数を減少させ、プログラムの性能を向上させることができる.
デモ:
イベントの委任は、発泡を利用し、委任によりバインディングの回数を減少させ、プログラムの性能を向上させることができる.
デモ:
<!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> </title>
<style>
*{
padding:0px;
margin: 0px;
}
ul{
width: 300px;
height:100px;
background-color: #bfa;
}
</style>
<script>
window.onload=function(){
var aLinkUlNode=document.getElementById('aLinkUl');
var count=0;
var addLinkBtn=document.getElementById('addLink');
addLinkBtn.onclick=function(){
//debugger;
// ul li
var liCollection=aLinkUlNode.getElementsByTagName('li');
var len=liCollection.length;
var liNode=document.createElement('li');
liNode.innerHTML="ハイパーリンク+(len+1)+"";
aLinkUlNode.appendChild(liNode);
}
/*
,
*/
aLinkUlNode.onclick=function(event){
event=event||window.event;
//event.target
if(event.target.className=="link"){// ,
alert(event.target);
alert('a !');
}
}
// var aNodeCollection= document.getElementsByTagName('a');
// for(var i=0;i
// aNodeCollection[i].οnclick=function(){
// alert('a !');
// }
// }
}
</script>
</head>
<body>
<button id="addLink"> </button>
<ul id="aLinkUl">
<p>P </p>
<li><a href="javascript:;" class="link"> 1</a></li>
<li><a href="javascript:;" class="link"> 2</a></li>
<li><a href="javascript:;" class="link"> 3</a></li>
</ul>
</body>
</html>