javascript高级程序设计第三版第13章事件

最新推荐文章于 2024-10-08 14:23:59 发布

zhanghj819

最新推荐文章于 2024-10-08 14:23:59 发布

阅读量285

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/zhanghj819/article/details/77452999

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

13.1 事件流

如果你单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上。换句话说，在单击按钮的同时，你也单击了按钮的容器元素，甚至也单击了整个页面。

事件流描述的是从页面中接收事件的顺序。

13.1.1 事件冒泡

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

IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。

13.1.2 事件捕获

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

由于老版本的浏览器不支持，因此很少有人使用事件捕获。建议使用事件冒泡。

13.1.3 DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。

13.2 事件处理程序

事件就是用户或浏览器自身执行的某种动作。例如onclick
而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。

13.2.1 HTML事件处理程序

<input type="button" value="Click Me" onclick="alert('Clicked')" />

//通过event变量，可以直接访问事件对象
<input type="button" value="Click Me" onclick="alert(event.type)" />

//this值等于事件的目标元素
<input type="button" value="Click Me" onclick="alert(this.value)" />

13.2.2 DOM0级事件处理程序

var btn = document.getElementById("mtBtn");
btn.onclick = function(){
    alert(this.id);//"myBtn"
};

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

13.2.3 DOM2级事件处理程序

addEventListener()和removeEventListener()，接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。这个布尔值为true，表示在捕获阶段调用事件处理程序；如果为false，表示在冒泡阶段调用事件处理程序。

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

好处是可以添加多个事件处理程序，按添加顺序执行。
如果不是特别需要，不建议在事件捕获阶段注册事件处理程序。

13.2.4 IE事件处理程序

attachEvent()和detachEvent()，接受2个参数：要处理的事件名和作为事件处理程序的函数，只支持事件冒泡。

作用域不一样，attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，this等于window。

13.2.5 跨浏览器的事件处理程序

略，用能力检测实现。

13.3 事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

13.3.1 DOM中的事件对象

//在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.currentTarget === this);//true
    alert(event.target === this);//true
};

//按钮上没有注册事件处理程序，结果click事件就冒泡到了document.body
document.body.onclick = function(event){
    alert(event.currentTarget === document.body);//true
    alert(this === document.body);//true            
    alert(event.target === document.getElementById("myBtn"));//true
};

要阻止特定事件的默认行为，可以使用preventDefault()方法。例如，链接的默认行为就是在被单击时会导航到其href特性指定的URL。只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消默认行为。

var link = document.getElementById("myLink");
link.onclick = function(event){
    event.preventDefault();
};

stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的捕获或冒泡。

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

//点击按钮不会触发
document.body.onclick = function(event){
    alert("Body clicked");
};

事件对象的eventPhase属性，可以用来确定事件当前正位于事件流的哪个阶段。捕获为1，处于目标对象为2，冒泡为3。