为了账号安全,请及时绑定邮箱和手机立即绑定

从零开始学 Web 之 DOM(七)事件冒泡

标签:
前端工具

一、事件冒泡

1、什么是事件冒泡?

事件冒泡:当有多个元素嵌套,并且这些元素绑定了相同的事件,这时候如果里面的元素事件触发了,那么外面的事件会自动触发。

示例:

<body>
    <div id="dv1">
        <div id="dv2">
            <div id="dv3"></div>
        </div>
    </div>

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="common.js"></script>
    <script>
        my$("dv1").onclick = function() {
            console.log(this.id);
        }
        my$("dv2").onclick = function() {
            console.log(this.id);
        }
        my$("dv3").onclick = function() {
            console.log(this.id);
        }
    </script></body>

2、阻止事件冒泡

2.1、方式一

window.event.cancelBubble = true;

注意: Chrome,IE8 支持,firefox 不支持

2.2、方式二

在事件处理函数中传一个参数 e,然后调用 e.stopPropagation();

注意:Chrome,firefox 支持, IE8 不支持。

window.event 和 e 都是事件处理参数对象,一个是 IE 标准,一个是 firefox 标准。

<body>
    <div id="dv1">
        <div id="dv2">
            <div id="dv3"></div>
        </div>
    </div>

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="common.js"></script>
    <script>
        my$("dv1").onclick = function() {
            console.log(this.id);
        }
        my$("dv2").onclick = function() {
            console.log(this.id);
            window.event.cancelBubble = true;
        }
        my$("dv3").onclick = function(e) {
            console.log(this.id);
            e.stopPropagation();
        }
    </script></body>

这时候可以写兼容代码的,由于用到 window ,但是没学到 BOM,所以先不写。

3、事件的三个阶段

  1. 事件捕获阶段(从外向内) ===> 阶段 1

  2. 事件目标阶段(最开始触发事件的目标)===> 阶段 2

  3. 事件冒泡阶段(从里向外) ===> 阶段 3

  • 通过事件处理参数对象 e.eventPhase 属性可以查看当前事件所处的阶段。

若为1:捕获阶段

若为2:目标阶段

若为3:冒泡阶段

  • addEventListener 绑定事件处理方法中第三个参数:控制事件的阶段

true: 控制事件为捕获阶段

false: 控制事件为冒泡阶段

  • 一般默认使用冒泡阶段,很少使用捕获阶段。

<body>
    <div id="dv1">
        <div id="dv2">
            <div id="dv3"></div>
        </div>
    </div>

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="common.js"></script>
    <script>
        my$("dv1").addEventListener("click", function(e) {
            console.log(this.id +" --- "+ e.eventPhase);
        }, false);
        my$("dv2").addEventListener("click", function(e) {
            console.log(this.id +" --- "+ e.eventPhase);
        }, false);
        my$("dv3").addEventListener("click", function(e) {
            console.log(this.id +" --- "+ e.eventPhase);
        }, false);
      // -------------------------------------------------------// addEventListener 的第三个参数为 false// 点击最里面的 dv3//dv3 --- 2 : 因为是冒泡阶段,从里向外,从 dv3开始,dv3是目标,所以为2//dv2 --- 3:冒泡阶段,所以为3//dv1 --- 3:冒泡阶段,所以为3// 如果将 false 都改为 true 的话:// 点击最里面的 dv3//dv1 --- 1:捕获阶段,从外向里,从dv1开始捕获,所以dv1为1//dv2 --- 1:捕获阶段,从外向里//dv3 --- 2:捕获阶段,从外向里,到达dv3目标,随意dv3为目标阶段。

    </script></body>

二、小案例

目的:为同一个元素绑定多个不同的事件指向相同的事件处理函数。

<body>
    <input type="button" value="按钮" id="btn" >

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="common.js"></script>
    <script>
        my$("btn").onclick = func;
        my$("btn").onmouseover = func;
        my$("btn").onmouseout = func;
        
        function func(e) {
            switch(e.type) {
                case "click" :
                    console.log("onclick");
                    break;
                case "mouseover" :
                    console.log("onmouseover");
                    break;
                case "mouseout" :
                    console.log("onmouseout");
                    break;
                default:
                    break;
            }
        }
    </script></body>

使用事件处理参数对象的 type 属性可以判断事件触发时候,事件的类型,从而做出相应的事件处理。

三、百度搜索小项目

目标:在搜索框输入关键字,自动在搜索框下方显示相关内容。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>    <style>        * {            margin: 0;            padding: 0;        }        #dv1 {            width: 500px;            margin-top: 100px;            margin-left: 200px;            font: 400 18px/30px "Microsoft Yahei";
            color: #595959;
        }        input {
            width: 500px;
            height: 30px;
        }

        .dvv {
            width: 500px;
            /*height: 10px;*/
            border: 1px solid green;
        }

        .ps {
            padding: 2px 0 2px 5px;
            cursor: pointer;
        }
    </style></head><body><div id="dv1">
    <input type="text" placeholder="日向雏田" id="txt"></div><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="common.js"></script><script>
    var KeyWords = [        "旋涡鸣人", "旋涡辛久奈", "旋风小子", "旋风少女",
        "日向雏田", "日向花火", "日向本家",
        "奈良鹿丸", "奈良大佐",
        "旗木卡卡西"
    ];

    my$("txt").onkeyup = function () {
        while(my$("dv2")) {
            my$("dv1").removeChild(my$("dv2"));
        }
        // console.log(this.value);
        var findArr = []; // 每次输入文字的时候都先清除临时数组
        for (var i = 0; i < KeyWords.length; i++) {
            if (KeyWords[i].indexOf(this.value) === 0) {
                // console.log("yes");
                findArr.push(KeyWords[i]);
            }
        }
        // 文本框输入了内容,并且临时数组不为空
        if ((findArr.length !== 0) && (this.value.length !== 0)) {

            var dvObj = document.createElement("div");
            dvObj.className = "dvv";
            dvObj.id = "dv2";
            my$("dv1").appendChild(dvObj);

            for (var i = 0; i < findArr.length; i++) {
                var pObj = document.createElement("p");
                pObj.className = "ps";
                setInnerText(pObj, findArr[i]);
                my$("dv2").appendChild(pObj);

                pObj.onmouseover = f1; // 循环里面不要使用匿名函数
                pObj.onmouseout = f2;

            }
        }
    };

    function f1() {
        this.style.backgroundColor = "greenyellow";
    }
    function f2() {
        this.style.backgroundColor = "";
    }</script></body></html>

1、这里的候选数据本来应该来自服务器,这里用数组来模拟。
2、这里使用的是鼠标输入文字后的鼠标抬起事件:onkeyup。
3、 需要准备个临时数组存储于文本框输入文字匹配的字符串。
4、当搜索框的文本为空或者临时数组的内容为空时,循环删除下拉列表。
5、之所以输入多个文字,但是只创建了一个下拉列表的原因是因为在输入第二个文字的时候,先输入的其实是字母,这个时候不匹配,而我们在每次鼠标抬起的时候会清空临时数组,所以这个时候会先删除下拉列表,当我们输入第二个文字的时候,再重新创建相匹配的下拉列表。
6、每次进入鼠标抬起按键时,如果有下拉列表就循环删除。
7、注意在循环里面不要使用匿名函数。

原文出处

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消