JS基础入门篇（二十一）—事件流

头像
梁志芳
    阅读 8 分钟
    2

    1.事件绑定

    方式一：用on绑定事件

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    #box{
        width:100px;
        height:100px;
        background-color:red;
    }
</style>
</head>
<body>
<div id="box"></div>
<script>
    var box = document.getElementById("box");
    box.onclick = function(){
        alert(1);
        alert(2);
    };
</script>
</body>
</html>

    方式二：用addEventListener进行事件侦听，也能起到绑定事件的作用。

    addEventListener

        第一个参数：事件名
        （click、mouseover...）
        注意：事件名不加on
    第二个参数：绑定的函数
        （有名函数、匿名函数）
    第三个参数：
        是否捕获
        默认值：false
        
可以为一个元素的同一个事件名 绑定上多个处理函数

    点击查看效果以及代码，codepen中也有console可以查看

    以下是完整代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var div=document.getElementById("box");
        div.onclick=function () {
            alert(1);
            alert(2);
            console.log("3");
        };
        //传入匿名函数
        div.addEventListener("click",function () {
            console.log("click-4");
        });
        //传入匿名函数
        div.addEventListener("click",function () {
            console.log("click-5");
        });
        //传入匿名函数
        div.addEventListener("mouseover",function () {
            console.log("mouseover-1");
        });

        function fn() {
            console.log("click-6");
        }
        //传入的是有名函数
        div.addEventListener("click",fn);

    </script>
</body>
</html>

    2.事件解绑

    事件解绑：

     (1)通过用on绑定的事件，只需要为事件 重新赋值 即可。
 (2)通过addEventListener绑定的事件，需要用removeEventListener();来解绑。
        第一个参数：事件名
        第二个参数：解绑的函数名（如果是匿名函数，无法解绑。一般使用有名函数传参。）
        第三个参数：是否捕获，默认值false。

    点击查看事件解绑效果！！！

    以下是部分核心代码：

    <body>
    <div id="box"></div>
    <script>
        var box=document.getElementById("box");
        function  fn() {
            console.log("addEventListener-1");
        }
        //用on进行事件绑定
        box.onclick=function () {
            console.log("addEventListener-1");
        };
        //针对on的绑定而解绑,将不会打印出1。因为已经解绑了
        box.onclick=null;
        //用addEventListener,传入的是有名函数 绑定。
        box.addEventListener("click",fn);
        //针对addEventListener,并且使用的是有名函数 的绑定而解绑
        box.removeEventListener("click",fn);
        //用addEventListener,传入的是匿名函数 绑定。
        box.addEventListener("click",function () {
            console.log("addEventListener-2");
        });
        //针对addEventListener,并且使用的匿名函数 的绑定而解绑,解绑无效。
        //依旧打印addEventListener-2
        box.removeEventListener("click",function () {
            console.log("addEventListener-2");
        });
    </script>
</body>

    3.事件流

    事件流的三个阶段：

        （1）捕获阶段
            从 最外层元素 开始 向目标 进行查找的阶段, 
                并且 同时执行 该阶段中 所有 被查找的元素 的 捕获阶段绑定的事件
    （2）处于目标阶段
            触发 目标元素的 对应事件
    （3）冒泡阶段
            从 目标元素 开始 逐渐往 外层 查找,
                并且 同时执行 该阶段中 所有 被查找的元素 的 冒泡阶段绑定的事件。

    戳链接，点击div查看效果！！！

    以下是全部代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #red{
            height: 400px;
            padding: 100px;
            background:red;
        }
        #blue{
            height: 200px;
            padding: 100px;
            background:blue;
        }
        #yellow{
            height: 100px;
            padding: 50px;
            background:yellow;
        }
    </style>
