冒泡和捕获

最新推荐文章于 2020-06-03 09:35:09 发布

不宅的程序园

最新推荐文章于 2020-06-03 09:35:09 发布

阅读量422

点赞数

CC 4.0 BY-SA版权

分类专栏：常用方法总结文章标签：冒泡捕获

本文链接：https://blog.youkuaiyun.com/zyz_3362/article/details/72841194

常用方法总结专栏收录该内容

27 篇文章

订阅专栏

本文通过实例演示了在JavaScript中事件监听的冒泡与捕获阶段的区别，并提供了兼容不同浏览器版本的事件绑定方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div 
{
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>


<p>该实例演示了在添加事件监听时冒泡与捕获阶段的不同。</p>
<div id="myDiv">
	<p id="myP">点击该段落， 我是冒泡</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击该段落， 我是捕获</p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() 
{
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function()
{
    alert("你点击了 DIV 元素!");
}, false);
document.getElementById("myP2").addEventListener("click", function() 
{
    alert("你点击了 P 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() 
{
    alert("你点击了 DIV 元素!");
}, true);
</script>


</body>
</html>

冒泡和捕获区别

冒泡是从内到外的 --- 捕获是从外到内的

addEventListener（type,函数名，事件监听方式true或者false）; //type不加on

冒泡是false 捕获是true

element.attachEvent('on'+type,函数名); //type加on

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。

兼容IE和非IE浏览器事件绑定的代码：

function addEvent(obj,type,handle){
  try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
    obj.addEventListener(type,handle,false);
  }catch(e){
    try{ // IE8.0及其以下版本
      obj.attachEvent('on' + type,handle);
    }catch(e){ // 早期浏览器
      obj['on' + type] = handle;
    }
  }
}