EventTarget介绍
EventTarget是一个DOM接口,由可以接收事件并且可以创建侦听器的对象实现
Element
,document
,window
是最常见的event target,但其他对象如XMLHttpRequest
等
构造函数
创建一个新的EventTarget
对象实例
class T extends EventTarget {constructor(name){super()this._name = name}get name(){return this._name}
}
let t = new T('zhangsan')
console.log(t.name) // zhangsan
t.addEventListener('good',function(e){// 接口CustomEvent的只读属性detail 返回在初始化事件对象时传递过来的任何类型数据this._name = e.detail
})
// CustomEvent创建一个自定义事件
let e = new CustomEvent('good',{detail:'lisi'})
t.dispatchEvent(e)
console.log(t.name) // lisi
方法
EventTarget提供了三个实例方法:
- EventTarget.addEventListener()
- EventTarget.removeEventListener()
- EventTarget.dispatchEvent()
EventTarget.addEventListener()
语法:
EventTarget.addEventListener(type, listener, useCapture)
该方法接收三个参数:
- type 事件名称,大小写敏感
- listener 监听函数
- useCapture 布尔类型,监听函数是否在d捕获阶段触发(默认为false)
我们以前给元素添加事件的时候,很多时候使用的是onEvent
的方法,我们先来看下面的例子:
<button id="btn1">click me</button>
let btn1 = document.querySelector('#btn1')
btn1.onclick = function(){console.log('first')
}
btn1.onclick = function(){console.log('second')
}
如果给同一个元素绑定了两次,则后面的会覆盖前面的.点击按钮控制台只会打印出second
.
而我们用addEventListener
来看下效果
let btn1 = document.querySelector('#btn1')
btn1.addEventListener('click',function(){console.log(1)
})
function log2(){console.log(2)
}
btn1.addEventListener('click',log2)
此时我们点击按钮,控制台会打印出1
和2
,
addEventListener的第二个参数,也可以是一个具有handleEvent
方法的对象,下面的代码打印出handleEvent
let btn1 = document.querySelector('#btn1')
btn1.addEventListener('click',{handleEvent:function(){console.log('handleEvent')}
})
addEventListener的第三个参数,也可以是一个属性配置对象.假如只希望事件监听函数只执行一次,可以设置once
属性为true
let btn1 = document.querySelector('#btn1')
btn1.addEventListener('click',{handleEvent:function(){console.log('handleEvent')}
},{once:true})
addEventListener
方法可以为一个对象添加多个不同的监听函数,若添加了多次同个监听函数也只会执行一次
let btn1 = document.querySelector('#btn1')
function log(){console.log('log')
}
btn1.addEventListener('click',() => {console.log(1)
})
btn1.addEventListener('click',() => {console.log(2)
})
btn1.addEventListener('click',log)
btn1.addEventListener('click',log)
若要向监听函数传参,则可以使用匿名函数包装监听函数
let btn1 = document.querySelector('#btn1')
function log(t){console.log(t)
}
btn1.addEventListener('click',function(){log(1)
})
EventTarget.removeEventListener()
语法:
EventTarget.removeEventListener(type, listener, useCapture)
removeEventListener
可以删除使用EventTarget.addEventListener()
方法添加的事件
let btn1 = document.querySelector('#btn1')
function log(){console.log(1)
}
function log2(){console.log(2)
}
btn1.addEventListener('click',log)
btn1.addEventListener('click',log2)
btn1.removeEventListener('click',log2)
上面的代码只会打印出1
,因为log2
事件已经被删除了
EventTarget.dispatchEvent()
语法:
target.dispatchEvent(event)
- target 触发目标
- event 要被派发的事件对象,是一个
Event
对象的实例
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
let btn1 = document.querySelector('#btn1')
let btn2 = document.querySelector('#btn2')
btn1.addEventListener('click',function(){console.log('btn1')
})
btn2.onclick = function(){btn1.dispatchEvent(new Event('click'))
}
EventTarget介绍相关推荐
- YUI事件体系之Y.EventTarget
上两篇文章YUI事件体系之Y.Do.YUI事件体系之Y.CustomEvent中,分别介绍了YUI实现AOP的Y.Do对象,以及建立自定义事件机制的Y.CustomEvent对象. 本篇文章,将要介绍 ...
- WebKit介绍及总结(二)
五 . 调用过程 知道了 WebKit 的大体结构,我们就可以深究下去,看看这个浏览器引擎具体是怎么工作的.首先介绍几个基本且重要的类: Page :打开 page.h 头文件,我们似乎看不到我们概念 ...
- XMLHttpRequest介绍
这篇文章就是参考W3C的XMLHttpRequest标准和结合一些实践验证总结而来的. Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest,但细究起来它们两个 ...
- performance介绍
performance介绍 performance是前端性能监控的API.可以获取页面中的性能相关的信息.通过window.performance可以获取performance对象. 在控制台上输入w ...
- 【JavaScript 教程】事件——EventTarget 接口
作者 | 阮一峰 事件的本质是程序各个组成部分之间的一种通信方式,也是异步编程的一种实现.DOM 支持大量的事件,本章开始介绍 DOM 的事件编程. 概述 DOM 的事件操作(监听和触发),都定义在E ...
- 简单介绍互联网领域选择与营销方法
在我看来,互联网领域的选择是"安家",而营销方法的不同则表现了"定家"的方式多种多样,只有选对了,"家"才得以"安定". ...
- 常用开源协议介绍以及开源软件规范列表
1. 开源协议介绍 GPL: General Public License,开源项目最常用的许可证,衍生代码的分发需开源并且也要遵守此协议.该协议也有很多变种,不同变种要求会略微不同. MPL: MP ...
- python:Json模块dumps、loads、dump、load介绍
20210831 https://www.cnblogs.com/bigtreei/p/10466518.html json dump dumps 区别 python:Json模块dumps.load ...
- pytorch学习笔记(九):PyTorch结构介绍
PyTorch结构介绍 对PyTorch架构的粗浅理解,不能保证完全正确,但是希望可以从更高层次上对PyTorch上有个整体把握.水平有限,如有错误,欢迎指错,谢谢! 几个重要的类型 和数值相关的 T ...
最新文章
- 我用过的,我正在用的,比较高效、好用的命令
- 搜索引擎(0xFE)--- 用机器学习再谈排序
- spring boot在运行测试类Error creating bean with name ‘serverEndpointExporter‘ defined...问题解决方案
- mysql cmd链接不上数据库情况汇总
- C# winform 禁用最小化和还原按钮(消息循环截获处理)
- 那些曾经拥有的最大快乐,都是好奇心的结果
- apache camel_Apache Camel中的短重试与长重试
- 来自阿里巴巴佛系安卓程序员的指南,专题解析
- java点击菜单项文字显示在窗体上_java点击菜单项弹出窗口怎么做啊?
- php sqlite创建表,php – 使用SQLite创建列表树
- html单选按钮选中后取消选中,jquery实现单选按钮选中与取消选中
- r语言和metawin_Meta分析系列之二_Meta分析的软件
- JavaScript打开新窗口的方法
- 十代主板改win7_微星h410主板装win7系统及bios设置教程(支持10代usb)
- 六度空间理论(小世界理论)否定了结构洞的存在
- HTML+CSS大作业
- Pyecharts概览
- 盘点中国未来最具潜力的IT培训学校前5名
- linux find typelinux find用法(转)
- 将复制文件ExtremeCopy整合到TC(Total commander)中