监听事件方法：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. vue，下级页面刷新导致路由跳转带过来的数据消失的解决方法

    if(typeof(this.$route.query.result)=='string'){ //刷新时走这 }else{ //正常路由跳转过来后就把数据塞到 localStorage let ob ...

  2. windows本地提权——2003笔记

    windows主机 用户有三种:Users,Administrator,System 本地拥有administrator权限用户提权到system用户 win2003: at命令 系统调度任务的指令, ...

  3. kafka的安装及基本使用

    1.安装zookeeper # 解压缩 [root@localhost zookeeper]# .tar.gz [root@localhost zookeeper]# zk_simple # 复制zo ...

  4. Webpack的详细配置，[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  5. Java - 尚学堂第八章常用类（将输入的string类型的值转为整数、浮点型、日期类型）

    import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; imp ...

  6. idea常用快捷汇总

    目录 1.查询 2. 自动提示 3. 代码生成 4. 摆脱鼠标 5.源码阅读 1.查询 Shift+ Ctrl + F 全文搜索 Shift + Shift 文件名搜索 Ctrl + F 在当前文件进 ...

  7. JDBC（4）-Result结果集

    1.Result结果集的引入 当我们查询数据库时,返回的是一个二维的结果集,我们这时候需要使用ResultSet来遍历结果集,获取每一行的数据. 2.使用Result遍历查询结果 boolean ne ...

  8. ActiveMQ_Linux安装

    首先ActiveMQ查看你需要的版本 官网:http://activemq.apache.org/ 我这里选择的是:apache-activemq-5.14.0-bin.tar.gz 然后在linux ...

  9. spring 3.0 整合redis

    参考文章:https://blog.csdn.net/weixin_42184707/article/details/80361464 其中遇到了问题,第一,redis的xml配置文件中的,头部地址资 ...

  10. Hibernate查询所有数据的操作

    Hibernate查询所有数据的操作方式有三种. 1.Query (1)使用该方法查询时,不需要编写sql语句,但是需要编写hql(Hibernate Query Language)语句,该语句是Hi ...