JavaScript——事件高级（包括：注册事件（绑定事件）、删除事件（解绑事件）、DOM事件流、事件对象、事件委托、经常使用鼠标事件及鼠标事件对象、经常使用键盘事件及键盘事件对象等）

注册事件

• 给元素添加事件，称为注册事件或者绑定事件。javascript

• 注册事件有两种方式：传统方式和方法监听注册方式。java

  1.传统注册方式：程序员

  （1）利用on开头的事件，好比：onclickweb

  （2）< button οnclick=“alert(‘hello’)”>< /button>浏览器

  （3）btn.onclick = function(){ }微信

  （4）特色：注册事件的惟一性。简单来收，就是同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数svg

  2.方法监听注册方式：函数

  （1）W3C标准推荐的方式性能

  （2）addEventListener()是一个方法this

  （3）IE9以前的IE不支持此方法，可以使用attachEvent()代替

  （4）特色：同一个元素同一个事件能够注册多个监听器

  （5）按注册顺序依次执行

• addEventListener事件监听方式：

//addEventListener()的语法格式以下：
eventTarget.addEventListener(type, listener[,userCapture]);

//举例：
var div = document.querySelector('div');
div.addEventListener('click',function(){
  alert('Hello');
})

• eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

• 该方法接收三个参数：

  1.type：事件类型字符串，好比：click、mouseover，注意这不要带on，而且该属性是字符串，必定要加引号。

  2.listener：事件处理函数，事件发生时，会调用该监听函数。

  3.userCapture：可选参数，是一个布尔值，默认是false。

• attachEvent()：该特性是非标准的，尽可能不要在生产环境中使用。（IE8及早期版本支持）

//attachEvent()的语法格式以下：
eventTarget.attachEvent(eventNameWithOn, callback)

• eventTarget.attachEvent()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被触发。

• 该方法接收两个参数：

  1.eventNameWithOn：事件类型字符串，好比：onclick、onmouseover，注意要带on。

  2.callback：事件处理函数，当目标触发事件时回调函数被调用。

• 注册事件兼容性解决方案（了解便可）：

function addEventListener(element, eventName, fn){
  //判断当前浏览器是否支持addEventListener方法
  if(element.addEventListener){
    element.addEventListener(eventName, fn);	//第三个参数默认是false
  }else if(element.attachEvent){
    element.attachEvent('on' + eventName, fn);
  }else{
    //至关于element.onclick = fn;
    element['on' + eventName] = fn;
  }
}

删除事件（解绑事件）

• 删除事件的方式

  1.eventTarget.onclick = null;

  2.eventTarget.removeEventListener(type, listener[,userCapture]);

  var div = document.querySelector('div');
  div.addEventListener('click',fn);	// 里面的fn不须要加小括号调用
  function fn(){
    alert('蟹黄堡');
    div.removeEventListener('click', fn);		//因为该删除事件方法中须要把元素注册的事件处理函数做
    																				//为参数，但无法直接写，因此须要把注册事件的事件处理 //函数分开单独写。
  }

  3.eventTarget.detachEvent(eventNameWithOn, callback);

  4.删除事件兼容性解决方案（了解便可）：

  function removeEventListener(element, eventName, fn){
    //判断当前浏览器是否支持removeEventListener方法
    if(element.removeEventListener){
      element.removeEventListener(eventName, fn);	//第三个参数默认是false
    }else if(element.detachEvent){
      element.detachEvent('on' + eventName, fn);
    }else{
      element['on' + eventName] = null;
    }
  }

DOM事件流

• 事件流描述的是从页面中接收事件的顺序。简单来讲，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流。

• DOM事件流分为3个阶段：

  1.捕获阶段

  2.当前目标阶段

  3.冒泡阶段

• 举例：一个div注册了点击事件，那么它的DOM事件流以下图所示：

• 事件冒泡：IE最先提出，事件开始时由最具体的元素接收，而后逐级向上传播到DOM最顶层节点到过程。
• 事件捕获：网景最先提出，由DOM最顶层节点开始，而后逐级向下传播到最具体的元素接收的过程。

