Javascript高级技术（DOM详解第二弹）

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码值