事件委托就是利用事件冒泡，将多个子元素的事件委托给他们的父级，加快初始化代码的执行速度
事件源：
e.target IE8 +
e.srcElement IE8 -
<body>
<div id="box">
<p>00001</p>
<p>00002</p>
<p>00003</p>
<p>00004</p>
<p>00005</p>
<p>00006</p>
<p>00007</p>
<p>00008</p>
<p>00009</p>
</div>
<script src="compatible.js"></script>
<script>
var aP = document.getElementById( 'box' ).children,
length = aP.length;
for ( var i=0 ; i<length ; i++ ){
addEvent( aP[i] , 'click' , function(){
alert( this.innerHTML );
} )
}
</script>
</body>
弹出对应的点击p的内容，类似这样 事件可以用事件委托
<script>
var oBox = document.getElementById( 'box' );
addEvent( oBox , 'click' , function ( e ){
e = e || window.event;
var target = e.target/*不兼容IE8以下*/ || e.srcElement /*兼容IE8以下*/ ; //查找事件源 事件源：事件触发的最低层元素
if( target.nodeName === 'P' ){ //注意 这里要大写P
//target.nodeName 点击的事件标签
alert( target.innerHTML );
}
} )
</script>
如何获取序号
<script>
var oBox = document.getElementById( 'box' );
addEvent( oBox , 'click' , function ( e ){
e = e || window.event;
var target = e.target/*不兼容IE8以下*/ || e.srcElement /*兼容IE8以下*/ ; //查找事件源
var aP = target.parentNode.children; //获取到是类数组
var arrAp = [].slice.call( target.parentNode.children )//转化成数组
// [].slice() 这个就是切割数组 call改变this指向 target.parentNode.children.slice();
console.log( aP );
if( target.nodeName === 'P' ){ //注意 这里要大写P
alert( arrAp.indexOf( target ) );
}
} )
</script>
Animation.gif
网友评论