【JavaScript】学习第十四天(事件传播、阻止事件冒泡、事件委托)

1.事件流(事件传播)概念:描述页面接收事件的顺序,事件发生时,事件会在元素节点之间按照特定的顺序,依次传播。思考:互相嵌套的div,同时给每个元素绑定了不同结果的相同事件,事件会如何传播IE提出的是冒泡流:事件开始时由最具体的元素接收,然后逐级向上到DOM顶级节点网景提出的是捕获流:事件开始时从DOM顶级节点开始,然后逐层向下传递到最具体的元素W3C规范:js事件传播流程主要有三个阶段:事件捕获阶段:从window向 目标 传递的过程处于目标阶段:具体点击的是谁?事件发生在目标身
摘要由CSDN通过智能技术生成

1.事件流(事件传播)

概念
描述页面接收事件的顺序,事件发生时,事件会在元素节点之间按照特定的顺序,依次传播。

思考
互相嵌套的div,同时给每个元素绑定了不同结果的相同事件,事件会如何传播

IE提出的是冒泡流
事件开始时由最具体的元素接收,然后逐级向上到DOM顶级节点

网景提出的是捕获流
事件开始时从DOM顶级节点开始,然后逐层向下传递到最具体的元素

W3C规范
js事件传播流程主要有三个阶段:

  • 事件捕获阶段:从window向 目标 传递的过程
  • 处于目标阶段:具体点击的是谁?事件发生在目标身上
  • 事件冒泡阶段:从目标向window传递的过程

DOM2可以支持捕获
事件源 . addEventListener(‘事件类型’,事件处理函数,布尔true事件捕获、false事件冒泡,不写就是默认冒泡)

DOM0级不支持捕获写法
现代的浏览器在默认情况下,都是事件冒泡模型。
如果想支持事件捕获,需要用DOM2级事件来设置

2.阻止事件冒泡

为什么要阻止

很多情况下我们并不希望事件冒泡的发生。
比如当我们想实现

  • 点击按钮,让元素显示;
  • 点击页面空白即(document)时让元素隐藏。

如何组止

  • IE浏览器:事件对象 . cancelBubble = true
  • 非IE浏览器阻止方式为:事件对象 . stopPropagation()
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <style>
        div {
   
            width: 200px;
            height: 200px;
            background-color: pink;
            display: none;
        }
    </style>
</head>

<body
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值