JavaScript事件

2022-10-09 本文已影响0人 t遇见

一、事件概述
（1）认识事件
事件Event，描述了根据用户在网页中的操作行为，执行一定的功能的操作过程
（2）事件的绑定
网页中事件的绑定方式，常见的有三种：

标签属性绑定
JavaScript对象属性绑定
标准事件绑定函数addEventListener

<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
  <h3>1、标签绑定</h3>
  <!-- 
    通过标签的事件属性，指定一个执行函数
    当指定的事件发生时，对应的函数就会执行
    onclick 单击事件
    当用户点击了当前按钮，对应的hanlder()函数就会执行
    注意：不能同时绑定多个事件函数；只有第一个会生效
  -->
  <button onclick="handler()"
          onclick="handler2()">点击我试试</button>
  <h3>2、对象绑定方式</h3>
  <button id="btn">对象来了</button>
  <h3>3、事件标准绑定方式</h3>
  <button id="my-btn">标准语法来了</button>
  <script>
    // 1-1 事件处理函数
    function handler() {
      alert("你点我干吗，今天又不休息!!!")
    }
    function handler2() {
      alert("没有关系，今天已经周三了..")
    }
    // 2-1 对象绑定函数
    var _btn = document.getElementById("btn")
    // 通过对象的事件属性，给事件添加一个处理函数
    // 事件名称，大小写敏感(不能写错onClick 和onclick是两个不同的东西)
    // 不能同时绑定多个事件处理函数
    // 如果写了多个事件处理函数，最后一个生效（解释型特点）
    _btn.onclick = function() {
      alert("还有两天本周又结束了...")
    }
    _btn.onclick = function() {
      alert("提前祝大家周末愉快...")
    }
    // 3-1 标准事件绑定方式
    var _myBtn = document.getElementById("my-btn")
    // 通过固定函数，给标签对象绑定事件
    // addEventListener: add 增加  Event 事件 Listener 监听
    // 标准语法下：事件名称不需要添加on单词，单击事件click
    // 标准语法下：可以给一个标签对象，添加多个相同事件
    _myBtn.addEventListener("click", function() {
      alert("本周学习目标：语法进阶")
    })
    _myBtn.addEventListener("click", function() {
      alert("本周锻炼：开始出现自己的编程思路")
    })
  </script>
</body>
</html>

（3）事件的取消
① 对象属性绑定的事件，取消

_btn.onclick = function() {...}
// 取消事件
_btn.onclick = null

② 标准语法绑定事件，取消

function handler() {
  // 事件处理函数
}
// 绑定事件
_btn.addEventListener("click", handler)

// 取消指定事件
_btn.removeEventListener("click", handler)

（4）this关键字

// 1、全局函数中的this，指向浏览器窗口对象
function fn() {
  // 普通声明的函数，this指向的是浏览器窗口对象Window
  console.log("this:", this)
}
// 函数的调用
// fn()
// window.fn()
// 以前弹窗
// alert("这是一个弹窗")
// window.alert("这是一个浏览器弹窗")

// 2、事件函数
var _btn = document.getElementById("btn")
_btn.onclick = function() {
  // 事件操作函数中，this指向当前操作标签
  console.log("事件函数this:", this)
}
// 3、标准语法
var _btn2 = document.getElementById("btn2")
_btn2.addEventListener("click", function() {
  // 事件函数中，this指向的是当前操作标签
  console.log("addEventListener this:", this)
})

（5）常见网页事件

事件	名称	描述
`onclick`	单击事件	鼠标左键点击
`ondblclick`	双击事件	鼠标左键双击

`onmouseenter`	鼠标进入	鼠标光标从元素外移动到元素上
`onmouseover`	鼠标悬浮	鼠标光标在目标元素上
`onmouseleave`	鼠标离开	鼠标光标从元素上移动到元素外

`onkeydown`	按键按下	键盘上任意按键，按下时触发
`onkeyup`	按键抬起

`oncopy`	复制
`oncut`	剪贴
`onparse`	粘贴

`onload`	网页加载	网页第一次在浏览器中加载，加载完成时触发
`onscroll`	滚动条	网页中滚动条滚动时触发
`onresize`	窗口尺寸变化	浏览器可视窗口大小发生变化时触发

鼠标事件

image.png
键盘事件

image.png
触摸事件
触摸touch事件说明
touchstart 手指触摸到一个 DOM 元素时触发
touchmove 手指在一个 DOM 元素上滑动时触发
touchend 手指从一个 DOM 元素上移开时触发
表单事件

image.png
过渡事件
过渡事件触发条件
ontransitionend 在过渡完成时触发
动画事件
动画事件触发条件
onanimationend 在动画结束播放时触发
onanimationiteration 在动画重复播放时触发
onanimationstart 在动画开始播放时触发
（6）事件对象[重点]
① 什么是事件对象？
事件对象event，描述了一个正在发生的事件行为！可以在事件的处理函数中直接获取到并通过事件对象操作某些数据！
② 如何获取事件对象

<body>
  <button onclick="fn()">获取事件对象</button>
  <script>
    // 添加一个单击事件
    // 如果没有给事件函数传递参数，默认第一个参数就是事件对象
    function fn(e) {
      // 事件对象，存在兼容性问题，获取的时候需要判断赋值
      var e = e || event
      console.log("事件对象：", e)
    }
</script>
</body>

③ 事件对象的重要属性

属性	描述
`altKey`	操作事件时有没有按下`Alt`按键
`ctrlKey`	操作事件时有没有按下`Ctrl`按键
`shiftKey`	操作事件时有没有按下`shift`按键
`clientX / clientY`	鼠标指针相对于浏览器可视窗口左上角定位
`pageX / pageY`	鼠标指针相对于网页文档左上角定位
`offsetX / offsetY`	鼠标指针相对于操作的标签左上角的定位
`screenX / screenY`	鼠标指针相对于电脑屏幕左上角的定位
`layerX / layerY`	了解、鼠标指针相对于定位父元素/body 左上角的定位
`x / y`	了解，鼠标指针相对于父文档左上角的定位

④ 事件执行过程[3个阶段]
原生JavaScript语法中，规范了事件的执行过程，区分为三个阶段

捕获阶段：查询那个目标标签被点击
目标阶段：被操作的标签上事件触发，并执行对应的函数
冒泡阶段：标签上的事件触发完成，将事件继续向父标签传递，一直到根标签
⑤ 事件-阻止冒泡
实际项目开发中，事件的冒泡是一个很重要的功能，但是在某些特效中需要阻止冒泡：也就是具体目标元素上的事件一旦触发，不允许事件继续向上冒泡，会影响网页特效
原生JavaScript中提供了阻止冒泡的语法，通过事件对象进行操作：

// 固定语法
if(event.stopPropagation) {
  event.stopPropagation()  // 通用阻止事件冒泡的方式
} else {
  event.cancelBubble = true  // 兼容IE系列浏览器阻止冒泡的方式
}

⑥ 事件-阻止默认行为
给超链接标签，添加单击事件；发现事件触发的同时页面也发生了跳转；
项目中的某些特效开发过程中，需要这样的行为按照代码执行逻辑发生，而不是跟随标签自动产生！
原生JavaScript语法中，提供了阻止默认行为的操作方式：

if(e.preventDefault) {
  e.preventDefault()            // 传统浏览器阻止标签默认行为
} else {
  e.returnValue = false   // IE系列浏览器阻止标签默认行为
}

JavaScript事件

猜你喜欢

热点阅读