您的位置：首页 > Web前端 > JavaScript

js事件、事件委托

2016-05-19 23:13 302 查看

事件流　

事件流：页面中接收事件的顺序；

IE的事件流是冒泡流，其他的浏览器是捕获流，如下图；



DOM事件流

DOM事件流同时支持这两种事件流，并且规定DOM任何事件流都包含三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段；

注册事件

之前注册事件的方法或多或少都会存在一些问题，现在通常是使用AddEventlistener()来注册事件/监听事件，与之对应的还有removeEventListener()来删除事件;

所有DOM节点都有这两个方法，并且他们都是接收3个参数（事件类型，事件处理，boolean）,第三个参数如果是在冒泡阶段处理是false,反之true；

建议将事件处理程序添加到事件冒泡阶段，这样可以最大限度的兼容各种浏览器；

varbtn=document.getElementById("btn1");
btn.addEventListener("click",function(){alert("hello")},false);


关于事件这里差不多了没多少东西；

委托事件

一开始我以为js中的委托事件跟.net中的delegate(委托)是一个概念，其实不是这样，js中的委托事件其实是利用事件冒泡到父节点，通过父节点来监听事件，在通过事件对象来判断是那个元素，然后相应的处理；

event事件对象：在触发DOM上任何事件都会产生这个event对象，这个对象包含了所有与事件相关的信息（很强大的一个对象具体的可以自己查相关资料）；

委托实例

这里的委托还是挺容易理解的，就是委托别人来帮你做事情，根据我前面说的原理，翻译从HTML应该是这样的：本来是该你这个节点上该做的事情，现在委托了父节点来做；

<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
</head>
<body>
<ulid="ul">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
<script>

window.onload=function(){
varoUl=document.getElementById("ul");
oUl.addEventListener("mouseover",mouseoverDemo,false);
oUl.addEventListener("mouseout",mouseoutDemo,false);

functionmouseoverDemo(ev){
varev=ev||window.event;
vartarget=ev.target||ev.srcElement;//兼容IE
if(target.nodeName.toLowerCase()=="li"){
target.style.background="red";
}
}
functionmouseoutDemo(ev){
varev=ev||window.event;
vartarget=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=="li"){
target.style.background="";
}
}
}

</script>
</html>



委托事件优点
1、相比之前遍历每一个li在绑定一个事件感觉爽了很多；

2、很明显没有了for性能肯定是有提升；

3、动态的添加新的元素还是会有之前的事件（因为不管怎么样还是要冒泡到父元素的嘛）；

内容很少都是些基础；
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航