事件高级1

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通过绝对定位放置于div3内

事件冒泡的原理图：

309bb95b0858e544b38a92c9cc1ce5a2.png

以上类似一个dom片段

  

    

      
666
    
  

每个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. 焦点事件：
   1） focus 元素获得焦点（不会冒泡）
   2 ） blur 元素失去焦点（不会冒泡）

2. 鼠标与滑轮事件：
   mouseenter 指针移到有事件监听的元素内
   mouseover 该事件冒泡
   mousemove 指针在元素内移动时持续触发
   mousedown 在元素上按下任意鼠标按钮
   mouseup 在元素上释放任意鼠标按键
   click 在元素上按下并释放任意鼠标按键
   dblclick 在元素上双击鼠标按钮
   contextmenu 右键点击 (右键菜单显示前).
   mousewheel 滚轮向任意方向滚动
   IE、chrome监听的是wheelDelta,向下滚动其值为-120； 向上滚动其值为120
   wheel FF监听的是detail,向下滚动其值为3；向上滚动其值 为-3
   mouseleave 指针移出元素范围外（不冒泡）
   mouseout 指针移出元素，或者移到它的子元素上

3. 鼠标按键事件会返回button值
   0 规定鼠标左键
   1 规定鼠标中键
   2 规定鼠标右键

4. 键盘事件

• 键盘事件包括keydown(按下键盘时触发该事件)，keypress(只要按下的键并非Ctrl, Alt, Shift，就接着触发keypress事件), keyup(松开键盘时触发该事件)

• altKey，ctrlKey，shiftKey: 返回一个布尔值，表示是否按下对应的键

• key: 返回一个字符串，表示按下的键名。如果同时按下一个控制键和一个符号键，则返回符号键的键名

• keyCode: 返回按键的 ASCII 码，注意: 这里是不区分大小写的

5. 文本事件
   input 文本框输入字符时触发
   change 文本框内容改变时触发