为您解惑：JS事件流之由浅入深剖析......

最新推荐文章于 2024-03-15 10:30:12 发布

zhangq0123

最新推荐文章于 2024-03-15 10:30:12 发布

阅读量282

点赞数 1

分类专栏： Javascript 文章标签： JS事件流详解

本文链接：https://blog.csdn.net/zhangq0123/article/details/52863644

版权

Javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

事件流描述的是从页面中接收事件的顺序，也就是说当一个事件产生时，这个事件的传播过程，就是事件流。

1.IE的事件流：

IE中的事件流叫事件冒泡即：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。对于html来说，就是当一个元素产生了一个事件，它会把这个事件传递给它的父元素，父元素接收到了之后，还要继续传递给它的上一级元素，就这样一直传播到document对象。

2.标准浏览器的事件捕获流：

捕获事件即：事件从document对象开始，然后事件一级一级往下传，直到最具体的元素为止，刚好和冒泡事件相反。

3.事件处理程序：

（1）HTML事件处理程序（即事件写在HTML文档页面中）。

（2）DOM0级事件处理程序。

（3）DOM2级事件处理程序。

DOM2级事件定义两个方法：用于处理指定和删除事件处理程序的操作即：addEventListner()和removeEventListner()。他们都要接受三个参数：要处理的事件名、事件处理函数以及boolean值（true表示捕获事件流，false表示冒泡事件流）。而IE事件处理程序的函数为：attachEvent()和detachEvent()。他们只接受两个参数：要处理的事件名、事件处理函数。

DOM0级与DOM2级的简单实例如下：

a.使用DOM0级，在向同一事件(比如onclick)添加处理函数时，只能添加一个，如果添加了两个，后面的会覆盖前面的：
element.onclick = clickHandler1;
element.onclick = clickHandler2; //clickHandler2会覆盖clickHandler1.

b.而使用DOM2级，可以向同一事件添加多个处理函数：

element.addEventListener('clcik',clickHandler1,false);
element.addEventListener('clcik',clickHandler2,false);

注：现在的浏览器默认是采用的是事件冒泡；在DOM0级方法绑定事件只能是事件冒泡，不能设置；在DOM2级你可以设置是用事件冒泡还是事件捕获。

下面重点讨论一下DOM0级事件处理程序：

a. 使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此是在元素的作用域中运行，换句话说，程序中的this引用的是当前元素。

<span style="font-size:14px;"><script  type="text/javascript">
    var div_id = document.getElementById("div_id");
    div_id.onclick = function(){
         alert(this.id);   //div_id
    };
</script></span>

可以在事件处理程序中通过this访问元素的任何属性和方法，以这种方式(即DOM0级)添加的事件处理程序会在事件流中的冒泡阶段被处理。

b.可以删除通过DOM0级方法指定的事件处理程序，只要将事件处理程序属性的值设为null即可。

<span style="font-size:14px;"></span><pre name="code" class="javascript"><span style="font-size:14px;"><script  type="text/javascript"></span>

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

c.在DOM0级事件处理程序中取消冒泡事件的封装函数。

<span style="font-size:14px;">function stopPro(e) {    //e指事件处理函数中的event参数。
    if (e && e.stopPropagation) {
      //W3C取消冒泡事件
      e.stopPropagation();
    } else {
      //IE取消冒泡事件
      window.event.cancelBubble = true;
    }
  };</span>

d.事件冒泡的例子如下：

<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件冒泡</title>
  <style type="text/css">
  #child{
    background: red;
    width:50px;
    height:50px;
  }
  #father{
    width:100px;
    height:100px;
    background:green;
  }
  #grandparent{
    width:150px;
    height:150px;
    background:black;
    margin:100px auto 0;
  }
  </style>
</head>
<body>
  <div id='grandparent'>
    <div id='father'>
      <div id='child'></div>
    </div>
  </div>
</body>
<script type="text/javascript">
  var grandparent = document.getElementById("grandparent");
  var parent = document.getElementById("father");
  var child = document.getElementById('child');
  var html = document.getElementsByTagName("html")[0];
  var body = document.body;
  child.onclick = function () {
    console.log("我是儿子");
  }
  parent.onclick = function () {
    console.log("我是父亲");
  }
  grandparent.onclick = function () {
    console.log("我是爷爷");
  }

  window.onclick = function () {
    console.log("我是window");
  }
  document.onclick = function () {
    console.log("我是document");
  }
  html.onclick = function () {
    console.log("我是html");
  }
  body.onclick = function () {
    console.log("我是body");
  }
</script>
</html></span>

下面是事件流的相关教程链接：

（1）http://www.cnblogs.com/blackwood/archive/2013/03/14/2959195.html （一）

（2）http://www.cnblogs.com/blackwood/archive/2013/03/15/2961006.html （二）

（3）http://www.runoob.com/jsref/dom-obj-event.html（HTML DOM事件教程）

PS：猿猿们有什么意见和建议可以留言给我呦！

zhangq0123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为您解惑：JS事件流之由浅入深剖析......

事件流：function stopPro(e) { if (e && e.stopPropagation) { //W3C取消冒泡事件 e.stopPropagation(); } else { //IE取消冒泡事件 window.event.cancelBubble = true; } };
复制链接

扫一扫

专栏目录