事件高级
1. 注册事件(绑定事件)
1.1 注册事件概述
给元素添加事件,称为注册事件或者绑定事件。
注册事件有两种方式:传统方式和方法监听方式
1. 传统注册方式
- 利用on开头的事件,如onclick
- <button onclick = “alert(‘hi~’)”><button>
- btn.onclick = function() {}
- 特点:注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数会覆盖前面注册的处理函数
2. 方法监听注册方式
- W3C标准 推荐方式
- addEventListener() 它是一个方法
- IE9之前的IE不支持,可使用attachEvent()代替
- 同一个元素,同一个事件可以添加多个监听器(监听处理函数)
1.2 addEventListener 事件监听方式
eventTarget.addeventListener(type, listener,[useCapture])
eventTarget.addeventListener() 方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定事件时,就会执行事件处理函数
该方法接受三个参数
- type:事件类型 字符串,比如click、mouseover, 注意这里不带on
- listener:事件处理函数,事件发生时,会调用该监听函数
- useCapture:可选参数,是一个布尔值,默认是false。
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
var btns = document.querySelectorAll('button');
//1. 传统方式注册事件
btns[0].onclick = function() {
alert('hi');
}
btns[0].onclick = function() {
alert('hello'); // 这个事件会覆盖前面那个事件
}
// 2. 事件监听注册事件
//(1) addEventListener里面的事件类型是字符串要加引号,不加on
//(2) 同一个元素 同一个事件可以添加多个监听器(事件处理函数)
btns[1].addEventListener('click',function() {
alert(22);
})
btns[1].addEventListener('click',function() {
alert(33); // 点击按钮后会先弹出22,再弹出33
})
</script>
1.3 attachEvent 事件监听方式
eventTarget.attachEvent(eventNameWithOn, callback)
attachEvent()方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,指定的回调函数就会被执行。
该方法接受两个参数:
- eventNameWithOn:事件类型字符串,如onclick、onmouseover, 注意这里要带on
- callback:事件处理函数,当目标触发事件时回调函数被调用
注意:只有ie
1.4 注册事件兼容性解决方案(了解)
function addEventListener(element, eventName, fn) {
//判断当前浏览器是否支持addEventLisener方法
if(element.addEventListener) {
element.addEventListener(eventName, fn);//第三个参数默认是false
}else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
//相当于element.onclick = fn;
element['on' + eventName] = fn;
}
}
2. 删除事件(解绑事件)
2.1 删除事件的方式
1. 传统注册方式
eventTarget.onclick = null;
2. 方法监听注册方式
(1) eventTarget.removeEventListener(type,listener,useCapture)
(2) eventTarget.detachEvent(eventNameWithOn, callback)
btn1.addEventListener('click', fn)//里面的fn不需要加小括号
//如果想要移除函数,则不能使用匿名函数,需单独注册
function fn() {
alert(22);
btn1.removeEventListener('click',fn);
}
btn2.attachEvent('onclick',fn1);
function fn1() {
alert(33);
btn2.detachEvent('onclick',fn1);
}
3. DOM事件流
事件流描述的是从页面中接受时间的顺序。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程叫做DOM事件流
DOM事件流分为3个阶段:
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
- 事件冒泡:IE最早提出,事件开始由最具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程
- 事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到具体的元素接收的过程。
帮助理解:
向水里扔石头,下沉过程是事件捕获阶段,到达目标点之后会产生泡泡,泡泡浮到水面的过程,相当于冒泡阶段
注意:
- JS代码中只能执行捕获或者冒泡其中一个阶段
- onclick和attachEvent 只能得到冒泡阶段。
- addEventListener(type, listener,[useCapture]),第三个参数如果是true,表示事件捕获阶段调用事件处理程序;如果是false(不写默认就是false),表示在事件冒泡阶段调用事件处理程序。
- 实际开发中很少使用事件捕获,更关注事件冒泡
- 有些事件是没有冒泡的,比如onclur 、onfocus、onmouseenter、onmouseleave
4.事件对象
4.1 什么是事件对象
eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event) {})
// 1.event 就是一个事件对象 当形参来看
// 2. 事件对象只有有了事件才会存在,是系统自动创建的,不需要自己传递参数
// 3. 事件对象是事件相关数据的集合,比如鼠标点击事件,里面就包含了鼠标坐标等信息;键盘事件,可以判断用户按下了哪个键。
官方解释:event对象代表事件的状态,比如按键的状态、鼠标的位置、鼠标按钮的状态等
简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。
4.2 事件对象的使用语法
eventTarget.onclick = function(event) {
// 这个事件对象可以自己命名,比如 evt e
}
eventTarget.addEventListener('click', function() {
})
这个event是个形参,系统设定为事件对象,不需要传递实参过去
注册时间时,event对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)
4.3 事件对象的兼容性方案
- 事件对象本身的获取存在兼容性问题:
- 在IE6~8 z中,浏览器不会给方法传递参数,如果需要的话,通过window.event获取查找
解决:
e = e || window.event ;
eventTarget.onclick = function(event) {
//console.log(event);//一般浏览器可以获取,ie678会显示undefined
//ie678 获取事件对象通过 window.event
// console.log(window.event);
//兼容性做法
e = e || window.event ;
console.log(e);
}
4.4 事件对象常用属性和方法
// 1. e.target获得触发事件的元素
div.addEventListener('click', function(e) {
// e.target 返回触发事件的对象(元素) this返回绑定事件的对象
console.log(e.target);//div
console.log(this); // div
})
ul.addEventListener('click', function(e) {
//点击ul里面的li
console.log(this) // ul
console.log(e.target); // li 因为事件冒泡 所以点击li会触发它上层的ul
})
// 解决兼容性问题 因为IE6~8是用srcElement获取触发事件的元素
div.onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
console.log(e.target);
}
// 2. 返回事件类型
div.addEventListener('click', fn);
div.addEventListerer('mouseover' fn);
function fn(e) {
console.log(e.type);
}
// 3. 阻止默认行为(事件) 让链接不跳转 提交按钮不提交
// e.preventDefault() 方法(标准)
a.addEventListener('click', function(e) {
e.preventDefault();//dom标准写法
})
//低版本浏览器( ie6~8) e.returnValue 属性(非标准)
a.onclick = function(e) {
e.returnValue;
}
5. 阻止事件冒泡
5.1 阻止事件冒泡的两种方式
事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层节点。
事件冒泡本身的特性,会带来坏处,也会带来好处,需要灵活掌握。
阻止事件冒泡
-
标准写法:利用事件对象里面的stopPropagation() 方法
son.addEventListener('click', function(e) { alert('son'); e.stopPropagation();// 阻止冒泡 })
-
非标准写法:IE6~8 利用事件对象cancleBubble属性阻止冒泡
6. 事件委托
事件冒泡带来的好处:
案例:点击li 弹出对话框,以前需要给每个li注册事件,访问DOM的次数就会增多,会延长整个页面的交互就绪时间。
- 事件委托
事件委托也称事件代理,在jQuery里面称为事件委派。
- 事件委托的原理
不是给每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
以上案例:给ul注册点击事件,然后利用事件对象的target来找到当前点击的 li ,因为点击 li, 事件会冒泡到 ul 上,ul 注册事件,就会触发事件监听器
- 事件委托的作用
我们只操作了一次DOM,提高了程序的性能。
7.常用的鼠标事件
7.1 常用的鼠标事件
- onclick:鼠标点击左键触发
- onmouseover:鼠标经过触发
- onmouseout:鼠标离开触发
- onfocus:获得鼠标焦点触发
- onblur:失去鼠标焦点触发
- onmousemove:鼠标移动触发
- onmouseup:鼠标弹起触发
- onmousedown:鼠标按下触发
- 禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();//阻止默认行为
})
- 禁止选中文字
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
<body>
我是一段不愿意分享的文字
<script>
// 1. contextmenu 禁用右键
document.addEventListener('contextmenu', function(e) {
e.preventDefault();//阻止默认行为, 此时右键不可用,无法使用右键的复制选项,但是可以使用Ctrl+C
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();//没办法选中文字 自然就复制不了了
})
</script>
</body>
7.2 鼠标事件对象
event对象代表事件的状态,跟事件相关的一系列信息的集合。本文章主要使用鼠标事件对象 MouseEvent和键盘事件对象KeyboardEvent。
8.常用的键盘事件
8.1常用键盘事件
- onkeyup:某个键盘按键被松开时触发
- onkeydown:某个键盘按键被按下时触发
- onkeypress:某个键盘按键被按下时触发(不识别功能键 ctrl shift等)
document.addEventListener('keyup', function() {
console.log('我被松开了!');
})
注意:
- 如果使用addEventListener不需要加on
- onkeypress和前面两个的区别是,不识别功能键。
- 三个事件的执行顺序是:keydown–keypress–keyup
8.2 键盘事件对象
keyCode:返回该键的ASCII值
// 键盘事件对象中keyCode属性可以得到相应键的ASCII值
// 1. keyup 和 keydown 事件不区分字母大小写 a A得到的都是65
// 2. keypress 事件区分字母大小写 a 得到97, A 得到的都是65
document.addEventListener('keyup', function(e) {
console.log(e.keyCode);// 按下A 打印65
})