前端的js冒泡事件

##前端的js冒泡事件

什么是冒泡事件?我个人通俗的认为,冒泡事件就是从当前事件触发后,当前事件在执行并且一直持续到document(前提是每个元素都有事件),也就是从事件内到事件外。

<style type="text/css">
#a{flat:left;width:200px;height:200px;background:yellow;margin:20px;}
#a1 {float:left;margin:20px;width:100px; height:100px;background:red;}
</style>
<script type="text/javascript">
var a=document.getElementById('a');
a.onclick=function () {
	 alert("你好,我是a");
};//a1的父级元素事件
function cancelbubble(id) {
 var a1=document.getElementById(id);
 if(a1.addEventListener) {
a1.addEventListener('click',function() {
  alert("你好,我是a1");
},false);  //这是IE8以上和其他浏览器使用(例如火狐、谷歌等等)
 }
 else{
	 a1.attachEvent('onclick',function() {
  alert("你好,我是a1");
},false);     //这个是IE6~8以及IE6以下
 
	}
}
 new cancelbubble('a1');
</script>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

</head>
<body>
<div id="a">
<div id="a1">
</div>
</div>

</body>
</html>```

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值