##前端的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>```