目录
dom.addEventListener('click',function(e){},false)
dom.attachEvent('onclick',function(e){},false)
dom.removeEventListener("click",fun,false)
dom.detachEvent("onclick",fun)
Event.stopImmediatePropagation()
事件分类
鼠标事件
click
监听鼠标左键点击事件,可以分为mousedown和mouseup两个事件,当click、mousedown、mouseup3个事件一起执行时,按先down后up最后click顺序。
mousedown
鼠标左键或右键按下去事件。
mouseup
鼠标左键或右键抬起来事件。
mousemove
鼠标移动事件。
contextmenu
鼠标右键产生菜单事件。
mouseover/mouseenter
鼠标移入事件。
mouseout/mouseleave
鼠标移出事件。注意out和over在移入子元素中会触发一次移出移入事件,而ennter和leave不会。
键盘事件
keydown
键盘按下事件。可检测所有按键(包括操作按键),不区分大小写,一次键盘按下抬起,触发顺序先down再可以press再up。
keypress
键盘按压事件,只能检测字符按键,可以根据ASCII码转换为相应字符。
keyup
键盘抬起事件。
文本事件
input
输入框内容改变事件。
change
文本框聚焦和失去焦点时对比输入框文本内容,不同则触发。
focus
文本框聚焦事件。
blur
文本框失去焦点事件
select
输入框文本的内容被选中事件。
reset
点击提交按钮事件(input中type='reset')。
submit
单机提交按钮事件(input中type='submit')。
其它事件
scroll
滚动条滚动事件。
load
浏览器已经完成页面加载事件。
unload
浏览器关闭文档事件。
error
图像加载错误事件。
resize
浏览器窗口大小改变事件。
touchstart(移动端)
触摸开始事件。
touchmove(移动端)
触摸移动事件。
touchend(移动端)
触摸结束事件。
visibilitychange
监听浏览器的页面之间切换,常用于轮询页面切换时清除定时器,切换回来再设置定时器,搭配document.hidden判断页面是切出去还是切回来。
特殊事件
readystatechange
document上定义的事件(绑定方式dom只能为document),监听document.readyState状态位改变。其中document.readyState有3种状态位:'loading'、'interactive'、'complete'。分别代表document在文档解析中(构建dom树)、文档解析完成(dom树解析完成),页面加载完成。
DOMcontentLoaded
document上定义的事件(绑定方式dom只能为document),只能通过addEventListener方式添加。表示dom树解析完。
其它事件链接
事件3种绑定方式(以点击事件为例)
dom.onclick = function(e){}
使用on加事件名,在html中的dom标签上以属性的形式直接写上οnclick='',''中传入js代码即可。代表点击该dom元素时执行onclick的js代码(句柄的绑定方式)。一个事件只能绑定一个处理函数,绑定多个事件会覆盖。清除事件为dom.οnclick=null/false/''。e为系统传入的点击事件对象(IE中会传到window.event)。
dom.addEventListener('click',function(e){},false)
第一个参数传入事件名,可以给同一个元素的一个事件绑定多个不同的函数。使用removeEventListener清除事件,参数和上面一样,但是只有相同的函数才能清除(即只有传函数名时才能清除事件)。e为系统传入的点击事件对象(IE中会传到window.event),false代表不开启事件捕获。
dom.attachEvent('onclick',function(e){},false)
第一个参数传入on加事件名,可以给同一个元素一个事件绑定相同的函数(样子相同,非相同引用),this指向window。清除使用detachEvent,参数和上面一样,但是只有相同的函数才能清除(即只有传函数名时才能清除事件)。e为系统传入的点击事件对象(IE中会传到window.event),false代表不开启事件捕获。
方法封装
function addEvent(elem, type, handle) {
if (elem.addEventListener) {
elem.addEventListener(type, handle, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, function () {
handle.call(elem);
})
} else {
elem['on' + type] = handle;
}
}
对应事件解绑3种方式(点击事件为例)
dom.οnclick=null
对应解除dom.onclick = function(e){}的绑定方式。
dom.removeEventListener("click",fun,false)
对应解除dom.addEventListener("click",fun,false)的绑定方式。
dom.detachEvent("onclick",fun)
对应解除dom.attachEvent("onclick",fun)的绑定方式。
自定义事件
https://blog.csdn.net/AIWWY/article/details/120982861
事件冒泡和捕获
事件冒泡和捕获,在一个函数上只存在一种,不能同时存在。如果在1个事件上绑定两个函数,执行顺序会先捕获后冒泡,注意自身的执行是按写的先后顺序。
事件冒泡
html上结构嵌套的元素非视觉上,事件触发会从子元素向父元素触发,自身执行不算冒泡,其父元素执行才算冒泡。
事件捕获
与冒泡相反,事件触发会从父元素向子元素触发,自身执行不算冒泡,其子元素执行才算捕获。
无冒泡事件
focus,blur,change,submit,reset,select等事件不冒泡。
阻止默认事件
- 对于第一种绑定事件的方式,也就是句柄的方式,在函数内使用return false。
- 使用e.preventDefault()或e.returnValue = false,e为系统传入的点击事件对象,兼容问题e=e||window.event。
- 使用协议限定符,例如<a href="javascript:void()"></a>
消失事件冒泡和阻止默认事件方法封装
//取消事件冒泡
function stopBubble(event) {
e = e || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
//取消默认事件
function cancelDefault(e) {
e = e || window.event;
if (e.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
事件执行顺序
事件冒泡和事件捕获的执行顺序_鱼子酱酱酱的博客-CSDN博客_事件冒泡和捕获哪个先执行
事件属性
源事件
e=e.srcElement || e.target
获得触发事件的源对象。
鼠标事件属性
e.pageX/Y
相对浏览器整个页面的x,y坐标,包括滚动条的。
e.clientX/Y
相对浏览器目前显示页面的x,y坐标,不包括滚动条。
e.screenX/Y
相对整个屏幕的x,y坐标。
e.button
区分鼠标左右键,2为右键,0为左键。
按键事件属性
e.charCode
按键的ASCII码数值。
其它事件属性
Event.bubbles 只读
一个布尔值,指示事件是否通过 DOM 冒泡。
Event.cancelable 只读
指示事件是否可取消的布尔值。
Event.composed 只读
一个布尔值,指示事件是否可以跨越 shadow DOM 和常规 DOM 之间的边界。
Event.currentTarget 只读
对事件当前注册目标的引用。这是当前计划将事件发送到的对象。这可能在通过重新定位的过程中发生了变化。
Event.defaultPrevented 只读
指示调用是否event.preventDefault()取消了事件。
Event.eventPhase 只读
指示正在处理事件流的哪个阶段。它是以下数字之一:NONE
, CAPTURING_PHASE
, AT_TARGET
, BUBBLING_PHASE
。
Event.isTrusted 只读
指示事件是由浏览器(例如,在用户单击之后)还是由脚本(例如,使用事件创建方法)发起的。
Event.target 只读
对最初将事件分派到的对象的引用。
Event.timeStamp 只读
创建事件的时间(以毫秒为单位)。根据规范,这个值是自纪元以来的时间——但实际上,浏览器的定义各不相同。此外,正在努力将其更改为DOMHighResTimeStamp替代。
Event.type 只读
标识事件类型的不区分大小写的名称。
事件方法
Event.composedPath()
返回事件的路径(将在其上调用侦听器的对象数组)。如果影子根是在其ShadowRoot.mode关闭的情况下创建的,则这不包括影子树中的节点。
Event.preventDefault()
取消事件(如果它是可取消的)。
Event.stopImmediatePropagation()
对于此特定事件,请防止调用所有其他侦听器。这包括附加到同一元素的侦听器以及附加到稍后将遍历的元素的侦听器(例如,在捕获阶段)。
Event.stopPropagation()
停止在 DOM 中进一步传播事件。