首页 > 文章 > web前端 > 对于函数事件的总结

对于函数事件的总结

jacklove原创: 2018-05-21 15:42:341489浏览

在学习函数的时候会遇见很多的函数事件，本篇将对其进行详细的讲解。

什么是事件？

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器（或处理程序）来预定事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（JavaScript）与页面的外观（HTML与CSS）之间的松散耦合。

事件流

事件流描述的是从页面中接受事件的顺序。假设如下代码：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <div id="div1"></div></body></html>

点击div，这个点击不仅仅发生在div上，其父容器body也会被点击。那到底谁先被点击或者说事件是怎么传播的？事件流描述的就是这样一个接受事件的顺序。

IE事件流（事件冒泡）

IE事件流也叫事件冒泡，即事件开始时由最具体的元素（文档中嵌套层最深的那个节点）接收，然后逐级传播到较为不具体的节点（文档）。
以上面的代码为例，如果你点击了div元素，那么这个click事件会按如下顺序进行传播：

1.<div>
2.<body>
3.<html>
4.document

就是说，click事件首先发生在div元素上，而这个元素就是我们单击的元素，然后click事件沿DOM树向上传播，在每一级节点上都会发生，直到传播到document对象。

所有的现代浏览器都支持事件冒泡，但是有一些差别。IE5.5及更早版本中的事件冒泡会跳过html元素，从body直接到document。IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。（旧IE浏览器只支持事件冒泡）。

事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而具体的节点应该最后接收到事件，正好与事件冒泡相反，再以上面的例子为例，点击div，事件捕获的事件触发顺序如下：

1.document
2.<html>
3.<body>
4.<div>

在事件捕获过程中，document对象首先接受到click事件，然后事件沿DOM树依次向下，一直传播到事件的实际目标。

IE9，Firefox、Chrome、Safari和Opera都支持事件捕获。虽然DOM2级事件规范要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。

DOM事件流

DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截取事件提供机会。然后是实际的目标接受到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

在DOM事件流中，实际的目标在捕获阶段不会接受到事件。这意味着在捕获阶段，事件从document到html再到body就停止了。下一阶段是处于目标阶段，于是事件在div上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件传回ducument。
但实际上，IE9，Firefox、Chrome、Safari和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果就是有两个机会在目标对象上面操作事件。（IE8及更早版本不支持DOM事件流）。

事件处理程序

事件就是用户或浏览器自身执行的某种动作。像是click、load和mousover，都是事件的名字。响应某个事件的函数叫做事件处理程序（事件监听器）。事件处理程序的名字以"on"开头，因此click事件的事件处理程序就是onclick，load事件的处理程序就是onload。有下面几种为事件指定处理程序的方法。

HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML属性来指定。这个属性的值应该是能够执行的JavaScript代码，示例：

<button id="myButton" onclick="alert(&#39;Clicked&#39;)">Click Me</button>//定义了一个按钮，点击时会显示一个警告框；

在HTML中定义事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本，示例：

<button id="myButton" onclick="showMsg()">Click Me</button>  //点击按钮就会调用showMsg()函数；<script>
    function showMsg() {
      alert(&#39;Hello world!&#39;)
}</script>

通过HTML指定事件处理程序有两个缺点：1.时差问题，因为用户可能会在HTML元素一出现页面就触发相应事件，但此时事件处理程序有可能尚不具备执行条件；2.HTML与JavaScript代码紧密耦合，如果要更换事件处理程序，就要改动HTML代码和JavaScript代码。

DOM0级事件处理程序

通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。每一个元素都有自己的事件处理程序属性，这些属性通常全部小写，如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序，示例：

 var btn = document.getElementById(&#39;myButton&#39;);
  btn.onclick = function() {
    alert("Clicked")
  }

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。
也可以通过DOM0级方法删除事件处理程序，示例：

btn.onclick = null;   //删除事件处理程序；
DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id)
  }，false)

与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行的。使用DOM2级方法添加事件处理程序可以添加多个事件处理程序，示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了多个click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id);
  }，false);  var btn = document.getElementById(&#39;myButton&#39;);  ；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(&#39;hello world!&#39;);
  }，false);

这里为按钮添加了2个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。
通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同，意味着addEventListener()添加的匿名函数无法移除：

//该代码无法运行；btn.removeEventListener(&#39;click&#39;,function() {
  alert(this.id);
}，false);
//该代码工作正常；//removeEventListener()和addEventListener()使用了相同函数；var btn = document.getElementById(&#39;myButton&#39;); 
  var function handler() {
    alert(this.id);
  }
btn.addEventListener(&#39;click&#39;,handler,false);
btn.removeEventListener(&#39;click&#39;,handler,false);

本篇对js事件进行了总结，更多相关内容请关注php中文网。

对于函数事件的总结

相关文章