JavaScript基础（3）—— Javascript事件

来源：互联网发布：软件部署结构图编辑：程序博客网时间：2024/05/16 16:01

事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水，当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。

例如： HTML事件是发生在HTML元素上的事情，当HTML页面中使用JavaScript时，Javascript可以触发这些事件。

一、事件流

事件流就是描述了页面中接收事件的顺序，在浏览器发展的初期，两大浏览器厂商IE和Netscape互掐，他们对事件流的解释出现了两种截然相反的定义。也就是：IE的冒泡，Netscape的事件捕获。下图是他们的简要结构：

（浏览器发展小故事：Netscape即网景浏览器，很早的一款网页浏览器了，现在都没人用了。后来由于微软的垄断行为，IE独大。由于网景很早就开源了，应该是上个世纪末。所以，现在很多的浏览器都是以之为雏形开发设计的。为了向其致敬，chrome、safari等浏览器代码里都有Browser name: Netscape。）

1.事件捕获

事件捕获正好相反，事件捕获最早由最不具体的节点接收，最具体的节点最后接收到事件。
当点击text部分时，先由window接收，然后逐级传至text。

2.事件冒泡

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

当点击text部分时，先由text处的元素接收，然后逐级传播至window。

二、Javascript事件处理程序的三种方式

1.HTML事件处理程序

指的是直接在HTML中添加事件处理程序。

HTML按钮被点击示例：

<input id="btn" value="点击" type="button" onclick="showmsg();"/><script>      function showmsg() {  alert("HTML添加事件处理");    }</script>

给按钮添加一个onclick()事件，当点击按钮时，会执行showmsg()方法。

从上面的例子可以看出，事件处理是直接嵌套在元素里的，这样就会有一个bug：HTML代码和js代码的耦合性太强，如果之后想要修改js中的showmsg()方法，那么不仅要改js，还要改HTML，代码少的时候没啥问题，但是代码达到万行级别时，修改起来就很困难了，所以这个并不是很推荐。

2.DOM0级事件处理程序

指的是为指定对象添加事件处理。

<input id="btn" value="点击" type="button" /><script>    var btn = document.getElementById("btn");      btn.onclick = function() {  alert("DOM0添加事件处理");    }    btn.onclick = null;//如果想删除btn的点击事件，将其置为null即可</script>

相对于HTML事件处理程序，DOM0级事件，HTML代码的js代码的耦合性大大降低，但还是感觉耦合度不够小！

3.DOM2级事件处理程序

DOM2也是对特定的对象添加事件处理程序，但是主要涉及到两个方法，用于处理指定事件和删除指定事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值（是否在捕获阶段处理事件）。

<input id="btn" value="点击" type="button" /><script>    var btn = document.getElementById("btn");     btn.addEventListener("click",showmsg,false);   //这里我们把最后一个值置为false，即不在捕获阶段处理，一般来说冒泡处理在各浏览器中兼容性较好     function showmsg() {  alert("DOM2添加事件处理");    }    btn.removeEventListener("click",showmsg,false); //删除btn的点击事件,传入的参数一定要跟之前的参数一致，否则删除会失效！</script>

三、事件冒泡和事件捕获的流程

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">    #outer{        border: dotted black;    }    #inner{    border: solid red;    }</style></head><body><div id="outer" align="center">outer<div id="inner" align="center">inner</div> </div><script>var outer = document.getElementById('outer');var inner = document.getElementById('inner');inner.addEventListener('click',function() {alert('子节点捕获2')},true);inner.addEventListener('click',function() {alert('子节点冒泡3');},false);outer.addEventListener('click',function() {alert('父节点捕获1')},true);outer.addEventListener('click',function() {alert('父节点冒泡4')},false);</script></body></html>

运行上面的代码，点击子元素的时候，我们会发现，执行的先后顺序是：父节点捕获--子节点捕获--子节点冒泡--父节点冒泡。从这个例子中，大家也就明白了，另外，DOM2级事件规定事件包括三个阶段：

1》事件捕获阶段； 2》处于目标阶段； 3》事件冒泡阶段。

首先是捕获，然后处于目标阶段（即来到事件的发出位置），最后才是冒泡，不科学的是，居然木有DOM1级事件处理程序，大家注意下，别闹出笑话了！

补充一下：

1. IE事件处理程序也对应有两个方法：attachEvent()添加事件，detachEvent()删除事件，这两个方法接收相同的两个参数：事件处理程序名称与事处理函数。这里为什么没有布尔值呢？因为ie8以及更早的版本只支持事件冒泡，所以最后一个参数默认的相当于false来处理！（支持IE事件处理程序的浏览器有IE，opera）。

2. 事件对象是用来记录一些事件发生时的相关信息的对象，但事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁！

阅读全文

0 0