晓舟报告学习笔记——事件绑定、事件委托以及事件类型

最新推荐文章于 2024-07-31 16:33:32 发布

打怪进阶选手安好

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量166

点赞数

分类专栏： JS基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_43573285/article/details/119757127

版权

JS基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

事件绑定

事件绑定

一、绑定事件

1  element.onEventType = function(){

} //内联形式

2  addEventListener("eventType",function{

})//外联形式

区别：

两种方法都能实现相同的效果，能成功的为按钮绑定了点击事件，但区别是使用addEventLitener可以无限制的为元素绑定事件，而内联事件后面的会覆盖前面的示例连接。

a addEventListener在同一个元素上的同一个事件类型添加多个事件，不会被覆盖，而onEventType会覆盖。

<body>

  <button>按钮</button>

    <script>

    let btn = document.querySelector("button");

    // btn.onclick = function(){

    //   console.log("hello");

    // }

    // btn.onclick = function(){

    //   console.log("js"); 

    // }

    //只输出js 前面的点击事件被覆盖



    btn.addEventListener("click",function(){

      console.log("hello");

    })

    btn.addEventListener("click",function(){

      console.log("JS");

    })

    //此时两个都输出,没有覆盖

    

  </script>

</body>

b addEventListener可以设置元素在捕获阶段触发事件，而onEventType不能。

二、事件冒泡与事件捕获

当事件触发的时候，牵涉事件捕获以及事件冒泡。事件流有事件捕获阶段和事件冒泡阶段，事件捕获阶段是从最外层元素开始一层一层进入到事件目标，到达事件目标后，进入事件冒泡阶段，事件从最内层流向最外层，事件默认情况下在冒泡阶段触发。

addEventListener(eventType,function(){},boolean);//默认false:冒泡阶段出发，true：捕获阶段出发，根据参数的选择有关

无特殊情况，我们的事件都是在冒泡阶段出发的！！！

阻止事件冒泡

代码示例

//事件冒泡 事件捕获 以及事件冒泡的阻止

      let show = document.querySelector(".show");

      let close = document.querySelector(".close");

      let box = document.querySelector(".box");

      show.onclick = function(){

        box.style.display = "block"; //显示出来

      }

      close.onclick = function(event){

        box.style.display = "none";

        event.stopPropagation();



      }



      box.onclick = function(){

        this.style.backgroundColor = "red";

      }

      //此时的结果是,单纯点击关闭然后再点击显示的时候,盒子的颜色发生了改变

      //因为此时是,box下面有一个Button按钮,对应一个close,所以当出发close的时候,此时事件冒泡,执行了box.onclick

      //则此时的box颜色已经发生改变,所以要阻止事件冒泡

取消事件默认行为

代码示例

 //阻止事件默认行为

      let a = document.querySelector("a");

      a.onclick = function(event){

        console.log("hello"); //此时既输出了hello 也及逆行了网页默认的跳转行为

        //进行阻止,此时需要对事件添加操作,则添加event形式参数

        // event.preventDefault();//此时仅仅输出hello 

        //或者return false; 也可以阻止事件默认行为

        return false;



      }

事件委托

通过e.target将子元素的事件委托给父级处理

事件类型

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>键盘事件</title>

    <style>

    .box{

      width: 100px;

      height: 100px;

      position:absolute;

      top:100px;

      left: 100px;

      background-color: red;

        }

  </style>

</head>

<body>

    <div class="box"></div>

    <script>

    let box = document.querySelector(".box");

    // console.log(box.offsetTop); 可以获取左侧的偏移量 设置的100Px

    document.onkeydown = function(e){

      // console.log(e.keyCode); Q确定上下左右的按键编码 左37 右39 上38 下40

      //实现按键上左下右 控制盒子的运动

      let code = e.keyCode;

      switch(code){

        case 37:box.style.left = box.offsetLeft -5 +"px";break; //左键向左减少5Px

        case 38:box.style.top = box.offsetTop -5 +"px";break;

        case 39:box.style.left = box.offsetLeft +5 +"px";break;

        case 40:box.style.top = box.offsetTop +5 +"px";break;

      }

    }



  </script>

  

</body>

</html>

3 触屏事件

<!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>触屏事件</title>

    <style>

    .box{

      width: 100px;

      height: 100px;

      position:absolute;

      top:100px;

      left: 100px;

      background-color: red;

        }

  </style>

</head>

<body>

    <div class="box"></div>

    <script>

    let box = document.querySelector(".box");

    box.ontouchstart = function(){

      console.log("touch start");

    }

    box.ontouchend = function(){

      console.log("touch end");

    }

    box.ontouchmove = function(){

      console.log("滑动");

    }



  </script>

</body>

</html>

打怪进阶选手安好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
晓舟报告学习笔记——事件绑定、事件委托以及事件类型

文章目录事件绑定一、绑定事件二、事件冒泡与事件捕获阻止事件冒泡代码示例取消事件默认行为代码示例事件委托事件类型1 鼠标事件2 键盘事件3 触屏事件事件绑定一、绑定事件1 element.onEventType = function(){} //内联形式2 addEventListener("eventType",function{})//外联形式区别：两种方法都能实现相同的效果，能成功的为按钮绑定了点击事件，但区别是使用addEventLitener可以无限制的为元素绑定事件，而
复制链接

扫一扫

专栏目录