EventTargetAPI定义了DOM事件(mouse事件等)的监听和触发方法,所有的DOM节点都部署了这个接口。

这个接口有三个方法:addEventListener, removeEventListener, dispatchEvent。

一. EventTargetAPI

1. EventTarget.addEventListener(type, listener, options)

给DOM节点对象添加事件监听。

语法:

eleTarget.addEventListener(type, listener [, useCapture])
// type: DOM事件类型,区分大小写
// listener: 监听回调函数,function(e){}; e是事件发生产生的Event对象;
// userCapture: 布尔值,是否在捕获阶段触发;相当于{capture: boolean}

第二个参数,是个回调函数,入参是Event对象,内部的this, 指向DOM节点对象eleTarget.

  <button id="btn">ClickMe</button>
<script>
btn.addEventListener('click',function(e) {
console.log(this === btn); // true
})
</script>

第三个参数还可以是一个配置对象:

eleTarget.addEventListener(type, listener, options)
// options的属性如下:
options = {
capture: boolean, // 是否在捕获阶段触发;默认false
once: boolean, // 是否只监听一次,然后自动移除;默认false,
passive: boolean, // 是否禁止prentDefault()方法;默认false
}

为同一个目标添加同一个监听事件,如果回调函数相同,那么只执行一次,其余的忽略。

function hello() {
console.log('Hello world');
} document.addEventListener('click', hello, false);
document.addEventListener('click', hello, false); //自动忽略
// 运行结果
hello world

为同一个目标添加同一个监听事件,如果回调函数不同,那么按照添加顺序,依次执行。

function hello() {
console.log('Hello');
}
function world() {
console.log('world')
}
document.addEventListener('click', hello, false);
document.addEventListener('click', world, false);
// 运行结果
hello
world

这点和DOM对象的on[event]事件不同,on[Event]会出现覆盖,只最后一个起作用;

而且只在冒泡阶段触发,不能指定触发的阶段。

function hello() {
console.log('Hello');
}
function world() {
console.log('world')
}
document.onclick = hello;
document.onclick = world;
// 运行结果
world

另外,HTML的on[event]事件,引号内是可执行JS代码

<div onclick="hello()">ClickMe</div>

2. EventTarget.removeEventListener(type, listener, options)

语法:

function hello() {
console.log("hello");
}
element.addEventListener('click', hello, true);
element.removeEventListener('click', hello, true);
//注意
// remove方法作用的element和后面的参数必须完全一致。
// 且第二个参数必须是函数的变量形式传递;否则,相当于一个新的函数,即使内容和add中一样,也是一个新的函数

3. EventTarget.dispatch(event)

手动触发监听函数,通过代码触发;

参数不能为空,必须是Event对象;

返回一个布尔值,表示是否触发成功;  返回值在监听函数执行完成后返回。

示例:

  btn.addEventListener('click',function(event) {
console.log('listener end')
})
console.log(btn.dispatchEvent(new Event('click')));
// 运行结果如下:
listener end
true

应用:

可以自定义一个事件监听函数,在需要的位置触发函数调用。

  btn.addEventListener('lyra',function(event) {
console.log('Be dispatched at i=2')
})
btn.addEventListener('myevent',function(event) {
console.log('Be dispatched at i=1')
})
for(let i=0; i < 10; i++) {
if (i === 1) {
btn.dispatchEvent(new Event('myevent'));
}
if (i === 2) {
btn.dispatchEvent(new Event('lyra'));
}
}
// 运行结果
Be dispatched at i=1 //i===1时先触发myevent
Be dispatched at i=2

二. Event事件

上面的监听和触发函数的基础是Event对象。

Event是js的原生对象,每个DOM事件产生的对象都是它的实例。

它是一个构造函数,实例化可以自定义一个事件。

语法如下:

const event = new Event(type, options);
// type是自定义事件的类型
// options是自定义事件的配置

options有两个属性:

const options = {
bubbles: boolean, // 指定事件是否可以冒泡;默认false,只在捕获阶段触发
cancelable: boolean, // 指定事件是否可以调用preventDefault()方法
}

三. CustomEvent事件

和Event事件的构造函数的区别是: 触发时可以通过detail属性传入自定义数据。

