事件就是指为DOM指定的动作,包括三个部分。
事件源:比如按钮,为了获取事件源。
事件类型:比如onclick,为了注册事件(绑定事件)。
事件处理程序:为了添加事件运行的核心程序。
本次分享DOM关于事件的常见知识点
一、注册事件(绑定):
1. 传统方式:onclick()这种方式无法绑定多个,后边注册的会覆盖前边注册的。
2. 监听方式:addEventlistener(),可以按顺序执行
使用方法是:
addEventlistener(type,listener[ ,useCapture])
type:事件类型字符串,比如click,mouseover等,不带on
listener:事件处理函数,事件发生时调用
useCapture:默认是false
btn.addEventlistener('click',function(){alert("11");})
3. IE9之前的监听:attachEvent()
使用方法是:
attachEvent(eventNameWithon,callback)
此时需要使用onclick,但也是字符串
btn.attachEvent('onclick',function(){XXX})
二、删除事件(解绑):
1. 传统方式:btn.onclick = null
2. 监听方式:
btn.addEventlistener('click',fn)
function fn(){
alert();
btn.removeEventlistener('click',fn);
}
3. IE9之前的监听:
attach方法类似,换成detachEvent即可
三、DOM事件流:
捕获阶段(从上往下传),目标阶段,冒泡阶段(从下往上传)
四、事件对象:
function(event)这个event就是事件对象,当作形参
事件对象是系统创建的,不需要人为传递参数
事件对象是事件相关数据的集合,比如鼠标事件Mouseevent中的鼠标坐标啊,键盘事件中的键盘按下啊
一般可以简写成function(e)
IE678使用window.event来获取
常见的事件对象的属性和方法:
e.target 返回事件触发的对象(IE678使用的是e.srcElement),this返回的是事件绑定的对象,两者不一样
e.type 返回事件的类型
e.preventDefault()阻止默认行为,如链接不跳转或者提交按钮不提交(IE678使用returnValue,更简单的方式是直接return false,仅限于.onclick传统方式,而且return之后的代码都不执行)
e.stopPropagation()阻止冒泡阶段(IE678使用的是e.cancelBubble = true)
事件委托:
原理:在父节点添加事件监听器,然后利用冒泡影响子节点,可以提高效率
鼠标事件对象:MouseEvent
e.clientX,e.clientY,以可视区为基准,下拉无效
e.pageX,e.pageY,以整个页面为基准,下拉有效
e.screenX,e.screenY,以实际屏幕为基准
mouseenter和mouseover的区别
mouseover经过子盒子也会触发,也就是会冒泡
mouseenter不会冒泡
键盘事件对象:
keyup抬起触发,keydown按下触发(优先级比keypress高),keypress按下触发但不能识别功能键
e.keyCode:按下键的ASCII码值,keypress可以区分字母的大小写