JavaScript Event学习第七章 事件属性

下面给你详细讲解 JavaScript Event 学习第七章 事件属性的完整攻略。

事件属性

事件属性是针对事件对象提供的属性，通过这些属性可以获取事件的各种信息。下面是常见的事件属性：

1. type

type属性用于返回事件类型，是必需的。例如：

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

2. target

target属性用于返回触发事件的目标对象。例如：

// 获取一个按钮元素，并添加点击事件
var button = document.getElementById('button');
button.addEventListener('click', function(event) {
    console.log(event.target); // 输出该按钮元素
});

3. currentTarget

currentTarget属性用于返回添加事件监听器的元素对象。例如：

var ul = document.querySelector('ul');
ul.addEventListener('click', function(event) {
    console.log(event.currentTarget); // 输出 ul 元素对象
});

4. eventPhase

eventPhase属性用于返回事件的阶段（捕获阶段/目标阶段/冒泡阶段）。例如：

document.addEventListener('click', function(event) {
    console.log(event.eventPhase); // 输出事件阶段
});

注意：事件阶段是针对于事件流模型，如果不清楚事件流模型的概念，可以先自学一下。

5. preventDefault

preventDefault方法可以阻止事件的默认行为。例如：

var link = document.getElementsByTagName('a')[0];
link.addEventListener('click', function(event) {
    event.preventDefault();
    console.log('链接被点击了，但已经阻止了默认行为！'); //不会跳转页面
});

6. stopPropagation

stopPropagation方法可以防止事件向上冒泡传递。例如：

var button = document.getElementById('button');
button.addEventListener('click', function(event) {
    event.stopPropagation();
    console.log('按钮被点击了，但不会执行页面上其他元素的点击事件！');
});

示例说明

下面提供两个事件属性的示例说明。

示例一

当鼠标进入页面中的一个区域时，输出该事件的类型、目标对象和添加了事件监听器的元素对象。

var area = document.getElementById('area');
area.addEventListener('mouseover', function(event) {
    console.log(event.type); // 输出 "mouseover"
    console.log(event.target); // 输出该区域元素
    console.log(event.currentTarget); // 输出该区域元素
});

示例二

当点击一个链接时，阻止其默认的跳转行为，并输出该链接元素和事件阶段。

var link = document.getElementsByTagName('a')[0];
link.addEventListener('click', function(event) {
    event.preventDefault();
    console.log(event.target); // 输出该链接元素
    console.log(event.eventPhase); // 输出事件阶段
});

以上就是 JavaScript Event 学习第七章事件属性的完整攻略。