`
zhangyaochun
  • 浏览: 2552802 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

addEventListener等事件监听的参数细谈

阅读更多

简单记录,学习参考

 

前言

 

写的目的主要是细化到具体的参数,兼容性的文章可以参考其他我博客的文章。

 

1.addEventListener(type,listener.useCapture)

 

 

  • type              字符串,事件名称,如'click'等 不需要'on'前缀
  • listener         事件处理的函数,实现EventListener接口
  • useCapture   是否使用捕获--- true为捕获,false为冒泡

a.  先从第3个参数开始吧。

/*
html文档树结构
*/
<div id="out">
   <div id="innerP">
         <div id="innerChild">最里面的孩子</div>
   </div>
</div>

<div id="showInfo"></div>
 
var out = document.getElementById('out');
var innerP = document.getElementById('innerP');
var innerChild = document.getElementById('innerChild');
var infoShow = document.getElementById('infoShow');
/*
绑事件
*/
out.addEventListener('click',function(){infoShow.innerHTML += 'outDiv' + '<br />'},false);

innerP.addEventListener('click',function(){infoShow.innerHTML += 'innerP' + '<br />'},false);

innerChild.addEventListener('click',function(){infoShow.innerHTML += 'innerChild' + '<br />'},false);
 
测试原理设计
       因为我们测试的是第3个参数,它有true和false两个值,所以有六种排列

测试结果
  1. 设置了true的触发的顺序永远在false之前
比如:我修改了innerP的true,在点击innerChild的时候触发顺序还是innerP在前。

     2.  全为false的话

点击innerChild触发的顺序是innerChild-------innerP------outDiv

     3. 全为true的话

点击innerChild触发的顺序是outDiv------innerP-------innerChild



b.  下面说说第二个参数listener

  •   可以附加多个事件处理函数,执行顺序按照绑定的先后
  •   还有就是关于处理函数删除的问题,使用addEventListener()将事件处理函数加入到捕获阶段,则必须在removeEventListener()中指明是捕获阶段,才能正确地删除这个事件处理函数。 
  使用传统的方法直接给事件处理函数属性赋值,事件处理函数将被添加到事件的冒泡阶段

var out = document.getElementById('out');
out.onclick = fnClick;
out.addEventListener('click',fnClick,false);
 

  但是直接赋值的不同点在于,后续对事件处理函数的赋值会清除前面的赋值

1
0
分享到:
评论
1 楼 jertom 2016-05-26  
<div id="showInfo"></div>改为
<div id="infoShow"></div>

相关推荐

    JavaScript使用addEventListener添加事件监听用法实例

    本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;title&gt;This text is the title of the...

    详解addEventListener的三个参数之useCapture

    addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 “click”);第二个参数表示要接收事件处理的函数;第三个参数为 useCapture,本文就讲解它。 代码如下: ”outDiv”&gt;  ”middleDiv”&gt;  ”...

    javascript事件监听与事件委托实例详解

    在js中,常用到element.addEventListener()来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响。此时,我们可以用事件委托的方式来进行事件的监听。 每个事件都经历三个阶段 ...

    addeventlistener监听scroll跟touch(实例讲解)

    这三个事件只在手机上生效 touchstart:手指开始触屏 touchmove:手指移动 touchend:手指触屏结束 这个事件在手机上跟在pc端都生效 scroll事件 addeventlistener(name,callback,optional,useCapture) useCapture...

    JS监听事件的叠加和移除功能

    html DOM元素有很多on开头的监听事件,如onload、onclick等,见DOM事件列表。但是同一种事件,后面注册的会覆盖前面的: [removed] = function(){ alert&#40;1&#41;; } [removed] = function(){ alert&#40;2&#41;...

    封装了一个支持匿名函数的Javascript事件监听器

    关于js中的事件监听大家用的比较多了,无非是判断浏览器是否支持addEventListener和attachEvent,网上搜索关于事件监听的方法也挺多,但是总有些不是很完善。下面的方法中对于添加事件监听的方法是一样的,只不过在...

    浏览器的 5 种 Observer,你用过几种?

    网页开发中我们经常要处理用户交互,我们会用 addEventListener 添加事件监听器来监听各种用户操作,比如 click、mousedown、mousemove、input 等,这些都是由用户直接触发的事件。 那么对于一些不是由用户直接触发...

    Unity事件框架->监听派发事件框架插件

    通过该框架可优化事件的操作控制,方便不同脚本间事件的调用,要注意监听要在派发事件之前,否则事件无响应。 监听语句:Model.eventManager.addEventListener(枚举类.ToString(), 方法名); 派发语句:Model.event...

    浅谈addEventListener和attachEvent的区别

    • addEventListener共有3个参数,如下所示: element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事件的对象,及HTML节点。 type 事件名称,注意去掉事件前边的“on”,...

    vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解

    在网上看了一下vue中监听滚动条滚动事件,清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时,自动加载更多的时候有这个需求。 我认为使用document.addEventListener会破坏...

    动态的绑定事件addEventListener方法的使用

    本文为大家介绍下动态的绑定事件的方法addEventListener的使用示例,不了解的朋友可以参考下

    addEventListener()和removeEventListener()追加事件和删除追加事件

    addEventListener()与removeEventListener()用于追加事件和删除追加。所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。 最后这个布尔值参数是true,...

    JavaScript中的事件处理程序(addEventListener)

    EventTarget是一个由...addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element,Document和Window或者任何其

    javascript在事件监听方面的兼容性小结

    3,IE事件监听器内使用的是一个全局的Event对象,而w3c是将event对象作为参数传递给监听器。 4,为了避免触发默认的事件行为,IE的做法是要求程序员设置Event对象中的returnValue属性值为false,而w3c的做法是执行...

    Javascript添加监听与删除监听用法详解

    js中事件监听就是利用addEventListener来绑定一个事件,这个用法在jquery中非常常用并且简单,但在原生js中比较复杂,这里整理了addEventListener事件各方法的测试与例子供大家参考学习。 在前两天做播放器的时候...

    window.addEventListener来解决让一个js事件执行多个函数

    可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。你可以全写在body中,也可以全放到[removed]中,但是这样并不是很方便,有时我们需要两个同时用到。这时就要用window....

    js实现滑动触屏事件监听的方法

    本文实例讲述了js实现滑动触屏事件监听的方法。分享给大家供大家参考。具体实现方法如下: function span_move_fun(){ var span = document.getElementById("move_k"); var span_left = $(span).offset().left; ...

Global site tag (gtag.js) - Google Analytics