day08：事件

最新推荐文章于 2024-07-18 11:48:33 发布

Laker 23

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量824

点赞数

分类专栏： # JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_51667621/article/details/129699769

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

总结：
1.动态创建元素案例，同时优化了一个思想，站在内存性能优化的角度去考虑问题
2.点击按钮创建表格
3.讲解元素绑定事件，三种方式：
事件源.on事件类型=事件处理函数
事件源.addEventListener("没有on的事件类型“，事件处理函数，false）
事件源.attachEvent（“有on的事件类型”，事件处理函数）

一、第一种解绑事件（以on开头）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="绑定事件" id="btn1">
    <input type="button" value="解绑事件" id="btn2">
    <script src="publick.js"></script>
    <script>
        //事件源.on事件名称=事件处理函数
        my$("btn1").onclick = function(){
            console.log("我是绑定事件，今天大家继续给力");
        }
        //用什么事件绑定，就用什么事件解绑
        my$("btn2").onclick = function(){
            my$("btn1").onclick = null;//这个就表示解绑了(注意这个只能解绑on事件)
        }
    </script>
</body>
</html>

总结：
1、事件源.on事件名称 = 事件处理函数
2、事件源.on事件名称 = null
解绑之后绑定事件就不起作用了

二、第二种解绑事件

第二种绑定事件：
绑定事件：事件源.addEventListener(“没有on的事件类型”,命名函数,false)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="绑定事件" id="btn1">
    <input type="button" value="解绑事件" id="btn2">
    <script src="publick.js"></script>
    <script>
        
        // my$("btn1").addEventListener("click",function(){
        //     console.log("我是第一个事件");
        // },false);
        // my$("btn1").addEventListener("click",function(){
        //     console.log("我是第二个事件");
        // },false);

        // // 点击第二个按钮，解绑第一个按钮的第一个点击事件
        // my$("btn2").onclick = function(){
        //     my$("btn1").removeEventListener("click",function(){
        //         console.log("我是第一个事件");
        //     },false);
        // }

        // 抽离函数
        // 语法公式：事件源.addEventListener("没有on的事件类型",命名函数,false)
       
        function f1(){
            console.log("我是第一个事件");
        }
        function f2(){
            console.log("我是第二个事件");
        }

        my$("btn1").addEventListener("click",f1,false);
        my$("btn1").addEventListener("click",f2,false);

        // 点击第二个按钮把第一个按钮的第一个点击事件解绑
        my$("btn2").onclick = function(){
            my$("btn1").removeEventListener("click",f1,false);
        }

        // 总结：命名函数是可以解绑的
    </script>
</body>
</html>

三、第三种解绑事件

第三种绑定事件语法：
事件源 .attachEvent(“on事件类型”,命名函数) — 绑定事件
事件源.detachEvent(“on事件类型”,命名函数) — 解绑事件

注意:我们解绑的时候必须使用命名函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="绑定事件" id="btn1">
    <input type="button" value="解绑事件" id="btn2">
    <script src="publick.js"></script>
    <script>
        function f1(){
            console.log("这是第一个事件");
        }
        function f2(){
            console.log("这是第二个事件");
        }

        my$("btn1").attachEvent("onclick",f1);//ie等低版本浏览器使用的
        my$("btn1").attachEvent("onclick",f2);//ie等低版本浏览器使用的

        // 点击第二个按钮，把第一个按钮的第一个事件解绑
        my$("btn2").onclick = function(){
            my$("btn1").detachEvent("onclick",f1);
        }

        /* 
        总结：我们有三种绑定事件，就有对应的三种解绑事件---留给面试官
        */
    </script>
</body>
</html>

四、事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #dv1{
            width: 300px;
            height: 200px;
            background-color: red;
        }
        #dv2{
            width: 250px;
            height: 150px;
            background-color: greenyellow;
        }
        #dv3{
            width: 200px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div id="dv1">
        <div id="dv2">
            <div id="dv3"></div>
        </div>
    </div>
    <script src="publick.js"></script>
    <script>
        /* 
        事件冒泡:一定有盒子嵌套盒子,如果对里面的盒子做了点击事件,外面的盒子也有和里面的盒子相同事件,那么外面的盒子也会被触发--这种就是典型的事件冒泡

        满足条件两个
        1、首先有盒子嵌套，盒子嵌套盒子
        2、每个盒子身上都有相同的点击事件
        */
       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>
</html>

总结： 这个就是典型的事件冒泡—就是触发了里面的盒子的点击事件，外面的盒子也被触发了

小小面试题：

