名称	描述
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 的点击事件

Javascript -DOM 事件机制

事件组成

执行事件的步骤：

事件对象

事件对象常用的属性

常见的鼠标事件

常见键盘事件

焦点事件-FocusEvent

用户界面事件-UIEvent

常见的表单事件

DOM 2 级事件监听

相关推荐