JS事件高级

JS事件高级

目标

• 能够写出元素注册事件的两种方式
• 能够说出删除事件的两种方式
• 能够说出DOM事件流的三个阶段
• 能够利用事件对象完成跟随鼠标案例
• 能够封装阻止冒泡的兼容性函数
• 能够说出事件委托的原理
• 能够说出常用鼠标键盘事件

注册事件（绑定事件）

给元素添加事件，成为注册事件或绑定事件： 传统方式、 方法监听注册方式

传统方式

• 利用on开头的事件 onclick
• 在标签上注册事件 <button onclick="alert('hi')"></button>
• btn.onclick = function( ){}
• 特点：注册事件的唯一性
• 同一元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的函数

方法监听注册方式

• W3C标准 推荐方式

• addEventListener() 它是一个方法

• IE9之前不支持 可用 attachEvent() 代替

• 同一个元素 同一个事件 可以添加多个侦听器

  var son = document.querySelector('.son');
  son.addEventListener('click',function(){
    alter('儿子盒子');
  });
  var father = document.querySelector('.father');
  father.addEventListener('click',function(){
      alter('父亲盒子');
  });//默认事件冒泡
  document.addEventListener('click',function(){
      alter('document');
  })
  

  此时先弹出儿子，后弹出父亲，再弹出document, 因为事件冒泡从里向外，即使此时只点击了子盒子

删除事件（解绑事件)

• removeEventListener()
• detachEvent()

传统方式

element.onclick = null;

方法监听注册方式

element.removeEventListener()

IE9: element.detachEvent('onclick',fn)

DOM事件流

事件流描述的从页面接收事件的顺序

事件发生时会有元素节点之间按照特定的顺序传播，这个传播过程就叫DOM事件流

事件三个阶段

1. 捕获阶段 （事件捕获：网景提出
2. 当前目标阶段
3. 冒泡阶段 （事件冒泡： IE最早提出

注意：

• JS代码只能执行捕获或冒泡其中的一个阶段
• onclick 和 attahEvent 只能得到冒泡阶段
• addEventListener( )的第三个参数默认为false即默认为事件冒泡, true：事件捕获 ； false: 事件冒泡
• 实际开发中很少用到事件捕获，我们更该关注事件冒泡
• 有些事件是没有冒泡的：onblur onfocus onmouseenter onmouseleave

事件对象

• 事件对象：当客户触发一个事件时，浏览器的所有详细信息都存在event对象上，我们把它叫事件对象
• event对象代表事件的状态：键盘按键的状态 鼠标的位置状态 鼠标按钮的状态
• 事件对象只有有了事件才会有，它是系统自动生成的，是属性和方法数据集合，事件对象写在侦听函数的小括号里
• 存在兼容性问题 IE6.7.8 window.event 解决： e = e||window.event;

事件对象常见属性方法

事件对象属性方法	说明
e.target	返回触发事件的对象 标准
e.srcElement	返回触发事件的对象 非标准 IE6.7.8
e.type	返回事件类型 如：click mouseover 不带on
e.cancelBubble	阻止事件冒泡 非标准 IE6.7.8
e.stopPropagation()	阻止事件冒泡 标准 方法
e.returnValue	阻止默认事件(默认行为)
e.prenventDefault()	阻止默认事件 (默认行为) 标准

阻止事件冒泡

两种方式：

​ w3c标准：e.stopPropagation()

​ ie6.7.8: e.cancelBubble = true;

阻止事件冒泡兼容性解决方案

if(e && e.stopPropagation){
    e.stopPropagation();
}else{
    window.event.cancelBubble = true;
}

事件委托

事件委托也称事件代理，在jquery里面称为事件委派

事件委托原理（重点，面试）

不是每个子节点单独设置事件监听器，而是将事件监听器设置其父节点上，然后利用冒泡原理影响设置每一个子节点

常用鼠标事件

1. 禁止鼠标右键菜单 contextmenu

   document.addEventListener('contextmenu',function(e){
       e.preventDefault();
   });
   

2. 禁止选中文字 selectstart

   document.addEventListener('selectstart',function(e){
       e.preventDefault();
   });
   

鼠标事件对象	说明
e.clientX	返回鼠标相对 浏览器窗口 的X坐标
e.clientY	返回鼠标相对 浏览器窗口 的Y坐标
e.pageX	返回鼠标相对 文档页面 的Y坐标
e.pageY	返回鼠标相对 文档页面 的Y坐标
e.screenX	返回鼠标相对 电脑屏幕 的Y坐标
e.screenY	返回鼠标相对 电脑屏幕 的Y坐标

常用键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时
onkeydown	某个键盘按键被按下时
onkeypress	某个键盘按键被按下时 但不识别Ctrl shift

注意：使用addEventListener不加’on’, 三事件的同时注册的执行顺序为：onkey