1 事件冒泡
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。当某个dom上的事件被触发，那么其父级元素的该事件也会被逐级触发。
例子1：
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.onclick = function(){console.log(‘我是内层div’);};
div1.onclick = function(){console.log(‘我是外外层div’);};
<div id="div1">
<div id="div2"></div>
</div>
例子：将内层div通过绝对定位放置于div3内
事件冒泡的原理图：
309bb95b0858e544b38a92c9cc1ce5a2.png
以上类似一个dom片段
<body>
<div>
<div>
<div class=”content”>666</div>
</div>
</div>
</body>
每个dom对象都是嵌套的，形成一个金字塔形结构，且每个对象都有诸如onclick属性
如下图
ef7daf45d2c8f0438343bb39f139c581.png
根据浏览器厂商自定规则，当事件触发时会(比如onclick)收集个层级对象上的onclick函数体与参数形成一个数组
[{fn:function(){
},org},
{fn:function(){
},org},
null,
{fn:function(){
},org},
null,null]
我们假设它叫eventArr
然后遍历eventArr数组按顺序调用
这就是所谓的事件冒泡，据上可知，并不会将dom节点上的事件函数‘传递’给父级元素，只是会按顺序调用父级对应的事件函数，如果未绑定，那么就会略过
2事件捕获：
将例子1中的事件绑定方式变为
dom.addEventListener('click',function(){
console.log('我是内层div')
},true);
注意第三个参数必须为true
可见其执行顺序就是从外到内 相当于按eventArr的正序执行个事件函数，而事件冒泡是将eventArr倒叙排列后再执行
3 DOM事件流：
事件捕获阶段、处于目标阶段、事件冒泡阶段
事件捕获从外到内收集事件函数形成eventArr 然后执行
将eventArr倒叙排列后 执行，第一个元素的执行即为处于目标阶段，之后的执行过程叫事件冒泡，那么我们使用dom.onclick时如何实现事件捕获呢？
4 事件等级：
DOM0级事件时 微软（IE）按事件冒泡处理 网景（Netscape）按事件捕获
DOM1级 只存在于理论上
//DOM2级
dom.addEventListener('click',function(){//使用事件监听器进行事件绑定
console.log('我是内层div')
},true);//第三个参数默认false（冒泡）传true的话（捕获）
DOM2级事件与DOM0事件的不同点:
前者靠事件监听器绑定事件，可多次绑定同一类型事件
后者直接绑定，多次绑定会覆盖
dom.addEventListener函数的第一个参数为事件名（注意不加on），第二个参数为事件函数，第三个参数为冒泡与否
移除事件时后者置空，前者使用
removeEventListener(type,fn,boolean)
boolean必须与绑定时一致
IE浏览器的事件监听器
attachEvent(‘onclick’,fn)
移除事件时采用
detachEvent(‘onclick’,fn)
那么一个跨浏览器的事件绑定移除函数应该这样书写
addEvent(elment,type,fn){
if(elment.addEventListener){
}else if(elment.attachEvent){
}else{
}
}
removeEvent(element,type,fn){
if(elment.removeEventListener){
}else if(elment.detachEvent){
}else{
}
}
5事件对象：
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用DOM0级或是DOM2级，都会传入event对象。event对象包含一些特定的属性和方法，方便我们调用
- target始终指向触发事件的dom节点
- currentTarget指向事件函数绑定的dom节点
在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件触发实际目标。如果直接将事件处理程序指定给了目标元素，则this、currentTarget、和target包含相同的值。
- IE的事件对象：window.event;
- 其他的：event
- 目标dom IE:event.srcElement; 其他:event.target
- target属性 触发事件的dom对象
- srcElement属性 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用
- clientX属性 返回当事件被触发时，鼠标指针的水平坐标
- clientY属性 返回当事件被触发时，鼠标指针的垂直坐标
- pageX属性 与clientX同值
- pageY属性 与clientY同值
建议使用client，兼容性好点
d7abf29a81fca9008f98f4204b8bc33c.png
- offsetX距离元素左边框 IE的x相当于此值
- clientX距离浏览器可视区域 其他浏览器的x相当于此值
-
screenX距离屏幕左侧
e7adf76b5303aca498ef2794f26f7c92.png
6 事件类型
-
焦点事件：
1） focus 元素获得焦点（不会冒泡）
2 ） blur 元素失去焦点（不会冒泡） -
鼠标与滑轮事件：
mouseenter 指针移到有事件监听的元素内
mouseover 该事件冒泡
mousemove 指针在元素内移动时持续触发
mousedown 在元素上按下任意鼠标按钮
mouseup 在元素上释放任意鼠标按键
click 在元素上按下并释放任意鼠标按键
dblclick 在元素上双击鼠标按钮
contextmenu 右键点击 (右键菜单显示前).
mousewheel 滚轮向任意方向滚动
IE、chrome监听的是wheelDelta,向下滚动其值为-120； 向上滚动其值为120
wheel FF监听的是detail,向下滚动其值为3；向上滚动其值 为-3
mouseleave 指针移出元素范围外（不冒泡）
mouseout 指针移出元素，或者移到它的子元素上 -
鼠标按键事件会返回button值
0 规定鼠标左键
1 规定鼠标中键
2 规定鼠标右键 -
键盘事件
-
键盘事件包括keydown(按下键盘时触发该事件)，keypress(只要按下的键并非Ctrl, Alt, Shift，就接着触发keypress事件), keyup(松开键盘时触发该事件)
-
altKey，ctrlKey，shiftKey: 返回一个布尔值，表示是否按下对应的键
-
key: 返回一个字符串，表示按下的键名。如果同时按下一个控制键和一个符号键，则返回符号键的键名
-
keyCode: 返回按键的 ASCII 码，注意: 这里是不区分大小写的
- 文本事件
input 文本框输入字符时触发
change 文本框内容改变时触发
网友评论