网页事件简述

一、事件

1.1 事件概述

事件是用户或浏览器执行的特定交互操作，如点击按钮、滚动页面、按下键盘等。事件在浏览器窗口中被触发，通常与窗口中的某个特定部分（如元素或HTML代码）相关联。

事件监听器用于监听这些事件。当事件发生时，浏览器会触发与之关联的事件处理器。这些事件处理器包含一段代码，旨在响应和处理所发生的事件。

我们通常使用 addEventListener() 方法或将事件监听器直接赋值给接口的 oneventname 属性来监听事件。注册事件处理器即定义响应事件的代码块，事件监听器监听事件发生并触发处理器来响应事件。虽然“事件监听器”和“事件处理器”有时会互换使用，但严格来说，监听器负责监控事件，处理器负责处理事件。

1.2 事件的分类

1.2.1 鼠标事件

鼠标事件是用户使用鼠标设备时触发的事件。这些事件包括但不限于：

• click：当用户点击某个元素时触发。
• dblclick：当用户双击某个元素时触发。
• mousedown：当用户按下鼠标按钮时触发。
• mouseup：当用户释放鼠标按钮时触发。
• mousemove：当鼠标指针在元素上移动时触发。
• mouseover：当鼠标指针移到某个元素上方时触发。
• mouseout：当鼠标指针移出某个元素时触发。

1.2.2 键盘事件

键盘事件是在用户通过键盘与页面交互时触发的事件。主要的键盘事件有：

• keydown：当用户按下键盘上的某个键时触发。
• keypress：当用户按下并保持某个键时触发，通常用于字符输入。
• keyup：当用户释放键盘上的某个键时触发。

1.2.3 焦点事件

焦点事件与元素的焦点状态有关，通常用于表单元素的处理。

• focus：当元素获得焦点时触发。
• blur：当元素失去焦点时触发。

1.2.4 表单事件

这些事件与表单元素的交互相关：

• submit：当用户提交表单时触发。
• change：当表单元素的值改变时触发。

1.2.5 其他事件

此外，还有一些特殊事件：

• load：当页面或图片等资源加载完成时触发。
• resize：当窗口大小发生变化时触发。
• scroll：当用户滚动页面时触发。

1.3 事件处理

事件处理的模式

事件处理主要有两种模式：内联模式和脚本模式。

内联模式

<div onclick='方法名()'></div>

在内联模式中，事件监听器直接嵌入在HTML标签中。内联事件处理中的 this 关键字通常指向 window 对象，除非传递了特定上下文。

脚本模式

document.querySelector('div').onclick = function() {
    // 操作
};

脚本模式的事件处理器是通过JavaScript直接绑定的，this 关键字指向调用事件的当前元素，而非全局的 window 对象。

1.4. addEventListener() 和 removeEventListener()

addEventListener() 是一种常用的事件绑定方法，允许我们将事件处理器绑定到特定元素的指定事件上。它接收三个参数：事件类型（如 "click"）、事件处理函数，以及一个可选的选项对象。

btn.addEventListener('click', function() {
    var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
    document.body.style.backgroundColor = rndCol;
});

对于更复杂的应用场景，我们还可以使用 removeEventListener() 方法来移除之前绑定的事件处理器，这在处理动态内容或需要解除事件监听时非常有用。

btn.removeEventListener('click', bgChange);

二、事件对象的属性

2.1 常见属性

2.1.1 type

• 描述：表示事件的类型，如 click、keydown 等。
• 示例：

  element.addEventListener('click', function(event) {
      console.log(event.type); // 输出 "click"
  });
  

2.1.2 target

• 描述：事件的目标节点，即触发事件的元素。
• 示例：

  element.addEventListener('click', function(event) {
      console.log(event.target); // 输出触发点击事件的元素
  });
  

2.1.3 currentTarget

• 描述：当前正在处理事件的元素。与 target 不同，currentTarget 总是指向绑定事件处理器的元素。
• 示例：

  element.addEventListener('click', function(event) {
      console.log(event.currentTarget); // 输出绑定了事件处理器的元素
  });
  

2.1.4 eventPhase

• 描述：指示事件流的当前阶段，有 3 个可能的值：
  • 0：无事件
  • 1：捕获阶段（事件向下传播）
  • 2：目标阶段（事件到达目标）
  • 3：冒泡阶段（事件向上传播）
• 示例：

  element.addEventListener('click', function(event) {
      console.log(event.eventPhase); // 输出事件流的当前阶段
  });
  

2.1.5 bubbles

• 描述：一个布尔值，指示事件是否冒泡。
• 示例：

  element.addEventListener('click', function(event) {
      console.log(event.bubbles); // true 表示事件冒泡，false 表示不冒泡
  });
  

2.1.6 cancelable

• 描述：一个布尔值，指示事件是否可以取消。
• 示例：

  element.addEventListener('click', function(event) {
      console.log(event.cancelable); // true 表示事件可以取消
  });
  

2.1.7 timestamp

• 描述：表示事件生成的时间戳，以毫秒为单位。
• 示例：

  element.addEventListener('click', function(event) {
      console.log(event.timestamp); // 输出事件生成的时间戳
  });
  

2.2 鼠标事件特有属性

2.2.1 clientX / clientY

• 描述：事件发生时鼠标指针相对于浏览器窗口左上角的水平和垂直坐标。
• 示例：

  element.addEventListener('click', function(event) {
      console.log(`X: ${event.clientX}, Y: ${event.clientY}`);
  });
  

2.2.2 pageX / pageY

