JavaScript进阶之事件_javascript m端事件-CSDN博客

本文链接：https://blog.csdn.net/weixin_54847388/article/details/135477655

事件简介

事件：在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮

事件监听

让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件。比如：鼠标经过显示下拉菜单、点击可以播放轮播图等等

语法：元素对象.addEventListener(‘事件类型’, 要执行的函数)

<button>点击</button>
<script>
    // 需求：点击了按钮，弹出一个对话框
    // 1.事件源  按钮
    // 2.事件类型  点击鼠标  click
    // 3.事件处理程序  弹出对话框
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      alert('你好~~')
    })
</script>

注意事项：
事件类型要加引号
函数是点击之后再执行，每次点击都会执行一次

事件监听三要素

事件源

触发事件的DOM元素

事件类型

触发方式，例如：鼠标单击click、鼠标经过mouseover

事件调用函数

触发事件要做的事情

事件监听版本

DOM L0

语法：事件源.on事件 = function() {}

DOM L2

语法：事件源.addEventListener(事件, 事件处理函数)

二者区别

on方式会被覆盖
addEventListener方式可绑定多次，拥有事件更多特性，推荐

事件类型

鼠标事件

鼠标触发
1.click 鼠标点击
2.mouseenter 鼠标经过
3.mouseleave 鼠标离开

<div></div>
<script>
    const div = document.querySelector('div')
    // 鼠标经过
    div.addEventListener('mouseenter', function () {
      console.log('我来了')
    })
    // 鼠标离开
    div.addEventListener('mouseleave', function () {
      console.log('我走了')
    })
</script>

焦点事件

表单获得光标
1.focus 获得焦点
2.blur 失去焦点

<input type="text">
<script>
    const input = document.querySelector('input')
    input.addEventListener('focus', function () {
      console.log('有焦点触发')
    })
    input.addEventListener('blur', function () {
      console.log('失去焦点触发')
    })
</script>

键盘事件

键盘触发
1.Keydown 键盘按下触发
2.Keyup 键盘抬起触发

<input type="text">
<script>
    const input = document.querySelector('input')
    // 键盘事件
    input.addEventListener('keydown', function () {
      console.log('键盘按下')
    })
    input.addEventListener('keyup', function () {
      console.log('键盘弹起')
    })
</script>

文本事件

表单输入触发
input 用户输入事件

<input type="text">
<script>
    const input = document.querySelector('input')
    // 用户输入文本事件  input
    input.addEventListener('input', function () {
      console.log(input.value)
    })
</script>

事件流

事件流简介

事件流是指事件完整执行过程中的流动路径

两个阶段：
事件捕获——从大到小
事件冒泡——从小到大

事件捕获

从DOM的根元素开始去执行对应的事件（从外到里）

事件捕获需要写对应代码才能看到效果，默认是不存在的

语法：DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
注意：addEventListener第三个参数传入true代表是捕获阶段触发（很少使用），若传入false代表冒泡阶段触发，默认是false

事件冒泡

当一个元素触发事件时，会依次向上调用所有父级元素的同名事件

注意：事件冒泡是默认存在的

阻止冒泡

问题

因为默认就有冒泡模式的存在，所有容易导致事件影响到父级元素

需求

如果想把事件限制在当前元素内，就需要阻止事件冒泡

前提

阻止事件冒泡需要拿到事件对象

语法：事件对象.stopPropagation()
此方法可以阻断事件流动传播，对冒泡阶段和捕获阶段都有效

解绑事件

on事件方式
直接使用null覆盖就可以实现事件的解绑

<button>点击</button>
<script>
    const btn = document.querySelector('button')
    btn.onclick = function () {
      alert('点击了')
      // L0 事件移除解绑
      btn.onclick = null
    }
</script>

addEventListener方式
必须使用：removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])

<button>点击</button>
<script>
    const btn = document.querySelector('button')
    function fn() {
      alert('点击了')
    }
    btn.addEventListener('click', fn)
    btn.removeEventListener('click', fn)
</script>

阻止元素默认行为

在某些情况下需要阻止默认行为的发生
比如：阻止链接的跳转、表单域的跳转

语法：e.preventDefault()

<form action="http://www.itcast.cn">
    <input type="submit" value="免费注册">
</form>
<a href="http://www.baidu.com">百度一下</a>
<script>
    const form = document.querySelector('form')
    form.addEventListener('submit', function (e) {
      // 阻止默认行为  提交
      e.preventDefault()
    })
    const a = document.querySelector('a')
    a.addEventListener('click', function (e) {
      e.preventDefault()
    })
</script>

事件委托

利用事件流的特征解决一些开放需求的知识技巧

原理

利用事件冒泡的特点。给父元素注册事件，当触发子元素时，会冒泡到父元素身上，从而触发父元素的事件

实现

语法：事件对象.target.tagName 可以获得真正触发事件的元素

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <p>不需要变色</p>
</ul>
<script>
    // 点击每个小li  当前li 文字变为红色
    // 按照事件委托的方式
    // 1. 获得父元素
    const ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
      // 需求：只要点击li才有效果
      if (e.target.tagName === 'LI') {
        e.target.style.color = 'red'
      }
    })
</script>

优点

减少注册次数，可以提高程序性能

其他事件

页面加载事件

事件名：load

加载外部资源（图片、外联CSS、JavaScript等）完毕时触发的事件

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 等待页面所有资源加载完毕，就回去执行回调函数
    window.addEventListener('load', function () {
      const btn = document.querySelector('button')
      btn.addEventListener('click', function () {
        alert('11')
      })
    })
  </script>
</head>

<body>
  <button>点击</button>
</body>

事件名：DOMContentLoaded

当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // 执行的操作
    })
  </script>
</head>

<body>
  <button>点击</button>
</body>

页面滚动事件

事件名：scroll
监听整个页面滚动

window.addEventListener('scroll', function () {
	// 执行操作
}

获取位置

1.scrollLeft和scrollTop（属性）：获取被卷去的大小；获取元素内容往左、往上滚出去看不到的距离；值是可读可写的
2.scrollTop（常用）：被卷去的头部大小
3.获取html元素写法：document.documentElement
在开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

window.addEventListener('scroll', function () {
	// document.documentElement 是html元素获取方式
	const n = document.documentElement.scrollTop
	console.log(n)

滚动到指定的坐标（了解）：

scrollTo()方法
语法：元素.scrollTo(x, y)
举例：让页面滚动到y轴1000像素的位置——window.scrollTo(0, 1000)

页面尺寸事件

事件名：resize

在窗口尺寸改变的时候触发事件
检测屏幕宽度
clientWidth
clientHeight
注意：包含padding，不包含border

<div></div>
<script>
    const div = document.querySelector('div')
    console.log(div.clientWidth)
    window.addEventListener('resize', function () {
      console.log(1)
    })
</script>