注意：

1. JS代码只能处于捕获或冒泡其中的一个阶段。
2. onclic和attachEvent只能获得冒泡阶段。
3. addEventListener(type, listener[,userCapture])第三个参数若是是ture，表示在事件捕获阶段调用事件处理程序；若是是false(不写默认就是false)，表示在事件冒泡阶段调用事件处理程序。
4. 实际开发中，咱们不多使用事件捕获，而是更加关注事件冒泡。
5. 有些事件是没有冒泡的，好比：onfocus、onblur、onmouseenter、onmouseleave。
6. 事件冒泡有利有弊，可能会带来麻烦，也可能带来意想不到的好处。

事件对象

• event对象表明事件的状态，好比键盘按键的状态、鼠标的位置、鼠标按钮的状态。简单理解，事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，她有不少属性和方法。

//状况1:
eventTarget.onclick = function(event){}
//状况2:
eventTarget.addEventListener('click', function(event){})
//这个event就是事件对象，还能够写成e、evt等其余自定义名称

• 这个event是个形参，系统帮咱们设定为事件对象，不须要传递实参过去。

• 主要咱们注册事件，event对象就会被系统自动建立，并依次传递给事件监听器（事件处理函数）。

• 事件对象自己的获取存在兼容性问题：

  1.标准浏览器中是浏览器给方法传递的参数，只须要定义形参e就能够获取到。

  2.在IE6～8中，浏览器不会给方法传递参数，若是须要的话，须要到window.event中获取查找。

• 兼容性解决方法：

e = e || window.event;

• 事件对象的常见属性和方法：

• e.target和this的区别：e.target返回的是触发事件的对象（元素）；而this返回的是绑定事件的对象（元素）。
• this和currentTarget的区别：this和currentTarget都是返回绑定事件的对象（元素），可是currentTarget有兼容性问题，IE6～8不能使用。
• return false和e.preventDefault()、e.returnValue同样，都能阻止默认行为，可是return false后面的代码将不会被执行，而且只适用于传统注册事件的方式（div.onclick = fuction() (){}）。

事件委托

• 事件委托也称为事件代理，在jQuery里面称为事件委派。
• 原理：不是每一个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，而后利用冒泡原理影响设置每一个子节点。
• 做用：只须要操做一次DOM，提升了程序等性能。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<script>
  var ul = document.querySelector('ul');
	ul.addEventListener('click',function(e){
    //1.
    //alert('Hello!');
    //2.
    e.target.style.background = 'blue';
  })

经常使用的鼠标事件

• 禁止鼠标右键菜单

  contextmenu主要控制应该什么时候显示上下文菜单，主要用于程序员取消默认的上下文菜单。

  document.addEvnetListener('contextmenu',function(e){
    e.preventDafault();
  })

• 禁止鼠标选中（selectstart 开始选中）

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

• 鼠标事件对象（MouseEvent）

经常使用键盘事件

• 键盘事件

注意：
1.若是使用addEventListener不须要加on。
2.三个事件的执行顺序是：keydown——>keypress——>keyup。

• 键盘事件对象（KeyboardEvent）

注意：
1.onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写，好比按下a键或A键，keydown和keyup的keyCode都是65，而keypress则会区分，a键是97，A键是65。
2.在咱们实际开发中，更多使用的是keydown和keyup，它们能识别全部的键（包括功能键）。
3.keypress不识别功能键，可是keyCode属性能区分大小写，返回不一样的ASCII值。
4.能够利用keyCode返回的ASCII值来判断用户按下哪一个键。
5.keydown和keypress在文本框里面的特色：它们两个事件触发的时候，文字尚未落入文本框中；而keyup事件触发的时候，文本已经落入文本框里面了。

课外知识点

• focus()方法可使搜索框得到焦点。好比：input.focus()。

• 经过::before或::after建立的元素的隐藏与显示和被选元素的隐藏与显示是同步的。

微信公众号也会按期更新，以为文章写得还能够的，能够加个关注！点个赞！谢谢！