您的位置：首页 > Web前端 > JavaScript

javascript事件监听，事件冒泡/捕获总结

2016-10-26 10:34 501 查看

一、javascript事件监听的三种方法

[html] view
plain copy

element.addEventListener(type, listener[, useCapture]); // IE6~8不支持

element.attachEvent('on' + type, listener); // IE6~10支持, IE11不支持

element.'on' + type = function(){} // 所有浏览器

以click 点击事件为例：

[html] view
plain copy

<!DOCTYPE HTML>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<title>Javascript</title>

<style>

*{margin: 0;padding: 0;}

#big{width: 300px;height: 180px;background-color: orange;margin: 20px auto;}

#small{width: 150px;height: 100px;background-color: blue;}

</style>



</head>

<body>

<div id="big">

    <div id="small"></div>

</div>



<script>

window.onload = function(){

    var oSmall = document.getElementById('small');

    var oBig = document.getElementById('big');



    //第一种：所有浏览器支持

    oBig.onclick = function(){

        console.log('Big Div');

    }

    //第二种：ie8及ie8以下不支持

    oBig.addEventListener('click', function(){

        console.log('Big Div');

    }, true);



    //第三种：ie6~ie10支持

    oBig.attachEvent('onclick', function(){

        console.log('Big Div');

    });

}

</script>

</body>

</html>

二、事件捕获与事件冒泡

关于事件的捕获与冒泡，引用一段文字来说明：

很久以前有个叫Netscape的姑娘，她制订了JavaScript的一套事件驱动机制(即事件捕获)

后来又有一个叫“IE”的小子，这孩子比较傲气，他认为“凭什么我要依照你的规则走”，于是他又创造了一套自己的规则(事件冒泡)

再后来，有个叫W3C的媒婆，想撮合这两个孩子，将他们的特点融合在了一起，这下，事件产生的顺序变成：

事件从根节点开始，逐级派送到子节点，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“捕获阶段(Capture)”;

执行完捕获阶段后，事件由子节点往根节点派送，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“冒泡阶段(Bubble)”。

善良的Netscape以及其姐妹们都接受了媒婆的建议，采用了新的事件规则，而骄傲固执的IE小子始终按照自己的规则执行。最终使得这成为困扰前端开发人员的兼容性问题之一。

几个要点：

（1）通过 element.onclick、element.attackEvent('onclick', function(){}) 来监听事件，均为冒泡机制。例子：

[html] view
plain copy

<!DOCTYPE HTML>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<title>Javascript</title>

<style>

*{margin: 0;padding: 0;}

#big{width: 300px;height: 180px;background-color: orange;margin: 20px auto;}

#small{width: 150px;height: 100px;background-color: blue;}

</style>

</head>

<body>

<div id="big">

    <div id="small"></div>

</div>



<script>

window.onload = function(){

    var oSmall = document.getElementById('small');

    var oBig = document.getElementById('big');



    oBig.onclick = function(){

        console.log('Big Div');

    }

    oSmall.onclick = function(){

        console.log('Small Div');

    }

    // 当点击 div#small时，先后输出：

    // Small Div

    // Big Div

}

</script>

</body>

</html>

（2）w3c 标准中的 addEventListener 方法

W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段（即上文引用文字中的蓝色字体部分）。addEventListener 中的第三个参数 true/false，规定了该事件在捕获阶段执行，还是在冒泡阶段执行。

实例说明：

[html] view
plain copy

<!DOCTYPE HTML>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<title>Javascript</title>

<style>

*{margin: 0;padding: 0;}

#big{width: 300px;height: 180px;background-color: orange;margin: 20px auto;}

#small{width: 150px;height: 100px;background-color: blue;}

</style>

</head>

<body>

<div id="big">

    <div id="small"></div>

</div>

<script>

window.onload = function(){

    var oSmall = document.getElementById('small');

    var oBig = document.getElementById('big');



    oSmall.addEventListener('click', function(){

        console.log('Small Div 捕获');

    }, true);

    oBig.addEventListener('click', function(){

        console.log('Big Div 冒泡');

    });

    oBig.addEventListener('click', function(){

        console.log('Big Div 捕获');

    }, true);

    document.addEventListener('click', function(){

        console.log('Document 冒泡');

    });

    document.addEventListener('click', function(){

        console.log('Document 捕获');

    }, true);

}

</script>

</body>

</html>

输出顺序如下图所示：

当我们点击 div#small 元素时，它是这样的过程：

第一阶段 —— 捕获阶段：所以，"Document 捕获" 最先被执行，然后是“Big Div 捕获”，最后是“Small Div 捕获”；

第二阶段 —— 目标阶段：到达 div#small 元素，然后，下一步，进入到冒泡阶段；

第三阶段 —— 冒泡阶段：Small Div 没有事件冒泡，所以，冒泡到 Big Div，发现有事件冒泡，输出“Big Div 冒泡”，再继续往上冒泡，最后输出“Document 冒泡”。整个过程结束。

三、事件监听在不同浏览器下兼容写法

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

文字引用：
http://www.cnblogs.com/aji88/archive/2012/07/20/2600492.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航