const data = fetch(url);
const event = new CustomEvent('myevent', {
bubbles: false,
cancelable: false,
detail: data
})
ele.addEventListener('myevent', function(e){
console.log(e.detail); //data
})
ele.dispatch(event)

四.应用

DOM节点同时绑定单击事件和双击事件

let previous=0;
let timer;
btn.addEventListener('click', function(e) {
const diff = e.timeStamp - previous;
if (diff < 300) {// 双击
console.log('double click');
clearTimeout(timer);
} else {
timer = setTimeout(function() {
console.log('single click')
},300);
previous = e.timeStamp;
}
},false);

DOM事件监听和触发的更多相关文章

  1. DOM 事件监听 事件冒泡 事件捕获

    addEventListener() 方法 实例: // 当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventList ...

  2. 9 HTML DOM事件监听&版本兼容&元素(节点)增删改查

    事件监听: 语法:element.addEventListener(event, function, useCapture); event:事件的类型,触发什么事件,注意不需要on作为前缀,比如cli ...

  3. swoft 事件监听和触发 打印sql日志

    需求 打印出swoft的所有sql日志到控制台或者文件 只要打开listener 下面 Dbranlisten.php 里面最后一行注释即可,swoft已经帮我们实现好了 ____ _____ ___ ...

  4. MVC框架入门准备(三)事件类 - 事件的监听和触发

    在mvc框架中可以看到事件类,实现事件的监听和触发. 举例: <?php /** * 事件类 */ class Event { // 事件绑定记录 private static $events; ...

  5. IE与DOM的事件监听

    IE 事件监听 标准DOM不支持   注意几点: window.onload attachEvent detachEvent 标准DOM监听,ie不支持

  6. DOM对HTML元素的增删改操作和事件概念和事件监听

    DOM创建节点的方法: document.createElement(Tag),Tag必须是合法的HTML元素 DOM复制节点的方法: 节点cloneNode(boolean deep),当deep为 ...

  7. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  8. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  9. [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】

    1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...

随机推荐

  1. AVL排序二叉树树

    AVL树第一部分,(插入) AVL树是一种自平衡二叉搜索树(BST),其中对于所有节点,左右子树的高度差不能超过1. 一个AVL树的示例 上面的树是AVL树,因为每个节点的左子树和右子树的高度之间的差 ...

  2. Python02之continue,break语句

    Python中的break和continue用法基本一样 break和continue都是用在while和for循环中,而不是跳出if...elif..else的判断语句中,跳出是直接跳出语句所在的w ...

  3. Linux基础-13-源码安装软件包

    1.准备 安装必要软件 yum install gcc-* glibc-* -y yum groupinstall '开发工具' -y 2.解包 tar xvf 包名 3.运行configure脚本, ...

  4. Redis客户端、服务端的安装以及命令操作

    目的: redis简介 redis服务端安装 redis客户端安装 redis相关命令操作 redis简介 官网下载(https://redis.io/) Redis 是完全开源免费的,遵守BSD协议 ...

  5. vue防止闪屏小技巧:[v-cloak]

    css 内添加此属性[v-cloak] { display: none; } html中引入即可 <div v-cloak> {{ message }} </div> 如果觉得 ...

  6. Spring Cloud Alibaba学习笔记(8) - RocketMQ术语与概念

    Topic 一类消息的集合,RocketMQ的基本订阅单位 部署结构 Name Server Name Server 为 producer 和 consumer 提供路由信息. 相对来说,namese ...

  7. CentOS7.9防火墙命令

    CentOS7防火墙命令有变化: CentOS7:   systemctl status firewalld.service     查看防火墙状态 systemctl stop firewalld. ...

  8. 依赖: libcheese-gtk23 (>= 3.4.0)

    unity-control-center : 依赖: libcheese-gtk23 (>= 3.4.0) 但是它将不会被安装                         依赖: libch ...

  9. nginx Proxy Cache 配置

    总结一下 proxy cache 设置的常用指令及使用方法: proxy_cache proxy_cache zone | off 配置一块公用的内存区域的名称,该区域可以存放缓存的索引数据.注意:z ...

  10. cookie和session以及iOS cookie的查取

    Cookie的工作原理 http是无状态的,这是什么意思呢?就是说,在没有cookie之前,你第一次访问这个页面和第二次访问这个页面, 服务器是不知道的,不知道前一次是你.那么问题来了,我怎么登录,登 ...