Javascript -DOM 事件机制

最新推荐文章于 2024-09-21 18:46:25 发布

桃子耶耶

最新推荐文章于 2024-09-21 18:46:25 发布

阅读量150

点赞数 1

文章标签：前端 javascript 学习 ecmascript

本文链接：https://blog.csdn.net/m0_46677484/article/details/126510850

版权

事件组成

事件源事件类型事件处理程序我们也称为事件三要素

1.事件源：事件被触发的对象 -->按钮对象 ...

2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等…

3.事件处理程序：通过一个函数赋值的方式

执行事件的步骤：

1.获取事件源

2.注册事件（绑定事件）

3.采用函数赋值形式添加事件处理程序

事件对象

名称	描述
event	返回事件的状态

事件对象常用的属性

名称	描述
target	返回当前触发事件的元素
currentTarget	返回监听事件的元素
clientX	返回鼠标指针相对于浏览器的水平坐标
clientY	返回鼠标指针相对于浏览器的垂直坐标
pageX	返回鼠标指针相对于整个网页的水平坐标
pageY	返回鼠标指针相对于整个网页的垂直坐标
offsetX	返回鼠标指针相对于事件源元素的水平坐标
offsetY	返回鼠标指针相对于事件源元素的垂直坐标
charCode	通常用于 onkeypress 事件，返回用户按下按键对应的码值，区分大小写示例：按下键盘 a，对应的值是 97，按下键盘 A，对应的值是 65
keyCode	通常用于 onkeydown 和 onkeyup 事件，返回用户按下按键的码值，不区分大小写。示例：按下键盘 a 或 A，对应的值是 65

常见的鼠标事件

DOM 0 级事件监听方式：on + 事件名

名称	描述
onclick	监听鼠标单击事件
ondblclick	监听鼠标双击事件
onmousedown	监听鼠标按下事件
onmouseup	监听鼠标松开事件
onmousemove	监听鼠标移动事件
onmouseenter	监听鼠标移入事件，不存在事件冒泡
onmouseleave	监听鼠标离开事件，不存在事件冒泡
onmouseover	监听鼠标移入事件，存在事件冒泡
onmouseout	监听鼠标离开事件，存在事件冒泡
onmousewheel	监听鼠标滚轮事件

<!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>
    #d1{
      width: 300px;
      height: 300px;
      background-color: aqua;
    }
  </style>
</head>
<body>
  <div id="d1"></div>
  <script>
    var d1 = document.getElementById('d1');
    // 单击事件
    d1.onclick = function (event) {
      console.log('click');
      console.log(event);
    }
    // 双击事件
    d1.ondblclick = function () {
      console.log('dblclick');
    }
    // 鼠标移入事件
    d1.onmouseenter = function () {
      console.log('mouseenter');
    }
    // 鼠标移出事件
    d1.onmouseleave = function () {
      console.log('mouseleave');
    }
    // 鼠标在元素内部移动时触发
    d1.onmousemove = function () {
      console.log('mousemove');
    }
  </script>
</body>
</html>

常见键盘事件

DOM 0 级事件监听方式：on + 事件名

名称	描述
onkeydown	用户按下键盘上某个键时触发，而且持续按住会重复触发。
onkeypress	用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发。Esc 键也会触发这个事件。DOM3 Events 废弃了 keypress 事件，而推荐 textInput 事件。
keyup	用户释放键盘上某个键时触发

焦点事件-FocusEvent

DOM 0 级事件监听方式：on + 事件名

名称	描述
blur	当元素是焦点时触发。这个事件不冒泡，所有浏览器都支持
focus	当元素获得焦点时触发。事件不冒泡，所有的浏览器都支持
focusin	当元素获得焦点时触发，这个事件是focus的冒泡版
focusout	当元素失去焦点时触发。这个事件时blur的冒泡版

<input type="text" id="inp1">
<script>
  var inp1 = document.getElementById('inp1');
  // 失去焦点触发
  inp1.onblur = function () {
    console.log('失去焦点');
    console.log(this.value);
  }
  // 获得焦点触发
  inp1.onfocus = function () {
    console.log('获得焦点');
  }
</script>

用户界面事件-UIEvent

DOM 0 级事件监听方式：on + 事件名

名称	描述
load	监听页面或图像加载完成事件
onunload	监听用户退出页面事件
select	在文本框（<input>或 textarea）上当用户选择了一个或多个字符时触发。
resize	在 window 或窗格上当窗口或窗格被缩放时触发。
scroll	当用户滚动包含滚动条的元素时在元素上触发。<body>元素包含已加载页面的滚动条。大多数 HTML 事件与 window 对象和表单控件有关。

常见的表单事件

DOM 0 级事件监听方式：on + 事件名

名称	描述
onchange	当表单元素的内容发生变化所触发的事件
onfocus	当元素获得焦点时触发的事件，例如：tab 键或者点击鼠标
onblur	当元素失去焦点时触发的事件
onsubmit	当提交表单时触发的事件
onreset	当重置表单时触发的事件

DOM 2 级事件监听

名称

描述

addEventListener()

监听事件并添加到指定的元素
1、方法中接收三个参数如下：
（1）第一个参数是字符串，表示要监听的事件名，必须传入
（2）第二个参数是函数，指定事件触发时要执行的函数，必须传入
（3）第二个参数是布尔值，指定事件是否在捕获或冒泡阶段执行，可选
2、示例：oBox.addEventListener('click', function() {}, true) 在捕获阶段监听 oBox 的点击事件