ert', 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非常有使用,但是又不常用的一些特性,比如上面的自定义事件,和事件传播的概念,希望本文对你有所帮助,正所谓码字不易,喜欢的朋友烦请点个赞,谢谢。
作者:IT男爵
链接:https://juejin.im/post/5bdffe696fb9a049b77fcf71
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。