Js——事件

最新推荐文章于 2024-07-08 10:04:44 发布

小孩不可以吃鱼

最新推荐文章于 2024-07-08 10:04:44 发布

阅读量65

点赞数

分类专栏：前端笔记——JS 文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/qq_63654439/article/details/123239333

版权

前端笔记——JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

内容描述

1、绑定事件

1）addEventListener("eventType"，fun)

2) element.onEventType = fun

区别：

addEventListener在同一元素上的同一事件类型添加多个事件，不会被覆盖，而onEventType会覆盖
addEventListener可以设置元素在捕获阶段触发事件，而onEventType不能

2、事件流

三个div嵌套，都绑定click事件，点击最内层的元素，事件从内到外都执行

事件捕获与事件冒泡：

默认情况下，事件会在冒泡阶段执行

addEventListener（eventType，fun，boolean） // 默认false冒泡阶段触发；true：捕获阶段触发

阻止事件冒泡（e.stopPropagation）

<!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>
    .box {
      width: 200px;
      height: 200px;
      background-color: red;
      display: none;
    }
  </style>
</head>

<body>
  <button class="open">打开</button>
  <div class="box">
    <button class="close">关闭</button>
  </div>

  <script>
    let open = document.querySelector(".open")
    let box = document.querySelector(".box")
    let close = document.querySelector(".close")
    open.onclick = function () {
      box.style.display = "block"
    }
    close.onclick = function (e) {
      box.style.display = "none"
      // 阻止事件冒泡（重新打开盒子的时候盒子会保留上次修改的属性）
      e.stopPropagation()
    }
    box.onclick = function () {
      this.style.background = "green"
    }
  </script>
</body>

</html>

事件默认行为

为一个可以跳转到其他页面的a标签设置点击事件

去掉事件默认行为

e.preventDefault()

return false

3、事件委托

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

<body>
  <input type="text">
  <button>添加</button>
  <ul class="fruit-list">
    <li>苹果</li>
    <li>香蕉</li>
    <li>鸭梨</li>
  </ul>
  <script>
    let btn = document.querySelector('button')
    let ul = document.querySelector('.fruit-list')
    let inp = document.querySelector('input')
    btn.onclick = function () {
      let value = inp.value
      let li = document.createElement('li')
      let txt = document.createTextNode(value)
      li.appendChild(txt)
      ul.appendChild(li)
    }
    // 事件委托
    ul.onclick = function (e) {
      ul.removeChild(e.target)
    }
  </script>
</body>

4、事件类型

1、鼠标事件

2、键盘事件

// 完成键盘控制效果 按下按键控制盒子移动  

<div class="box"></div>
  <script>
    let box = document.querySelector('.box')
    document.onkeydown = function (e) {
      let code = e.keyCode
      switch (code) {
        case 37: box.style.left = box.offsetLeft - 5 + "px"; break
        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>

3、触屏事件

    // 手指按下
    box.ontouchstart = function () {
      console.log('start')
    }
    // 手指离开
    box.ontouchend = function () {
      console.log('end')
    }
    // 手指滑动
    box.ontouchmove = function () {
      console.log('login')
    }

练习：

1、阻止事件冒泡

1）点击应该按钮，显示一个容器盒子

2）点击容器，容器背景颜色变化

3）点击容器中的按钮，隐藏容器

2、实现一个水果列表，让后添加的元素也可以被删除（事件委托）

3、通过上下左右键控制元素移动

小孩不可以吃鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js——事件

内容描述1、绑定事件1）addEventListener("eventType"，fun)2) element.onEventType = fun区别：addEventListener在同一元素上的同一事件类型添加多个事件，不会被覆盖，而onEventType会覆盖 addEventListener可以设置元素在捕获阶段触发事件，而onEventType不能2、事件流三个div嵌套，都绑定click事件，点击最内层的元素，事件从内到外都执行事件捕获与事件冒泡：默认情.
复制链接

扫一扫