Javascript高级技术
注册事件的几种方式
方式 | 注意事项 |
---|---|
element.onclick = function(){ console.log(“注册事件”) } --传统方式 | 有唯一性 |
element.addEventListener(‘click’,function(){ console.log(“注册事件”) }) | 不唯一,可添加多个监听器 |
element.attachEvent(‘onclick’,function(){ console.log(“注册事件”) }) | |
addEventListener事件类型需要添加引号,并且参数不需要加on,并且有兼容性问题(IE9以上)
attachEvent事件是IE9以下的版本适用的,参数需要加on
onclick 、attachEvent只能得到冒泡阶段
addEventListener的第三个参数如果是true则处于捕获阶段,如果省略或者说是false则处于冒泡阶段
删除事件的几种方式
方式 |
---|
element.onclick = function(){ console.log(“注册事件”) element.onclick = null } --传统方式 |
element.removeEventListener(‘click’,事件名称) -事件名称不需要加括号 |
element.detachEvent(‘onclick’,事件名称) -事件名称不需要加括号 |
DOM的事件流
事件对象
element.onclick = function(e){
console.log(e) //打印事件对象,IE8以上
console.log(window.event) //打印事件对象,IE6 7 8
e = e || window.event //兼容性问题处理
}
事件对象的属性和方法
操作 | 详情 |
---|---|
e.target | 返回触发事件的对象,兼容性:e.srcElement |
e.currentTarget - this | 返回绑定事件的对象,兼容性(IE 6 7 8 不认识) |
e.type | 返回事件的类型,没有on |
e.preventDefault() | 阻止默认事件的发生 |
e.returnValue | 阻止默认事件的发生,IE6 7 8 |
return false | 阻止默认事件的发生,后边代码不执行 |
e.stopPropagation() | 阻止事件的冒泡 标准 |
window.event.canceBubble = true | 阻止事件的冒泡 非标准IE6 7 8 |
事件委托
事件委托的原理:给元素的父节点绑定一个事件,从而代替给每一个子元素绑定事件(子元素不得阻止冒泡)
禁止选中和右键
// contextmenu 禁止右键出现菜单
document.addEventListener("contextmenu",function(e){
e.preventDefault()
})
// selectstart 禁止选中文字
document.addEventListener("selectstart",function(e){
e.preventDefault()
})
鼠标事件对象mouseEvent
方法 | 详情 |
---|---|
e.clientX | 获取鼠标在可视区域的X坐标 |
e.clientY | 获取鼠标在可视区域的Y坐标 |
e.pageX | 获取鼠标在整个页面区域的X坐标 |
e.pageY | 获取鼠标在整个页面区域的Y坐标 |
e.screenX | 鼠标在电脑屏幕的X坐标 |
e.screenY | 鼠标在电脑屏幕的Y坐标 |
// 鼠标事件的方法->获取鼠标在可视区域的X坐标
document.addEventListener("click",function(e){
console.log(e.clientX)
})
常用的键盘事件
键盘事件 | 触发条件 |
---|---|
onkeyup | 键盘弹起出发 |
onkeydown | 键盘按下出发能识别功能键 |
onkeypress | 键盘按下出发不能识别功能键 |
onkeydown、onkeypress同时出发,先执行down
onkeyup、onkeydown不会区别键盘字母的大小写,如需要获取严格的大小写可以使用onkeypress
键盘事件对象keyboradEvent
方法 | 详情 |
---|---|
e.keyCode | 返回按下键字幕的ASCII码值 |