事件高级1

2019-07-18 本文已影响0人特立独行的兔子_web

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 文本框内容改变时触发