• 描述：事件发生时鼠标指针相对于文档左上角的水平和垂直坐标。
• 示例：

  element.addEventListener('click', function(event) {
      console.log(`PageX: ${event.pageX}, PageY: ${event.pageY}`);
  });
  

2.2.3 screenX / screenY

• 描述：事件发生时鼠标指针相对于屏幕左上角的水平和垂直坐标。
• 示例：

  element.addEventListener('click', function(event) {
      console.log(`ScreenX: ${event.screenX}, ScreenY: ${event.screenY}`);
  });
  

2.2.4 altKey / ctrlKey / shiftKey / metaKey

• 描述：布尔值，表示事件发生时是否按下了 Alt、Ctrl、Shift 或 Meta 键。
• 示例：

  element.addEventListener('click', function(event) {
      console.log(`Alt: ${event.altKey}, Ctrl: ${event.ctrlKey}`);
  });
  

2.3 键盘事件特有属性

2.3.1 key

• 描述：返回事件触发时按下的键的值。
• 示例：

  document.addEventListener('keydown', function(event) {
      console.log(event.key); // 输出按下的键
  });
  

2.3.2 code

• 描述：返回事件触发时按下的键的物理按键码。
• 示例：

  document.addEventListener('keydown', function(event) {
      console.log(event.code); // 输出按键的物理码
  });
  

2.3.3 keyCode

• 描述：返回事件触发时按下的键的编码（已废弃，建议使用 key）。
• 示例：

  document.addEventListener('keydown', function(event) {
      console.log(event.keyCode); // 输出按键的编码
  });
  

2.4 触摸事件特有属性

2.4.1 touches

• 描述：返回一个 TouchList 对象，包含了当前所有触摸点的信息。
• 示例：

  element.addEventListener('touchstart', function(event) {
      console.log(event.touches); // 输出所有触摸点信息
  });
  

2.4.2 targetTouches

• 描述：返回一个 TouchList 对象，包含了当前与目标元素相关的触摸点的信息。
• 示例：

  element.addEventListener('touchstart', function(event) {
      console.log(event.targetTouches); // 输出目标元素的触摸点信息
  });
  

2.4.3 changedTouches

• 描述：返回一个 TouchList 对象，包含了自上次触摸事件以来更改的触摸点信息。
• 示例：

  element.addEventListener('touchstart', function(event) {
      console.log(event.changedTouches); // 输出更改的触摸点信息
  });
  

三、事件对象的方法

3.1 preventDefault()

• 描述：取消事件的默认行为。默认行为通常是浏览器的某种动作，如点击链接跳转，提交表单等。使用此方法可以阻止这些行为。
• 示例：

  element.addEventListener('click', function(event) {
      event.preventDefault(); // 阻止链接的默认跳转行为
  });
  

3.2 stopPropagation()

• 描述：阻止事件的进一步传播。通常，事件会在捕获和冒泡阶段传播，调用此方法可以阻止这种传播。
• 示例：

  element.addEventListener('click', function(event) {
      event.stopPropagation(); // 阻止事件冒泡或捕获
  });
  

3.3 stopImmediatePropagation()

• 描述：阻止事件的进一步传播，并阻止当前元素上其他相同类型的事件处理器被调用。
• 示例：

  element.addEventListener('click', function(event) {
      event.stop
  
  

ImmediatePropagation(); // 阻止事件的进一步传播，并阻止其他处理器

3.4 initEvent()

• 描述：初始化新创建的事件对象。此方法已经被废弃，现在使用 Event() 构造函数来创建事件。
• 示例：

  var event = document.createEvent('Event');
  event.initEvent('myEvent', true, true);
  document.addEventListener("myEvent",function() {
    alert("自定义事件的name属性：" + event.name);
  },false)
  element.dispatchEvent(event); // 手动触发事件
  
  

四、事件冒泡与捕获

事件冒泡（Event Bubbling）和事件捕获（Event Capturing）是事件在DOM树中传播的两种方式：

• 事件冒泡：事件从最内层的目标元素开始，向上传播到根元素。
• 事件捕获：事件从根元素开始，向下传播到最内层的目标元素。

// 捕获阶段
element.addEventListener('click', handler, true);
// 冒泡阶段
element.addEventListener('click', handler, false);

div.onclick = function(e) {
    e.stopPropagation(); // 阻止事件冒泡
};

阻止默认事件

有时，我们需要阻止事件的默认行为，例如阻止表单提交或链接跳转。我们可以使用 preventDefault() 方法来实现。

form.onsubmit = function(e) {
    e.preventDefault(); // 阻止表单提交
};

事件的兼容性处理

在处理事件时，不同浏览器对事件的支持可能有所不同。为了跨浏览器兼容，通常使用以下方式处理：

• 使用event对象获取事件信息时，需考虑IE浏览器的兼容性。
• 为事件添加处理程序时，考虑使用addEventListener和attachEvent的兼容性写法。

function addEvent(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
    } else {
        element["on" + type] = handler;
    }
}

5. 示例代码

// 监听点击事件
document.getElementById('myButton').addEventListener('click', function(event) {
    // 获取事件类型
    console.log('Event Type:', event.type);

    // 获取触发事件的元素
    console.log('Event Target:', event.target);

    // 获取鼠标在文档中的位置
    console.log('Mouse Position:', event.pageX, event.pageY);

    // 检查是否按下了 Ctrl 键
    if (event.ctrlKey) {
        console.log('Ctrl Key Pressed');
    }

    // 阻止默认行为和事件冒泡
    event.preventDefault();
}

---