document.body.onclick = function(){
	//因为事件冒泡了，所以body也被触发了
    console.log("看看我的body有没有被触发");
}
//body没有高度，内容多高body就有多高

五、阻止事件冒泡

事件冒泡:一定有盒子嵌套盒子,如果对里面的盒子做了点击事件,外面的盒子也有和里面的盒子相同事件,那么外面的盒子也会被触发–这种就是典型的事件冒泡

满足两个条件：
1、首先有盒子嵌套，盒子嵌套盒子
2、每个盒子身上都有相同的点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #dv1{
            width: 300px;
            height: 200px;
            background-color: red;
        }
        #dv2{
            width: 250px;
            height: 150px;
            background-color: greenyellow;
        }
        #dv3{
            width: 200px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div id="dv1">
        <div id="dv2">
            <div id="dv3"></div>
        </div>
    </div>
    <script src="publick.js"></script>
    <script>
        
       //阻止事件冒泡e.stopPropagation() 和 window.event.cancelBubble = true; IE专有的
       my$("dv1").onclick = function(){
           console.log(this.id);
       }

       my$("dv2").onclick = function(e){
           console.log(this.id);
           e.stopPropagation();//给火狐和谷歌
           window.event.cancelBubble = true; //给IE用的  

       }

       my$("dv3").onclick = function(e){//event--事件对象 默认的可以简写为e
           console.log(this.id);
            //console.log(arguments.length);1 有个默认的事件对象 event ---简写 e
            // console.log(e);
            e.stopPropagation();//谷歌和火狐浏览器都兼容的--阻止事件冒泡
            window.event.cancelBubble = true;//给IE用 专有的
       }
    
    </script>
</body>
</html>

六、事件冒泡的应用（事件委托）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>

<!-- 
网上搜的故事 再通俗点：就是自己的事不想干，叫它爸爸，甚至爷爷、甚至祖先来干。或者拿取快递来比喻都行
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。

事件委托----他还有个名字叫事件代理
-->

    <ul id="ul">
       <li>西施</li>
       <li>貂蝉</li>
       <li>昭君</li>
       <li>凤姐</li>
       <li>芙蓉姐姐</li>
   </ul>
   <script src="publick.js"></script>
   <script>
       // 事件委托--也叫做事件代理---（事件冒泡的应用）
       my$("ul").onclick = function(e){//默认的事件对象event的简写e
           // console.log(this);
           // console.log(e.target);//e.target就是我们真正的目标
           var target = e.target;
           target.style.backgroundColor = "hotpink";
       }
   </script>
</body>
</html>

总结：核心思想：把事件委托给了ul，他的父级，然后通过e.target 找到真正的目标–这种实现过程就是我们的事件委托。

七、事件的三个阶段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #dv1{
            width: 300px;
            height: 200px;
            background-color: red;
        }
        #dv2{
            width: 250px;
            height: 150px;
            background-color: greenyellow;
        }
        #dv3{
            width: 200px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div id="dv1">
        <div id="dv2">
            <div id="dv3"></div>
        </div>
    </div>
    <script src="publick.js"></script>
    <script>
       var objs = [my$("dv3"),my$("dv2"),my$("dv1")];
       //for循环已经会了，---forEach 也是遍历循环 跟for一样
    //    for(var i = 0; i < objs.length; i++){
    //        objs[i].onclcik
    //    }
    // forEach()语法格式
    // forEach(function(ele){element ---元素 可以简写ele})
    objs.forEach(function(ele){//element --- 元素 简写ele
        ele.addEventListener("click",function(e){//event 简写e
            console.log(this.id+ "==========="+e.eventPhase);//e.eventPhase为了检测事件三个阶段分别代表什么数字
        },false);//false ---就是冒泡(就两个布尔值true和false)---true代表是捕获，false代表是冒泡
    });
    </script>
</body>
</html>

总结： 事件有三个阶段：要么是冒泡触发的，要么是捕获触发，冒泡和捕获不会同时触发
true代表捕获，false代表冒泡—工作里面推荐大家使用冒泡(就是false，true相对用的少)

详细讲解事件的三个阶段：这个被问的机率非常大
第一个阶段叫做事件捕获： 用数字代表就是1(如果你看到了数字1就代表的是事件捕获)–从外往里
第二阶段叫做目标阶段： 用数字代表就是2(如果你看到了数字2就代表的是目标阶段)–执行当前的点击元素
第三个阶段叫做冒泡： 用数字代表就是3(如果你看到了数字3就代表了是冒泡阶段)---- 从里到外