# 注册事件(绑定事件)
# 注册事件概述
给元素添加事件,称为注册事件或者绑定事件
注册事件两种方式:传统方式和方法监听注册方式
# 传统注册方式
- 利用 on 开头的事件 onclick
- 特点:注册事件唯一性
- 同一个事件只能设置一个处理函数,最后注册的处理函数会覆盖前面注册的处理函数
# 方式监听注册方式
- w3c 标准 推荐方式
addEventListener()
它是一个方法- IE9 之前的 IE 不支持,可使用
attachEvent()
方法代替 - 特点:同一个元素同一个事件可以注册多个监听器
- 按照注册顺序一次执行
# addEventListener
事件监听方式
eventTarget.addEventListener(type,listener[,useCapture]) |
eventTarget.addEventListener () 方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数
- type:事件类型的字符串,比如 click,mouseover,注意这里不带 on
- listener:事件处理函数,事件发生时,会调用监听函数
- useCapture:可选参数,是一个布尔值,默认是 false,学完 DOM 事件流后,进一步学习
<button>监听事件</button> | |
<script> | |
var btn = document.querySelector('button'); | |
btn.addEventListener('click',function(){ | |
alert(1); | |
}) | |
btn.addEventListener('click',function(){ | |
alert(2); | |
}) | |
</script> |
# attachEvent 事件监听方式
eventTarget.attachEvent(eventNameWithOn,callback); |
eventTarget.attachEvent()
方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,指定的回调函数就会被执行
- eventNameWithOn:事件类型字符串,比如 onclick,onmouseover
- callback:事件处理函数,当目标触发事件时回调函数被调用
# 删除事件(解绑事件)
# 删除事件的方式
# 传统注册方式
eventTarget.onclick = null; |
# 方法监听注册方式
eventTarget.removeEventListener(type,listener[,useCapture]); | |
//移除案例 | |
<button>监听事件</button> | |
<script> | |
var btn = document.querySelector('button'); | |
btn.addEventListener('click',fn); | |
function fn() { | |
alert(1); | |
btn.removeEventListener('click',fn) | |
} | |
</script> |
# DOM 事件流
# 事件流概述
事件流描述是页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流
# DOM 事件分为三个阶段
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
# 事件流图解
# 注意
- JS 代码中只执行捕获或者冒泡其中的一个阶段
- onclick 只能得到冒泡阶段
addEventListener(type,listener,[useCapture])
第三个参数如果是 true,表示在事件捕获阶段调用事件处理程序,如果是 false(不写默认为 false),表示处于冒泡阶段- 实际开发中很少用事件捕获,我们更关注事件冒泡
- 有些事件时没有冒泡的 例如
onblur onfocus onmouseenner onmouseleave
# 事件对象
# 事件对象概述
eventTarget.onclick = function(event){} //event 就是事件对象 |
- 官方解释:event 对象代表事件的状态,比如键盘按键状态,鼠标位置,鼠标按钮型状
- 简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象是事件对象 event,它有很多方法
# 事件对象语法
<button>事件对象</button> | |
<script> | |
var btn = document.querySelector('button'); | |
btn.addEventListener('click',fn); | |
function fn(event) { | |
alert(1); | |
event = event || window.event; // 处理兼容性问题 | |
console.log(event); | |
} | |
</script> |
# 事件兼容性用法
event = event || window.event; |
# 事件对象常用属性和方法
事件对象属性方法 | 说明 |
---|---|
e.target | 返回触发事件的对象 |
e.srcElement | 返回触发事件的对象 非标准 |
e.type | 返回事件类型 比如 click |
e.cancelBubble | 该属性阻止冒泡 非标准 |
e.returnValue | 该属性阻止默认事件(默认行为)非标准 比如不让连接跳转 |
e.preventDefault() | 该方法阻止默认事件(默认行为)标准,比如不让连接跳转 |
e.stopPropogation() | 阻止冒泡 标准 |
# 阻止事件冒泡
# 阻止事件冒泡的两种方式
事件冒泡:开始时由最具体的元素接收,然后逐层向上传播到 DOM 最顶层节点
阻止事件冒泡
标准写法:利用事件对象里面的 stopPropagation()
方法
e.stopPropagation(); |
# 事件委托(代理 委派)
# 事件委托概述
事件委托也称为事件代理
# 事件委托原理
不是每个子节点单的设置事件监听器,而是事件监听器设置在父节点上,然后利用冒泡原理影响设置每个子节点
# 事件委托作用
只进行一次 DOM 操作,提高了程序的性能
# 常用鼠标事件
# 常用鼠标事件
禁止鼠标右键菜单:contextmenu 主要控制应该何时显示上下文菜单
<script> | |
document.addEventListener('contextmenu',function(e) { | |
e.preventDefault(); | |
}) | |
</script> |
禁止鼠标选中 selectstart
<script> | |
document.addEventListener('selectstart',function(e) { | |
e.preventDefault(); | |
}) | |
</script> |
mouseenter 和 mouseover 的区别
- 当鼠标移动到元素上时就会触发 mouseenter 事件
- mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发,mouseenter 智慧经过自身盒子触发
- 因为 mouseenter 不会冒泡
- 跟 mouseenter 搭配鼠标离开 mouseleave,同样不会冒泡
# 鼠标事件对象
event 对象代表事件的状态,跟事件相关的一系列信息的集合,现阶段我们主要是鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent
鼠标事件对象 | 说明 |
---|---|
e.clientX | 返回鼠标相对于浏览器窗口可视区的 x 坐标 |
e.clientY | 返回鼠标相对于浏览器窗口可视区的 y 坐标 |
e.pageX | 返回鼠标相对于文档页面的 X 坐标 |
e.pageY | 返回鼠标相对于文档页面的 Y 坐标 |
e.screenX | 返回鼠标相对于电脑屏幕的 X 坐标 |
e.screenY | 返回鼠标相对于电脑屏幕的 Y 坐标 |
# 常用键盘事件
# 常用键盘事件
键盘事件 | 触发条件 |
---|---|
onkeyup | 某个键盘按键被松开时触发 |
onkeydown | 某个键盘按下时被触发 |
onkeypress | 某个键盘按键被按下时触发 但不能识别功能键 ctrl 等 |
注意:
- 如果使用
addEventListener
不需要加 on onkeypress
和前面两个的区别,它不识别功能健,比如左右箭头,shift 等- 三个事件的执行顺序:
keydown
keypress
keyup
# 键盘事件对象
键盘事件对象属性 | 说明 |
---|---|
keyCode | 返回该健的 ASCll 值 |
注意:
- onkeydown 和 onkeyup 不区分大小写,onkeypress 区分字母大小写,在实际开发中,我们更多的使用 keydown 和 keyup,他能识别所有的健(包括识别功能健),keypress 不识别功能键,但是 keyCode 区分大小写,返回不同的 ASCll 值
- keyup 事件触发的时候,输入的按键已经被输入
- keydown 和 keypress 事件触发,是先触发事件,再输入按键