你不知道的Event
event,事件对象,在我们前端开发中,event对象上的各类方法肯定是熟悉的不能在熟悉了,什么onclick
,onload
,onmouseover
,onkeydown
这些我们是经常使用的事件都属于event,但是我们强大的event远不止事件触发这些事件类型,它本身还有很多属性,来告知我们触发该事件所包含的信息,那么我们的event有哪些是非常具有实用价值,但是我们又不是辣么熟悉的呢,今天一起来扒一扒event事件对象吧。
1.event事件对象
我们在网页页面上进行操作,就会触发事件,会产生一个事件对象,作为参数传给监听函数。浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype对象。 而Event对象本身就是一个构造函数,可以用来生成新的实例。
`
var even = new Event(type, options);
复制代码
` Event构造函数接收两个参数,参数一是事件名称,参数二是个对象,这个对象表示事件对象的配置,主要包含两个属性:
- bubbles:布尔值,可选,默认为false,表示事件对象是否冒泡;
- cancelable:布尔值,可选,默认为false,表示事件是否可以被取消,即能否用Event.preventDefault()取消这个事件。
现在我们的问题来了,我们new出来的这个event实例有什么用呢,今天我们的第一个知识点,自定义事件,什么是自定义事件呢,说白了就是我们自己定义一个事件名字,然后触发这个事件行为,下面看代码:
` // 普通事件 document.onclick = function () { console.log('普通点击事件') }
// 自定义事件
var dialog = new Event('dialog', {'bubbles': false,'cancelable': false});
document.addEventListener('dialog', function () { // 监听事件var bool = confirm('我要弹出一个对话框')if (bool) {console.log('点击确定了')} else {console.log('点击取消了')}}, false);
复制代码
`
到这一步,我们的自定义事件其实已经定义完成了,但是可能大家会发现,这个自定义事件不论怎样都是执行不了的,是的,确实执行不了,因为我们还没有触发它,因为自定义事件不像普通事件,有具体的触发行为来触发事件并执行方法,自定义事件还有一个触发的方法dispatchEvent()
: `
document.dispatchEvent(dialog) // 触发自定义事件
复制代码
`
到这里,我们的自定义事件就已经可以正常运行了。其实这个自定义事件,在我们的document
文档对象这个节点上也定义了一个自定义事件的接口document.createEvent()
,document.createEvent()
方法生成一个事件对象实例,document.createEvent
方法的参数是事件类型,比如UIEvents
、MouseEvents
、MutationEvents
、HTMLEvents
,下面我们看具体代码:
`
<body><div id='div1'>自定义alert事件</div></body>var div1 = document.getElementById('div1');var alertEven = document.createEvent('HTMLEvents'); // 创建事件对象alertEven.initEvent('alert', false, false); // 初始化自定义事件名称div1.addEventListener('alert', function () { // 监听事件alert('alert一下吧')}, false)div1.dispatchEvent(alertEven) // 触发事件
复制代码
`
用这种方式我们同样可以完成一个自定义事件。这两种方式本质上并没有什么区别,它们都有同样的步骤,创建事件实例,addEventListener()
监听事件,dispatchEvent()
触发执行,而且它们都是继承制EventTarget接口。
2.事件传播
在我们日常工作当中,事件冒泡这个事件行为,肯定是有遇到的,先不说是否是经常,遇到后大家也知道使用event.stopPropagation()
来阻止冒泡,还有在使用element.addEventListener(type,fn,false)
事件监听的方式绑定事件时,它的第三个参数是个布尔值,默认false
,表示冒泡阶段触发,如果设置为true
则表示捕获阶段触发,问题来了:触发事件后的事件传播是怎样的呢?其实一个事件发生后,事件会在子元素和父元素之间传播,共三个阶段:
- 阶段1:从
window
对象传导到目标节点(上层传到底层),称为“捕获阶段”(capture phase); - 阶段2:在目标节点上触发,称为“目标阶段”(target phase);
- 阶段3:从目标节点传导回
window
对象(从底层传回上层),称为“冒泡阶段”(bubbling phase)。
那么我们怎么判断我们的事件触发后处于在哪个阶段呢,在event
实例对象上有一个属性event.eventPhase
返回一个整数常量,就是用来表示事件目前所处的阶段:
0
表示事件目前没有发生,1
表示事件目前处于捕获阶段,从父节点向目标节点传送过程(从上向下传递),2
表示事件到达目标节点,即Event.target属性指向的那个节点,3
表示事件冒泡阶段,即从目标节点向父节点传递(从下向上传递)。
有了上面的认识,我们下面看个例子: `
<span id='s1'><button id='b1'>click me</button></span>var s1 = document.getElementById('s1'), tx1 = document.getElementById('tx1');b1.addEventListener('click', eventObj, false);
b1.addEventListener('click', eventObj, true);
s1.addEventListener('click', eventObj, false);
s1.addEventListener('click', eventObj, true);function eventObj (event) {// event.stopPropagation();var el = event.currentTarget.tagName;console.log(el , event.eventPhase)
} // 则可以看见span的事件会输出1,3,button的事件会输出两次2
// 如果我们放开event.stopPropagation()的注释,则只会输出1
复制代码
`
有了这些认识,大家首先想的肯定是它的实际应用价值,有什么用呢?最最常用的,就是:事件代理, 事件代理是基于事件冒泡的特性扩展出来的开发方式,事件代理的优势是由父节点监听子节点的事件行为,并统一处理子节点触发的事件函数,这样做就减少了浏览器对事件的监听,处理程序对内存的开销,进而提高性能。简单来说就是,你去盯五个人的稍和盯一个人的稍,你会觉得哪个容易一点?道理就这么简单。而我们最常应用事件代理的地方就是分页控件。
3.常用事件属性和方法
event事件对象是个庞大的对象,下面又拥有众多的属性和方法,总有一些是我们常用的和不常用的,下面我们稍微列一下我们常用的属性和方法,供大家参考:
element.addEventListener()
:二级DOM事件绑定方法,接收三个参数:参数一:事件类型,参数二,执行的方法,参数三布尔值,什么节点捕获事件。element.removeEventListener()
:移除二级DOM事件,注意:该方法要和绑定的事件类型,绑定的元素,捕获阶段都要保持一至。element.dispatchEvent()
:方法在当前节点上触发指定自定义事件,从而触发监听函数的执行。event.eventPhase
:返回触发的事件目前所处阶段,详细请看上面的介绍。event.cancelBubble
:属性是个布尔值,设置为true
时可以取消事件冒泡。event.preventDefault()
:取消浏览器对当前事件的默认行为。event.currentTarget,event.target
:获取事件触发的目标节点元素,currentTarget
返回事件当前所在的节点,即正在执行的监听函数所绑定的那个节点,target
返回原始触发事件的那个节点,即事件最初发生的节点。event.type
:返回一个字符串,表示触发的事件类型。event.stopPropagation()
:方法阻止事件在 DOM 中继续传播,一般用于阻止事件冒泡这类行为的。event.stopImmediatePropagation()
:该方法同样可以阻止事件冒泡,不同的是在触发一次后,它会彻底注销掉传播的事件监听的函数。mouseEvent.clientX,mouseEvent.clientY
:鼠标事件触发时,返回鼠标指针相对于浏览器窗口的水平坐标和垂直坐标值。mouseEvent.button
:鼠标事件,返回一个数值,表示按下了鼠标哪个键:0表示左键,1表示滚轮,2表示右键,默认0。mouseEvent.ctrlKey
:布尔值,是否同时按下了 Ctrl 键,默认值为false。mouseEvent.shiftKey
:布尔值,是否同时按下了 Shift 键,默认值为false。mouseEvent.altKey
:布尔值,是否同时按下 Alt 键,默认值为false。mouseEvent.metaKey
:布尔值,是否同时按下 Meta 键,默认值为false。KeyboardEvent.keyCode
:键盘事件,返回按下键盘按钮的键码。KeyboardEvent.code
:键盘事件,返回按下键的code。KeyboardEvent.key
:键盘事件,返回按下键的键名,比如按下数字1,返回就是1,按下a,返回就是a。
总结
在上面我列举了个人认为常用的一些事件属性和方法,其实还有不少并未列举到,详细的大家可以去网道这里查看吧,这里是我参考的地方。今天本文呢主要目的是和大家分享一些event非常有使用,但是又不常用的一些特性,比如上面的自定义事件,和事件传播的概念,希望本文对你有所帮助,正所谓码字不易,喜欢的朋友烦请点个赞,谢谢。
你不知道的Event相关推荐
- 你不知道的Event Loop
关于Event Loop网上有很多文章都有讲解,包括我自己也有几篇文章有讲述event loop相关内容.之前写了一篇文章总结了Nodejs中event loop的原理,这里的event loop指的 ...
- Vue.js 父子组件通信的十种方式;告诉世界前端也能做 AI;你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
- 跟着 Event loop 规范理解浏览器中的异步机制
原文发自我的 GitHub blog,欢迎关注 前言 我们都知道 JavaScript 是一门单线程语言,这意味着同一事件只能执行一个任务,结束了才能去执行下一个.如果前面的任务没有执行完,后面的任务 ...
- netty系列之:Event、Handler和Pipeline
文章目录 简介 ChannelPipeline ChannelHandler ChannelHandlerContext ChannelHandler中的状态变量 异步Handler 总结 简介 上一 ...
- 不要在nodejs中阻塞event loop
文章目录 简介 event loop和worker pool event loop和worker pool中的queue 阻塞event loop event loop的时间复杂度 Event Loo ...
- [前端漫谈_4] 从 薛定谔的猫 聊到 Event loop
前言 上次我们从高阶函数聊到了 promise ,这次我们聊聊: 从 promise A+ 规范和 promise 应用来看 promise 的特性 promise 和 eventloop 的关系 从 ...
- 另5个你不知道的HTML5接口API
原文地址: 5 More HTML5 APIs You Didn't Know Existed 演示地址: 全屏API Demo 原文日期: 2012年11月08日 翻译日期: 2013年08月13日 ...
- 你不知道的前端图片处理(万字长文,建议收藏)
本文阿宝哥将按照以下的流程来介绍前端如何进行图片处理,然后穿插介绍二进制.Blob.Blob URL.Base64.Data URL.ArrayBuffer.TypedArray.DataView 和 ...
- 你不知道的 Blob
你不知道的 Blob 一.Blob 是什么 二.Blob API 简介 2.1 构造函数 2.2 属性 2.3 方法 三.Blob 使用场景 3.1 分片上传 3.2 从互联网下载数据 3.3 Blo ...
最新文章
- 基于投票方式的机器人装配姿态估计
- 全网最详细 TCP 参数讲解,不用担心没有面试机会
- input:file上传类型控制简单介绍
- SendMessage、PostMessage原理
- 禁止多媒体文件的预览功能
- matlab-游标及查询
- 必读的10篇关于GAN的论文
- 强大的独立日期选择器(date picker)插件 - Kalendae
- python random从集合中随机选择元素
- 如何利用phpize在生产环境中为php添加新的扩展php-bcmath
- python 批量爬取网页pdf_爬取网页文件并批量解析pdf
- 科学道德与学风-2021雨课堂答案-第4章
- 老路MBA商学课|第003课:沉没成本|因为来都来了,所以将错就错
- 历代iPhone主要参数对比,更新于2022年03月
- MySQL 一起重新认识下count(*) ,count(1),count(id)
- slam十四讲,ch5joinmap报错,已解决
- 抽样技术---分层随机抽样
- 【Python】羊车门问题random方法实现
- 为什么 128 KB 的魂斗罗可以实现那么长的剧情 ?
- 12枚硬币中取1枚假币的问题
热门文章
- 使用System Center Essentials 2007查看计算机的软件清单
- centos7实现Linux和Windows共享
- 通过curl访问openstack各服务
- 《android 解析WebService》
- ActiveReports 报表应用教程 (5)---解密电子商务领域首张电子发票的诞生
- 关于Windowsn 7因验证未通过被视为“非正版”出现“黑屏”的应急处理预案
- S60第三版软件批量签名助手下载
- matlab veristand,amesim Veristand matlab
- Android 实现静默安装
- 下载android 源码对应的kernel版本