js事件机制解析

作者: bpup | 来源:发表于2017-07-13 11:05 被阅读0次

事件

JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。

事件是某个行为或者触发，比如点击、鼠标移动
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当用户触发按键时...

事件流

事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？目前主要有三种模型

1.IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素

2.Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反

3.DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

这种分歧在日常生活中也很常见，举个例子，某个地方出了抢劫事件，我们有多种处理方式

村里先发现，报告给乡里，乡里报告到县城，县城报告给市里。。。。
市里先知道这事儿，然后交代给县城怎么处理，县城交给到乡里处理，乡里交给村里处理
Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡

如有以下html

<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Test Page</title>
</head>
<body>
    <div>Click Here</div>
</body>
</html>


事件冒泡模型	事件捕获模型	DOM事件流

事件处理程序

我们也称之为事件侦听器（listener），事件就是用户或浏览器自身执行的某种动作。比如click、load、mouseover等，都是事件类型（俗称事件名称），而响应某个事件的方法就叫做事件处理程序或者事件监听器。

HTML内联方式

     <input type="button" value="Click Here" onclick="showMessage();" />

在HTML中指定事件处理程序书写很方便，但是有两个缺点。

存在加载顺序问题，如果事件处理程序在html代码之后加载，用户可能在事件处理程序还未加载完成时就点击按钮之类的触发事件，存在时间差问题
这样书写html代码和JavaScript代码紧密耦合，维护不方便

JavaScript指定事件处理程序
通过JavaScript指定事件处理程序就是把一个方法赋值给一个元素的事件处理程序属性。

<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage() {
        alert(this.id);
    };
</script>

解决了时间差的问题，但是不能为一个元素为同一个事件添加两个监听。

DOM2事件处理程序
DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：

1.addEventListener
2.removeEventListener

所有的DOM节点都包含这两个方法，并且它们都接受三个参数：

1.事件类型
2.事件处理方法
3.布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理
默认为false

 <input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click', function() {
    alert(this.id);
}, false);
</script>

通过addEventListener添加的事件处理程序只能通过removeEventListener移除，移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除，因为匿名函数虽然方法体一样，但是句柄却不相同，所以当我们有移除事件处理程序的时候可以这样写

IE兼容性

IE并不支持addEventListener和removeEventListener方法，而是实现了两个类似的方法

1.attachEvent

2.detachEvent

这两个方法都接收两个相同的参数

1.事件处理程序名称

2.事件处理程序方法

由于IE指支持事件冒泡，所以添加的程序会被添加到冒泡阶段

跨浏览器的事件处理程序

在添加事件处理程序事addEventListener和attachEvent主要有几个区别

参数个数不相同。这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）

2.第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）

3.事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id

4.为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器

John Resig很巧妙地利用了闭包

function addEvent(node, type, handler) {
    if (!node) return false;
    if (node.addEventListener) {
        node.addEventListener(type, handler, false);
        return true;
    }
    else if (node.attachEvent) {
        node['e' + type + handler] = handler;
        node[type + handler] = function() {
            node['e' + type + handler](window.event);
        };
        node.attachEvent('on' + type, node[type + handler]);
        return true;
    }
    return false;
}

function removeEvent(node, type, handler) {
    if (!node) return false;
    if (node.removeEventListener) {
        node.removeEventListener(type, handler, false);
        return true;
    }
    else if (node.detachEvent) {
        node.detachEvent('on' + type, node[type + handler]);
        node[type + handler] = null;
    }
    return false;
}

事件对象

在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息。所有浏览器都支持event对象，但支持方式不同。

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	事件是否冒泡
cancelable	Boolean	只读	是否可以取消事件的默认行为
currentTarget	Element	只读	事件处理程序当前处理元素
detailt	Integer	只读	与事件相关细节信息
eventPhase	Integer	只读	事件处理程序阶段：1 捕获阶段，2 处于目标阶段，3 冒泡阶段
preventDefault()	Function	只读	取消事件默认行为
stopPropagation()	Function	只读	取消事件进一步捕获或冒泡
target	Element	只读	事件的目标元素
type	String	只读	被触发的事件类型
view	AbstractView	只读	与事件关联的抽象视图，等同于发生事件的window对象

在事件处理程序内部，**this始终等同于currentTarget，而target是事件的实际目标。

要阻止事件的默认行为，可以使用preventDefault()方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为|

document.querySelector('#btn').onclick = function (e) {
e.preventDefault();
}

stopPropagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡。我们可以在button的事件处理程序中调用stopPropagation()从而避免注册在body上的事件发生

var handler = function (e) {
    alert(e.type);
    e.stopPropagation();
}

addEvent(document.body, 'click', function () { alert('Clicked body')});
var btnClick = document.getElementById('btnClick');
addEvent(btnClick, 'click', handler);

若是注释掉e.stopPropagation(); 在点击button的时候，由于事件冒泡，body的click事件也会触发，但是调用这句后，事件会停止传播。

IE中的事件对象

访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在

var handler = function () {
    var e = window.event;
    alert(e.type);
}
var btnClick = document.getElementById('btnClick');
btnClick.onclick = handler;

我们通过window.event取得了event对象，并检测到了其类型，可是如果事件处理程序是通过attachEvent添加的，那么就会有一个event对象被传入事件处理程序中

var handler = function (e) {
    alert(e.type);
}
var btnClick = document.getElementById('btnClick');
attachEvent(btnClick, handler);

当然这时候也可以通过window对象访问event，方便起见，我们一般会传入event对象，IE中所有的事件都包含以下属性方法

属性/方法	类型	读/写	说明
cancelBubble	Boolean	读/写	默认为false，设置为true后可以取消事件冒泡
returnValue	Boolean	读/写	默认为true，设为false可以取消事件默认行为
srcElementt	Element	只读	事件的目标元素
type	String	只读	被触发的事件类型

跨浏览器的事件对象

虽然DOM和IE的event对象不同，但基于它们的相似性，我们还是可以写出跨浏览器的事件对象方案

function getEvent(e) {
    return e || window.event;
}

function getTarget(e) {
    return e.target || e.scrElement;
}

function preventDefault(e) {
    if (e.preventDefault)
        e.preventDefault();
    else
        e.returnValue = false;
}

function stopPropagation(e) {
    if (e.stopPropagation)
        e.stopPropagation();
    else
        e.cancelBubble = true;
}

网友评论

本文标题：js事件机制解析

本文链接：https://www.haomeiwen.com/subject/giyphxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！