JavaScript事件用法浅析

2020-11-27 来源：乌哈旅游

本文实例讲述了JavaScript事件用法。分享给大家供大家参考，具体如下：

JavaScript通过事件与HTML交互。

事件流

事件流规定了事件的触发规则和顺序。DOM2规定了事件流包括三个阶段：事件捕获 -> 目标触发除 -> 事件冒泡。DOM2规定在事件捕获阶段不应调用事件处理程序，不过各大浏览器都不鸟它。DOM2级的事件处理程序操作函数对：addEventListener和removeEventListener的第三个参数则把这种事变成了DIY，这是一种妥协，同时让初学者认为dom的管理一片混乱。

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

更新上述js中addEventListener和removeEventListener中的第三个参数为true，对比为false时的效果，便大约能理解事件流了。

事件

事件是用户或浏览器自身执行的某和动作。

事件处理程序的添加方式

响应事件的函数称为事件处理程序。

指定事件处理程序有以下方式：

HTML特性指定。

如果某个元素支持某个事件，那么就有一个对应的HTML特性，用此特性就可以给其添加事件处理程序。

<button id="btn" onclick="alert('button click')">button</button>

DOM0级。将一个函数赋值给一个元素的事件处理程序属性：这是使用js指定事件生理程序的传统方式，至今仍被使用。

var btn = document.getElementById("btn");
btn.onmouseover = function(){
 this.innerHTML="按钮";
};

DOM2级。

通过addEventListener和removeEventListener来管理元素的事件。所有DOM节点都包含这两个方法，它们都包含三个参数，以add为例：

addEventListener(事件名，事件处理函数，是否在事件捕获时执行事件处理程序)

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},true);
//注意下面的remove，它完全没有用，这两个匿名函数实际上是不同的对象
btn.removeEventListener("click",function(){alert(this.id);},true);

在上面代码中，指向同一对象的引用被认为是相同的，同样的申明生成的是两个外表相同但是存储在堆上两个不同位置的不同对象。

事件对象

DOM上的事件被触发时，会生成一个事件对象event。无论指定了什么事件处理程序都会传入event对象：准确的地说，event对象是在调用执行函数的执行环境中创建的，根据作用域链的定义，可知它是如何传入的。

var btn = document.getElementById("btn");
var btnClick = function(){
 alert(event.type);
}
btn.onclick = btnClick;//点击btn按钮时，弹出msg:click

event包含丰富的成员，用来控制访问事件，下面是所有事件的共有成员。

target：触发事件的动作直接作用的目标元素。
currentTarget：等于this，事件处理程序作用于的元素。
eventPhase：调用事件处理程序时，所处的事件流中的阶段。1，2，3 三个值分别对应事件流三阶段。
type：事件类型。单击事件对应 String: "click"。

事件类型

事件类型分为以下几类：

UI事件。
焦点事件。
鼠标与滚轮事件。
键盘与文本事件。
复合事件。
变动事件。
HTML5事件。
设备事件。
触摸与手势事件。

显示全文

全部栏目

JavaScript事件用法浅析