监听事件方法:addEventListener(<event-name>, <callback>, <use-capture>)

移除监听事件方法:removeEventListener(event, function)

其中 addEventListener(event, function, useCapture) 有三个参数,分别代表:

第一个参数 event-name (String):所要监听的事件名称或类型,

  如:鼠标事件(mousedown, mouseup, mousemove, mouseover, mouseout, mouseclick, dblclick 等)

    键盘事件(keydown, keyup, keypress 等)

    等用户触发的事件

第二个参数 callback (function):监听到事件后所要执行的操作,即事件触发时的回调

第三个参数 use-capture (boolean):决定事件在哪个阶段被触发并执行相应的回调函数

  false:冒泡阶段触发,true: 捕获阶段触发。默认值是 false,即冒泡触发

冒泡:内部元素的事件会先被触发,然后再触发外部元素(子元素先触发,父元素再触发)。由内及外

捕获:外部元素的事件会先被触发,然后才会触发内部元素的事件(父元素先触发,子元素再触发)。由外到内

  

addEventListener(event, function, useCapture) 简记的更多相关文章

  1. addEventListener event

    addEventListener   先看个例子: document.getElementById("myBtn").addEventListener("click&qu ...

  2. autoHeight # 动态高度添加 用 window.addEventListener('resize', function () {

    动态高度添加 用 window.addEventListener('resize', function () { mounted () { this.init() window.addEventLis ...

  3. dom addeventlistener与id 绑定事件的区别

    文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() ...

  4. Javascript addEventListener dispatchEvent

    测试代码:分别在嵌套的元素body,div#level1,div#level2,div#level3上附加事件,仅在chrome中测试通过. <!DOCTYPE html> <htm ...

  5. addEventListener与removeEventListener

    addEventListener:添加事件监听器 element.addEventListener(event, function, useCapture) event:事件类型,字符串,不要加&qu ...

  6. [转]addEventListener() 方法,事件监听

    转载  白杨-M  http://www.cnblogs.com/baiyangyuanzi/p/6627401.html addEventListener() 方法,事件监听 你可以使用 remov ...

  7. addEventListener() 方法,事件监听

    知识点1:addEventListener() 方法,事件监听,可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(e ...

  8. JS之event flow

    DOM事件流 1.定义: DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM ...

  9. HTML DOM addEventListener() 方法

    实例 为 <button> 元素添加点击事件. 当用户点击按钮时,在 id="demo" 的 <p> 元素上输出 "Hello World&quo ...

随机推荐

  1. @PostConstruct和@PreConstruct注解

    @PostConstruct和@PreConstruct.这两个注解被用来修饰一个非静态的void()方法.而且这个方法不能有抛出异常声明. @PostConstruct //方式1 public v ...

  2. 2019.4.3 HTML&CSS 理论部分

    HTML 块标签 1.独占一行,不和其他标签待在一行; 2.能设置宽高 常见的块标签:h1-h6,p,div,table,hr,br,ul,ol, 行标签 1.可以和其他行标签待在一行 2.不能设置宽 ...

  3. apache的应用(发布目录,黑白名单,虚拟主机,PHP-cgi支持,正向代理,https加密,)

    [root@apache1 ~]# yum install httpd -y [root@apache1 ~]# cd /var/www/html/   进入默认发布目录 [root@apache1 ...

  4. linux的yum报错

    yum makecache Loaded plugins: fastestmirror Could not retrieve mirrorlist http://mirrorlist.centos.o ...

  5. 3dsmax2012卸载/安装失败/如何彻底卸载清除干净3dsmax2012注册表和文件的方法

    3dsmax2012提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dsmax2012失败提示3dsmax2012安装未完成,某些产品无法安装,也有时候想重新 ...

  6. openerp学习笔记 对象间关系【多对一(一对一)、一对多(主细结构)、多对多关系、自关联关系(树状结构)】

    1.多对一(一对一)关系:采购单与供应商之间的关系 'partner_id':fields.many2one('res.partner', 'Supplier', required=True, sta ...

  7. tar压缩命令

    01-.tar格式解包:[*******]$ tar xvf FileName.tar打包:[*******]$ tar cvf FileName.tar DirName(注:tar是打包,不是压缩! ...

  8. 查看修复HDFS中丢失的块

    检测缺失块 hdfs fsck -list-corruptfileblocks hdfs fsck / | egrep -v '^\.+$' | grep -v eplica 查看上面某一个文件的情况 ...

  9. cut、grep和排序命令

    1.cut 对于行进行操作 cut -d ':' -f 2 以':'为分隔符,切出第二部分的所有行 cut -c 12- 从第12字符往后的字符所有行 2.grep grep '选取的串' 选出所有含 ...

  10. javascript typeof 和 instanceof 的区别和联系

      这篇文章是我看完<JavaScript高级程序设计(第2版)>书籍的随笔文章,目的只有一个,以备自己和网友们方便参考和记忆! typeof是什么?       typeof 是一个操作 ...