监听事件方法: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-cli项目启动遇到的坑

    利用 npm init webpack projectname 之后 切换到项目所在文件夹下,执行命令 npm install ,一直非常慢,卡在那里基本不动. 最后是利用cnpm 安装成功的. 转载 ...

  2. js的跨域问题和解决办法

    我们在开发中,经常会遇到跨域请求数据问题,那么什么是跨域呢?跨域就是js在不用域之间的数据传输或者通信,比如你在使用ajax从另外一个域请求数据,或者你的页面引入了iframe,要从iframe中获取 ...

  3. jmeter安装部署、maven路径配置

    jmeter下载地址: https://jmeter.apache.org/download_jmeter.cgi 解压文件 配置jmeter环境变量 (1)设置jmeter解压目录的JMETER_H ...

  4. Java_方法的调用①及案例

    方法调用的语法格式: 类名.方法名称([参数列表]); 调用过程: 案例: class Method01{ /*练习1:使用方法完成,输出5遍HelloWorld 方法语法格式: [修饰符] 返回值类 ...

  5. php codeception

    前言 本测试用例只针对yii2 basic框架而写,若要支持其他框架,请自行查看phpcodeception指导(需要FQ)http://codeception.com/ yii2 basic默认已经 ...

  6. 通过overflow: scroll;来实现部分区域的滚动

    在移动端中,我们希望元素的滚动,可以通过一些插件的使用来实现滚动,当然也可以自己来实现. 比如:对于某一个区域,我们可以限制好高度之后,设定:overflow-y: scroll; 这样,就可以实现滚 ...

  7. Python数据分析学习之Numpy

    Numpy的简单操作 import numpy #导入numpy包 file = numpy.genfromtxt("文件路径",delimiter=" ",d ...

  8. PHP和Java中foreach循环的用法区别

    1.foreach语句介绍: ①PHP: foreach 语法结构提供了遍历数组的简单方式.foreach 仅能够应用于数组和对象,如果尝试应用于其他数据类型的变量,或者未初始化的变量将发出错误信息. ...

  9. 带有权重的服务器SLB的实现

    1)参考了网络上的算法,但是那个算法仅仅是用于展示“权重轮循”的意图,在真正的网络下,因为是并行的,所以不可能单纯一个简单的循环可以解决问题. 2)用lock的话性能显然有损失. 3)想了一阵,结合C ...

  10. python中lambda,map,reduce,filter,zip函数

    函数式编程 函数式编程(Functional Programming)或者函数程序设计,又称泛函编程,是一种编程范型,它将计算机运算视为数学上的函数计算,并且避免使用程序状态以及易变对象.简单来讲,函 ...