js事件冒泡与事件捕获、阻止事件冒泡和浏览器默认行为

1、事件流:

  • 事件流描述的是从页面中接收事件的顺序,“事件冒泡流”由IE提出 ,“事件捕获流”由 Netscape 提出;
  • 事件流包括三个阶段:事件捕获阶段、处于目标阶段(即触发事件的元素)和事件冒泡阶段。
  • “DOM2 级事件”规范要求事件应该从 document 对象开始捕获阶段,但主流浏览器都是从 window 对象开始。
  • “DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标(因为目标阶段被视为为冒泡阶段的一部分),但主流浏览器都会涉及;

2、事件冒泡(event bubbling):

  • 由文档中触发事件的元素开始,逐级向上传播到window对象;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div">事件冒泡</div>
</body>
<script>
    window.addEventListener("click",function(){
        console.log("window")
    },false);
    document.addEventListener("click",function(){
        console.log("document")
    },false);
    document.documentElement.addEventListener("click",function(){
        console.log("html")
    },false);
    document.body.addEventListener("click",function(){
        console.log("body")
    },false);
    document.getElementById("div").addEventListener("click",function(){
        console.log("div")
    },false);
</script>
</html>

事件触发循序为:div==>body==>html==>document==>window

3、事件捕获(event capturing):

  • 则与事件冒泡相反,从window对象逐级向下传播到触发事件的元素;(IE9以下老版本浏览器不支持事件捕获)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div">事件捕获</div>
</body>
<script>
    window.addEventListener("click",function(){
        console.log("window")
    },true);
    document.addEventListener("click",function(){
        console.log("document")
    },true);
    document.documentElement.addEventListener("click",function(){
        console.log("html")
    },true);
    document.body.addEventListener("click",function(e){
        console.log("body")
    },true);
    document.getElementById("div").addEventListener("click",function(e){
        console.log("div")
    },true);
</script>
</html>

事件触发循序为:window==>document==>html==>body==>div

4、阻止事件冒泡或事件捕获:

event.stopPropagation();

5、阻止浏览器默认行为:

/*方法一*/
return false/*方法二*/
event.preventDefault()

阻止a标签默认跳转行为

<a href="javascript:"></a>
<a href="javascript:void(0)"></a>
<!--void操作符会忽略操作数“0”的值,返回undefined,目的让程序更具语义;-->

阻止选中文字

document.onselectstart=new Function(return false)

阻止拖动图片

document.ondragstart=new Function(return false);
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值