持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情
事件
传统注册方式
<button onclick="alert('hi')"></button>
监听注册方式
addEventListener()
ie9之前的不支持,可使用attachEvent()代替
特点: 同一个元素同一个事件可以注册多个监听器,按注册顺序执行
btn.addEventListener('click', function () {
})
//ie9之前
btn.attachEvent('onclick', function() {})
事件监听兼容方案
删除事件(解绑事件)
1.传统事件删除事件
div.onclick = null;
2.removeEventListener删除事件
div.addEventListener('click',fn) //fn 不需要调用加小括号
function fn() {
div.removeEventListener('click', fn);
}
3.detachEvent
div.attachEvent('onclick', fn1);
function fn1() {
div.detachEvent('onclick', fn1);
}
DOM事件流
事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流
经历3个阶段:1.捕获阶段 2.当前目标阶段 3.冒泡阶段
事件冒泡与捕获
addEventListener(type, Listener, [useCapture]);
第三个参数如果是true,表示在事件捕获阶段调用事件处理程序
如果是false,(不写默认就是false),表示在事件冒泡阶段调用事件处理程序
事件对象
div.onclick = function(e) {
//事件对象
e = e || window.event;
}
属性和方法
e.target //返回触发事件的对象 标准
e.srcElement //返回触发事件的对象 非标准 ie6-8使用
e.type //返回事件的类型 比如click mouseover
e.cancelBubble //该属性阻止冒泡,非标准 ie6-8使用
event.cancaelBubble = true;
e.returnValue //该属性阻止默认事件(默认行为) 非标准ie6-8使用,比如不让链接跳转
e.preventDefault() //该方法阻止默认事件(默认行为) 标准 比如不让链接跳转
e.stopPropagation //阻止冒泡标准
阻止冒泡兼容处理
e.target和this的区别
this是事件绑定的元素(绑定这个事件处理函数的元素)
e.target是事件触发的元素
禁用右键菜单, 禁止选中文字
//contextmenu,禁用右键菜单
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
})
//禁止选中文字 selectstart
document.addeventListener('selectstart', function (e) {
e.preventDefault();
})
鼠标事件对象
e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY
e.pageX 返回鼠标相对于文档页面的X坐标 IE9+ 支持
e.pageY
e.screenX 返回鼠标相对于电脑屏幕的x坐标
e.screenY
键盘事件
onkeyup //键盘按键松开
onkeydown //键盘被按下
onkeypress //键盘被按下触发 --不识别功能键入ctrl shift
执行顺序 keydown -- keypress -- keyup
e.keyCode //返回按键的ASCII值
