JavaScript事件处理的⽅式（三种）
最近这段时间因为每天要修改⽹站，为⽹站做特效，所以看了很多的js接触事件，⾃⼰只会使⽤⼀⼩部分，有时⽤的时候也⽐较混乱，现在系统的整理了⼀下，特此分享到平台供⼤家参考下！
⼀、什么是JavaScript事件？
事件(Event)是JavaScript应⽤跳动的⼼脏，也是把所有东西粘在⼀起的胶⽔，当我们与浏览器中Web页⾯进⾏某些类型的交互时，事件就发⽣了。
事件可能是⽤户在某些内容上的点击、⿏标经过某个特定元素或按下键盘上的某些按键，事件还可能是Web浏览器中发⽣的事情，⽐如说某个Web页⾯加载完成，或者是⽤户滚动窗⼝或改变窗⼝⼤⼩。说⽩了，事件是⽂档或浏览器中发⽣的特定交互瞬间！
通过使⽤JavaScript，你可以监听特定事件的发⽣，并规定让某些事件发⽣以对这些事件做出响应。
⼆、事件流
事件流就是描述了页⾯中接受事件的顺序，在浏览器发展的初期，两⼤浏览器⼚商IE和Netscape互掐，出现了⼀个坑爹的情况，那就是他们对事件流的解释出现了两中截然相反的定义。也就是我们所熟悉的：IE的事件冒泡，Netscape的事件捕获。先来⼀张图，简要的看下结构：
1、事件冒泡
事件冒泡即事件最开始由最具体的元素（⽂档中嵌套层次最深的那个节点）接收，然后逐级向上传播⾄最不具体的节点（⽂档）。拿上⾯的图来说明，就是当点击text部分时，先由text处的元素接收，然后逐级传播⾄window，即执⾏6-7-8-9-10的过程。
2、事件捕获
事件捕获即事件最早由不太具体的节点接收，⽽最具体的节点最后接收到事件。同理，在上⾯的模型中，就是点击text部分时，先由window接收，然后逐级传播⾄text元素，即执⾏1-2-3-4-5的过程。
具体在代码中怎样表现呢？后⾯给出！
三、Javascript事件处理程序的3种⽅式
产⽣了事件，我们就要去处理他，Javascript事件处理程序主要有3种⽅式：
1、HTML事件处理程序
即我们直接在HTML代码中添加事件处理程序，如下⾯这段代码：
<input id="btn" value="按钮" type="button" onclick="showmsg();">
  <script>
  function showmsg(){
  alert("HTML添加事件处理");
  }
  </script>
从上⾯的代码中我们可以看出，事件处理是直接嵌套在元素⾥头的，这样有⼀个⽑病：就是html代码和js的耦合性太强，如果哪⼀天想要改变js中showmsg，那么不但要再js中修改，还需要到html中修改，⼀两处的修改我们能接受，但是当你的代码达到万⾏级别的时候，修改起来就需要劳民伤财了，所以，这个⽅式我们并不推荐使⽤。
2、DOM0级事件处理程序
即为指定对象添加事件处理，看下⾯的⼀段代码：
<input id="btn" value="按钮" type="button">
  <script>
    var btn= ElementById("btn");
  lick=function(){
      alert("DOM级添加事件处理");
    }
    lick=null;//如果想要删除btn的点击事件，将其置为null即可
  </script>
从上⾯的代码中，我们能看出，相对于HTML事件处理程序，DOM0级事件，html代码和js代码的耦合性已经⼤⼤降低。但是，聪明的程序员还是不太满⾜，期望寻更简便的处理⽅式，下⾯来看第三种处理⽅法。
3、DOM2级事件处理程序javascript说明
DOM2也是对特定的对象添加事件处理程序，但是主要涉及到两个⽅法，⽤于处理指定和删除事件处理程序的操作：addEventListener()和 removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和⼀个布尔值（是否在捕获阶段处理事件），看下⾯的⼀段代码：
<input id="btn" value="按钮" type="button">
  <script>
  var ElementById("btn");
  btn.addEventListener("click",showmsg,false);//这⾥我们把最后⼀个值置为false，即不在捕获阶段处理，⼀般来说冒泡处
理在各浏览器中兼容性较好
  function showmsg(){
  alert("DOM级添加事件处理程序");
  }
  veEventListener("click",showmsg,false);//如果想要把这个事件删除，只需要传⼊同样的参数即可
  </script>
这⾥我们可以看到，在添加删除事件处理的时候，最后⼀种⽅法更直接，也最简便。但是马海祥提醒⼤家需要注意的是，在删除事件处理的时候，传⼊的参数⼀定要跟之前的参数⼀致，否则删除会失效！
四、事件冒泡和事件捕获的流程与区别
说到这⾥，再给⼤家来⼀点代码来说明下事件冒泡和事件捕获的流程，同时也让⼤家能看出⼆者的区别：
<!doctype html>
  <html lang="en">
  <head>
  <meta charset="UTF-">
  <title>Document</title>
  <style>
  #p{width:px;height:px;border:px solid black;}
  #c{width:px;height:px;border:px solid red;}
  </style>
  </head>
  <body>
  <div id="p">
  i am www.mahaixiang
  <div id="c">i like www.mahaixiang</div>
  </div>
  <script>
  var p = ElementById('p');
    var c = ElementById('c');
  c.addEventListener('click', function () {
  alert('⼦节点捕获')
  }, true);
  c.addEventListener('click', function () {
  alert('⼦节点冒泡')
  }, false);
  p.addEventListener('click', function () {
  alert('⽗节点捕获')
  }, true);
  p.addEventListener('click', function () {
  alert('⽗节点冒泡')
  }, false);
  </script>
  </body>
</html>
运⾏上⾯的代码，点击⼦元素的时候，我们会发现，执⾏的先后顺序是：⽗节点捕获--⼦节点捕获--⼦节点冒泡--⽗节点冒泡。从这个例⼦中，⼤家也就明⽩了，另外，DOM2级事件规定事件包括三个阶段：
1、事件捕获阶段；
2、处于⽬标阶段；
3、事件冒泡阶段。
⾸先是捕获，然后处于⽬标阶段（即来到事件的发出位置），最后才是冒泡，不科学的是，居然⽊有DOM1级事件处理程序，⼤家注意下，别闹出笑话了！
五、补充
1. IE事件处理程序也对应有两个⽅法：attachEvent()添加事件，detachEvent()删除事件，这两个⽅法接收相同的两个参数：事件处理程序名称与事处理函数。这⾥为什么没有布尔值呢？因为ie8以及更早的版本只⽀持事件冒泡，所以最后⼀个参数默认的相当于false来处理！（⽀持IE事件处理程序的浏览器有IE，opera）。
2. 事件对象是⽤来记录⼀些事件发⽣时的相关信息的对象，但事件对象只有事件发⽣时才会产⽣，并且只能是事件处理函数内部访问，在所有事件处理函数运⾏结束后，事件对象就被销毁！
以上所述是⼩编给⼤家介绍的JavaScript事件处理的⽅式(三种)，希望对⼤家有所帮助！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。