浏览器事件

事件

javascript和HTML交互通过事件实现。只在事件发生的时执行的监听器订阅事件。叫做观察者模式。

事件流

由于页面各部分是嵌套的，一个元素触发的事件也可以说是在其父元素发生的事件。于是规定了不同的事件流，说明事件在各个触发的页面部分触发的顺序。

事件冒泡

事件在某一个元素触发后，事件沿着DOM树向上冒泡，在经过的结点依次触发，直到document对象。

事件捕获

和事件冒泡相反，首先由document元素捕获，然后按照DOM树依次向下传播。

DOM事件流

DOM2规范的事件流分为三个阶段：事件捕获、到达目标、事件冒泡

• 捕获阶段：事件先从doucument沿DOM树向下到实际的目标。(现代浏览器会在捕获阶段在实际目标触发事件)
• 到达目标阶段：到达目标，在目标处触发事件。
• 事件冒泡阶段：事件反向传播到document。

可以看出，在整个事件流中，事件实际的目标有两个机会处理事件(捕获阶段的末尾和到达目标阶段)

事件处理程序

事件是用户在浏览器执行的某种动作。而事件处理程序是为响应事件而调用的函数，也叫事件监听器。

有很多方式可以设置事件监听器：

• HTML事件处理程序(HTML属性)
• DOM0事件处理程序(js赋值元素属性)
• DOM2事件处理程序(addEventlistener removeEventListener)
• IE事件处理程序
• 跨浏览器事件处理程序

HTML事件处理程序

特定元素支持的事件，可以以HTML属性的形式指定，属性值是JS代码。

写入这个属性之后，首先会创建一个函数封装这个属性值，函数中有一个特殊的变量，叫event，其中保存event对象。函数中的this相当于目标元素的this。
会有一些特殊的地方：

• 作用域链扩展：可以访问自己的属性。
• 表单中可以直接访问其他成员属性。通过name这个属性的值选择某个成员，name.属性名选择属性。

<form method = "post">
	<input type="text" name="username" value="">
	<input type="button" value="Echo Username" onclick="console.log(username.value)">
</form>

DOM0事件处理程序

使用JS指定事件处理程序，在JS中取得元素，然后给元素的事件属性赋值为一个函数。

• this也是相当于目标元素的this，同样也可以通过this访问元素的任何属性和方法。
• 将元素事件属性设置为null，可以去除这个事件处理程序。

DOM2事件处理程序

DOM2 event为事件处理程序的定义和移除提供了两个方法：addEventListener()和removeEventlistener()，下面主要讲这两种方法

他们接受三个参数:事件名、事件处理函数、还有一个布尔值。

• true：指在捕获阶段调用事件处理程序
• false（默认值）：在冒泡阶段调用事件处理程序

let btn = document.getElementById("myBtn");
btn.addEventListener("click",()=>{
	console.log(this.id);
},false);

优点：可以为同一个事件添加多个事件处理程序
多个事件处理程序的处理顺序为：

捕获外>捕获内>冒泡内>冒泡外

若是布尔值一样，元素也一样的话，处理顺序是处理程序的添加顺序。

例子：

<div id="out">
	<div id="in"></div>
</div>

      document.getElementById("out").addEventListener("click", function () {
        console.log("key1");
      }, true)
      document.getElementById("in").addEventListener("click", function () {
        console.log("key2");
      }, true)
      document.getElementById("out").addEventListener("click", function () {
        console.log("key3");
      }, false)
      document.getElementById("in").addEventListener("click", function () {
        console.log("key4");
      }, false)
//输出："key1" "key2" "key4" "key3"

跨浏览器方法

为了以跨浏览器兼容的方式处理事件，可以引用一个Javascript库，其中抽象了不同浏览器的差异。