事件的委派

有的时候,需要实现一个列表发生响应事件,但是新添加的也实现,又可以提高性能的方法

<body>
    <button id= "btno1">添加新链接</button>
    <ul id="u1">
    <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>
</body>

实现点击链接产生想要的内容,首先是可以使用循环实现:

for (var i =0 ; i<Alla.length; i++){
//                    Alla[i].onclick = function(){
//                        alert("我是a的单击响应函数");
//                    }
//                }

但是

/*
* 为每个超链接都绑定一个单击函数
* 这里我们为每个超链接都绑定一个单击响应函数,这种操作比较麻烦,
* 而且这些操作只能为已有的超链接设置事件,而新添加的的超链接必须重新绑定。
* 下面这种新加的超链接,都无效的,所以需要想其他的方法。
*/

*
* 我们希望只绑定一次事件,即可用在多个元素上,即使元素是后添加的。
* 我们可以尝试将其绑定给元素的共同的祖先元素
* 为ul绑定一个单击响应函数,这时候就应用到了事件冒泡去实现。叫做事件的委派。
* 事件的委派:
* - 值将事件统一绑定给元素的共同的祖先元素,这样当后代上的事件触发时,会一直冒泡到祖先元素,
* 从而通过祖先元素的响应函数来处理事件
* 事件的委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能。
*/

ul.onclick = function(event){
                    //但是这样子的话,只要触发了ul的区域的都会触发,空白处也会。为了达到触发li才发生期望的值。
        /*
        * event中的target返回触发此事件的元素s
        */
event = event || window.event;
if (event.target.className == "link"){
    alert("我是a的单击响应函数");
    }
                    
}

猜你喜欢

转载自www.cnblogs.com/caicaihong/p/9317190.html
今日推荐