事件冒泡和捕获

来源：互联网发布：java物流管理系统编辑：程序博客网时间：2024/05/16 08:50

图码结合，很清晰～

<!DOCTYPE html><html><head></head><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><body><div class="father" style="width:300px;height:300px;background-color:pink;position:relative"><div class="son" style="width:50px; height:50px; background-color:red;position:absolute;margin:auto;left:0;right:0;top:0;bottom:0"><a id="a1" href="http://liuyixiang.cn">Hello !</a></div></div><script type="text/javascript">document.getElementsByClassName("father")[0].addEventListener("click",function(){alert("father");},false);document.getElementsByClassName("son")[0].addEventListener('click',function(e){alert("son");// 如果你想阻止冒泡，这是w3c的写法//在IE下设置cancelBubble = true；e.stopPropagation();alert("事件冒泡已经被阻止了");},false);document.getElementById("a1").addEventListener('click',function(e){alert("这是一个超链接");// 阻止事件的默认行为／例如：阻止a跳转// 在IE下设置window.event.returnValue = false;e.preventDefault();},false);//当第三个参数为 false 时，默认是发生冒泡。//true 为捕获,默认为false，即冒泡</script></body></html>

阅读全文

0 0