JavaScript中事件绑定_登录绑定s事件-CSDN博客

本文链接：https://blog.csdn.net/sonlylee/article/details/77018565

HTML把结构搭建了起来，CSS使结构变得更好看了，JavaScript当做了行为交互的必需品，然而，在这必需品中，最主要的应该就是交互，交互的就是事件了。

浏览器的事件系统相对比较复杂，尽管所有主要浏览器已经实现了"DOM2级事件"，但这个规范本身并没有涵盖所有的事件类型。浏览器对象模型（BOM）也支持一些事件，这些事件与文档对象模型（DOM）事件之间的关系并不十分清晰，因为BOM事件长期没有规范可以遵循。但是随着DOM3的出现，增强的DOM事件API变得更加的繁琐。

事件流

事件流是从页面中接收事件的顺序。IE事件流是事件冒泡。

事件冒泡：即事件开始时有具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播到较为不具体的节点（文档）。

事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点应该最后接受到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
  <title>点击</title>
</head>
<body>
  <div id="myDiv">点击</div>
</body>
</html>

下面的图就是捕获和冒泡的过程：

从该图就可以看出捕获阶段：document->Element html->Element body->Element div，到这里已经就是具体的元素了，就是处于处理阶段，之后就是冒泡阶段，Element div->Element body->Element html->Document。

事件处理程序

DOM0级事件处理程序：

通过JavaScript传统的事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序事件。

如下所示：

var btn = document.getElementById("myBtn");
  btn.onclick = function(){
    alert("Clicked");
  }

DOM2级事件处理程序：

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。

所有的DOM节点中都包含这两个方法，并且他们都接受三个参数：事件名、处理的事件程序的函数、一个布尔值。最后一个布尔值如果是true，表示在捕获阶段用事件处理程序；如果是false，表示冒泡阶段调用事件处理程序。

接下来解释了绑定事件和移除事件：

var btn = document.getElementById("myBtn");
  btn.addEventListener("click",function(){
     alert(this.id);
  },false);
  btn.addEventListener("click",function(){
     alert("Hello world");
  },false);
  btn.removeEventListener("click",function(){
     alert("Hello world");
  },false);

通过addEventListener()可以为一个元素同时添加两个事件。

IE事件处理程序

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称、事件处理程序函数。由于IE8及更早版本只支持事件冒泡，所以attachEvent()添加的事件处理程序都会被添加到冒泡程序。

  btn.attachEvent("click",function(){
     alert("Hello world");
  },false);
  btn.detachEvent("click",function(){
     alert("Hello world");
  },false);

在DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域，里面的this可能指向window。

合并：

    function fn1(){
        alert(this);
    }
    function fn2(){
        alert(2);
    }
        
    function bind(obj,evname,fn){
        if(obj.addEventListener){
          obj.addEventListener(evname,fn,false);
        }else{
          obj.attachEvent('on'+evname,function(){
             fn.call(obj);
          });
        }
     }
    bind(document,'click',fn1);
    bind(document,'click',fn2);

这个就是两者的合并版。