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

时间 2020-09-19

原文原文链接

1.事件绑定

方式一：用on绑定事件html

<!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能够查看spa

如下是完整代码code

<!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.事件解绑

事件解绑：htm

(1)经过用on绑定的事件，只须要为事件 从新赋值 便可。
 (2)经过addEventListener绑定的事件，须要用removeEventListener();来解绑。
        第一个参数：事件名
        第二个参数：解绑的函数名（若是是匿名函数，没法解绑。通常使用有名函数传参。）
        第三个参数：是否捕获，默认值false。

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

如下是部分核心代码：seo

<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>