码迷,mamicode.com
首页 > 其他好文 > 详细

关于事件监听的那些事

时间:2018-05-16 22:40:32      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:get   节点   info   技术分享   监听   click   布尔值   rip   利用   

1、事件的概念:

JavaScript使我们有能力创建动态页面,网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为;

2、

事件分为DOM0级事件和Dom 2级事件,DOM2级事件也叫做事件监听。DOM 0级事件的缺点是如果事件相同 后者的事件会覆盖前者的事件技术分享图片 
如上图,点击的时候则只会显示弹出2,而不会显示弹出1;
清楚事件的时候只要使用代码div.onclick = null则可.
 
3、DOM2级事件,又叫做事件监听.DOM二级事件有两个方法,用于处理制定和删除事件处理程序的操作(addEventListener和removeEventListener),里面有三个参数:
    参数1:事件类型  不需要加on   
        参数2:回调函数    
        参数3:布尔值  true代表捕获   false代表冒泡;
 
 
   而在IE中不存在这个方法,所以要用attachEvent(),解绑事件用detachEvent;在绑定的方法中有两个参数:
    参数1:事件类型  需要加on
        参数2:回调函数;
技术分享图片
事件监听的优点:可同时绑定几个事件,且不会 被覆盖; 
事件监听的缺点:不兼容 ;
4、事件流、事件冒泡、事件捕获
 
        当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播,路径所经过的节点都会收到该事件,这个传播的过程叫做DOM事件流
 
        元素触发事件时,事件的传播过程称为事件流,过程分为捕获和冒泡两种
 
        冒泡事件:微软提出的   事件由子元素传递到父元素的过程,叫做事件冒泡
 
        捕获事件:网景提出的   事件由父元素到子元素传递的过程,叫做事件捕获
 
  当事件冒泡和事件捕获同时存在时,会先执行捕获,再执行冒泡;
 
       在IE中只存在事件冒泡而没有捕获,在火狐中只存在事件捕获;
 
技术分享图片
6、事件代理/事件委托
   利用事件冒泡的机制,将子级的事件绑定到父级身上,相当于让父级代理其去执行一个事件,当触发事件的时候,事件会冒泡到父级,而所有的子级都会触发这一个事件,所以我们需要当触发到指定子级的时候才触发.,所以这个时候我们需要通过事件源来查找这一个子级,当是所期望的子级的时候触发事件;怎么找到这个子级呢,可以用e.target来查找,当然,这么好用的东西一般都会有缺点,那就是兼容,所以为了兼容IE,我们需要这样写:target = e.target||e.srcElement.
7、事件委托的好处
     1、可以实现对未来元素事件的绑定,以后如果使用DOM动态添加元素,也可以触发这个事件,而不需要重新绑定事件
     2、减少事件绑定,提高浏览器性能
 

关于事件监听的那些事

标签:get   节点   info   技术分享   监听   click   布尔值   rip   利用   

原文地址:https://www.cnblogs.com/jijunsama/p/9048161.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!