JavaScript基础事件委托

事件委托就是利用事件冒泡，将多个子元素的事件委托给他们的父级，加快初始化代码的执行速度
事件源：
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

JavaScript基础 事件委托

JavaScript基础事件委托