前端学习day15-DOM：事件流，阻止冒泡事件流，事件的代理，事件绑定的方式，多个按钮绑定同一个事件，鼠标和键盘的事件类型

目录

1.事件流：

2.停止冒泡事件流：

4.事件的代理（委托）

5.事件绑定的方式

6.多个按钮绑定同一个事件

7.鼠标和键盘的事件类型

---

1.事件流：

      从子节点 到 根节点 按照特定顺序执行 途径的节点的事件会被执行 这个传播的过程称为事件流

冒泡事件流（常用）： 从 目标元素   到  根元素

捕获事件流（不用）：从根元素  到目标元素

        如果捕获和冒泡同时存在 则先执行捕获 再执行冒泡

        通过onClick 绑定的事件  默认为 冒泡事件事件流

event 关键字 事件对象 事件对象包含了一系列的属性和方法

2.停止冒泡事件流：

        2.1cancelBubble

                event.cancelBubble = true;

        2.2Propagation 传播

                event.stopPropagation();

        2.3Immediate 立即  如果同时绑定同一个事件则执行一个

                 event.stopImmediatePropagation();

3.通过添加事件监听绑定事件

  添加事件监听

        p1:触发事件的类型  不能添加on   click

        p2:事件处理函数

        p3:true or false  如果第三个参数不传递  则默认为冒泡事件流

        如果为true 则为捕获事件流

 small.addEventListener("click", function () {
            console.log(" small ======= ");
        });

4.事件的代理（委托）

        本质 就是利用事件的冒泡

                把原本自己（li）要做的事情交给父元素ul来处理

event： 包含了当前点击的各类信息  位置  触发方式  是否按下alt

event.target：触发当前事件的元素 (点击的哪个元素);

event.currentTarget：事件绑定给了哪个元素；

event.type：事件的类型

 ul.onclick = function (e) {
            event.target.style.color = "red"

            console.log(event);// 包含了当前点击的各类信息  位置  触发方式  是否按下alt 

            console.log(event.target);// 触发当前事件的元素 (点击的哪个元素); li

            console.log(event.currentTarget);// 事件绑定给了哪个元素  ul

            console.log(event.type);// click
        }

        // ul.innerText += "<li>444444</li>";// 会导致事件注销  
        // three.js 处理3D的 
        var four = document.createElement("li");
        four.innerText = "4444444444";
        ul.appendChild(four);

5.事件绑定的方式

<div>点我</div>
    <main οnclick="fn()">再点我!!!</main>

    <!-- 4.可读性比较差 -->
    <main οnclick="console.log(1111);alert('警告')">再点我!!!</main>

    <script>
        var div = document.querySelector('div');

        // 1.
        div.onclick = function () {
            console.log(123)
        }
        //后者覆盖前者
        div.onclick = function () {
            console.log(456)
        }

        // 2. 可以添加多个  都会被执行
        div.addEventListener("click", function () {
            console.log(789);
        })

        div.addEventListener("click", function () {
            console.log(0000);
        })


        // 3.6.1
        function fn() {
            console.log("第三种方式")
        }

    </script>

6.多个按钮绑定同一个事件

第一种方式：可以进行参数传递 不可以写变量 只能传递具体的值
 

<div onclick="fn(10,20)" class="d1">d1</div>

    <div onclick="fn('abc')" class="d2">d2</div>

    <!-- abc 为一个变量 是不可以这么传递的 -->

    <!-- <div onclick="fn(abc)" class="d2">d2</div> -->
 function fn(a) {
            console.log(a)
            // if(document.querySelector(".d1") === event.target){
            //     console.log("d11111111111111111111111111");
            //     event.target.style.color = "blue";
            // }
            // if(document.querySelector(".d2") === event.target){
            //     console.log("d2222222222222222222222222");
            //     event.target.style.color = "red";
            // }
            event.target.innerText == "d1" ?  event.target.style.color = "blue" : event.target.style.color = "red";

        }

<h1>第二种方式:</h1>   

 <main class="m1"> m 1 </main>

    <main class="m2"> m 2 </main>
  var m1 = document.querySelector('.m1');
        var m2 = document.querySelector('.m2');

        m1.onclick = m2.onclick = function () {
            
            if(m1 === event.target){
                m1.style.color = "red";
            }
            if(m2 === event.target){
                m2.style.color = "blue";
            }
        }

7.鼠标和键盘的事件类型

单击：

  div.onclick = function () {

            console.log("click");

        }

  双击：

        div.ondblclick = function () {

            console.log("双击=----");

        }

鼠标按下 鼠标松开

 // down - up - click

        div.onmousedown = function (e) {

            // 可以进行区分 左右中健

            // 0 左  1 中 2 滚轮

            console.log("鼠标按下", e.button);

        }

        div.onmouseup = function () {

            console.log("鼠标松开");

        }

 不会冒泡 enter+leave

 div.onmouseenter = function () {

            console.log("鼠标进入");

        }

        div.onmouseleave = function () {

            console.log("鼠标离开");

        }

        div.onmousemove = function () {

            console.log("移动----");

        }

        main.onmouseenter = function () {

            console.log("main 鼠标进入");

        }

        main.onmouseleave = function () {

            console.log("mian 鼠标离开");

        }

 会冒泡 over+out

 div.onmouseover = function () {

            console.log('div over');

        }

        div.onmouseout = function () {

            console.log('div out');

        }

 键盘的输入  down - press - up

        document.onkeydown = function () {

            console.log("键盘的输入");

        }

        document.onkeyup= function (e) {

            console.log("键盘的抬起",e);

            console.log(e.key); // 获取输入的字符

            console.log(e.keyCode);// 获取字符的ASCII 值

        }

press 按下  非 alt shift  mate  ctrl 才有效

document.onkeypress = function () {

            console.log("键盘的press");

           

        }

阻止冒泡demo

 <style>
        .box{
            position: relative;
            height: 500px;
            background: pink;
        }
        span {
            float:  right;
            margin-right: 20px;
        }
        .mask{
            display: none;
            /* 主轴排列方式   居中 */
            justify-content: center;
            /* 交叉轴轴   居中 */
            align-items: center;

            position: absolute;
            top: 0;
            left: 0;
            background: lightblue;
            width: 100%;
            height: 500px;
        }
        .noLike{
            width: 250px;
            height: 250px;
            border-radius: 50%;
            line-height: 250px;
            text-align: center;
            background: lightcyan;
        }
        .active {
            /* flex 弹性布局
            6个 容器属性
            6个 元素属性
            */
            display: flex;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>X</span>
        <div class="mask">
            <div class="noLike">不喜欢</div>
        </div>
    </div>
    <script>
        var box = document.querySelector('.box');
        var close = document.querySelector('span');
        var mask = document.querySelector('.mask');
        var unlike = document.querySelector('.noLike');
        close.onclick = function () {
            event.stopPropagation();
            mask.classList.add("active");
        }
        unlike.onclick = function () {
            event.stopPropagation();
            mask.classList.remove("active");
        }
        box.onclick = function () {
            // bom   location 位置
            location.href = "http://www.baidu.com";
        }
    </script>