</head>
<body>
    <div id="red">
        <div id="blue">
            <div id="yellow"></div>
        </div>
    </div>
    <script>
        var red=document.getElementById("red");
        var blue=document.getElementById("blue");
        var yellow=document.getElementById("yellow");
        //用on绑定的事件是冒泡事件
        red.onclick=function () {
            console.log("red")
        };
        blue.onclick=function () {
            console.log("blue")
        };
        yellow.onclick=function () {
            console.log("yellow")
        };
        //用addEventListener绑定的 并且第三个参数是true 是捕获事件
        red.addEventListener("click",function () {
            console.log("add-red-true")
        },true);
        blue.addEventListener("click",function () {
            console.log("add-blue-true")
        },true);
        yellow.addEventListener("click",function () {
            console.log("add-yellow-true")
        },true);
        //用addEventListener绑定的 并且第三个参数是false 是冒泡事件
        red.addEventListener("click",function () {
            console.log("add-red-false")
        },false);
        blue.addEventListener("click",function () {
            console.log("add-blue-false")
        },false);
        yellow.addEventListener("click",function () {
            console.log("add-yellow-false")
        },false);
    </script>
</body>
</html>

    以上代码点击黄色的结果。

    图片描述

    4.阻止冒泡

        通过 on 进行绑定
        通过 event.cancelBubble = true;阻止冒泡
    通过 addEventListener进行绑定
        通过 event.stopPropagation();阻止冒泡

    以上两种其中一种，方式都可以阻止不同绑定方式的冒泡。

    以下代码可以粘贴运行看看效果。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #red{
            height: 200px;
            padding:100px;
            background: red;
        }
        #green{
            height: 150px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="red">
        <div id="green"></div>
    </div>
    <script>
        var red=document.getElementById("red");
        var green=document.getElementById("green");
        document.onclick=function () {
            console.log("document");
        };
        red.onclick=function () {
            console.log("red");
            //event.cancelBubble=true;
        };
        green.onclick=function () {
            console.log("green");
           //event.cancelBubble=true;
        }
//-------------------------------------------------
        document.addEventListener("click",function () {
            console.log("addEventListener-document");
        });
        red.addEventListener("click",function () {
            console.log("addEventListener-red");
           //event.stopPropagation();
        });
        green.addEventListener("click",function () {
            console.log("addEventListener-green");
            event.stopPropagation();
        })
    </script>
</body>
</html>

    5.浏览器的默认行为

    浏览器默认行为

        浏览器默认为我们提供的功能
    比如页面跳转，右键菜单，文字拖动，图片拖动

    阻止默认行为

        有两种方式
        （1）return false;
        （2）event.preventDefault();
    <body>
    <div id="box">你好你好啊你好
        <a id="a" href="http://www.baidu.com">百度</a>
    </div>

    <script>
        var box=document.getElementById("box");
        var a=document.getElementById("a");
        a.onclick=function () {
            //return false;//方法一
            event.preventDefault();//方法二
        }
    </script>
</body>

    注意事项：

    一般尽可能使用event.preventDefault阻止默认样式。因为return false；方法在jQuery中，此方法不仅会阻止默认行为，还会阻止冒泡。相当于同时调用了preventDefault和stopPropagation方法。

    6.模拟上下文菜单

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    #menu {
        width: 100px;
        background-color: cornflowerblue;
        color: #fff;
        padding: 20px;
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
    }
</style>
</head>
<body>
<ul id="menu">
    <li>复制</li>
    <li>粘贴</li>
    <li>剪切</li>
    <li>另存</li>
</ul>
<script>
    var menu = document.getElementById("menu");
    document.oncontextmenu = function(){
        menu.style.display = "block";
        menu.style.left = event.clientX + "px";
        menu.style.top = event.clientY + "px";
        event.preventDefault();
    }
    document.onclick = function(){
        menu.style.display = "none";
    }
</script>
</body>
</html>
    htmlcssjavascript
    梁志芳
    159 声望58 粉丝

    正在学习CSS+HTML+JS

    « 上一篇
    JS基础入门篇（二十）—事件对象以及案例（二）
    下一篇 »
    JS基础入门篇（十八）—日期对象

    引用和评论

    推荐阅读
    头像
    git 基本命令

    梁志芳赞 3阅读 1.7k

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    0 条评论
    得票最新