一、事件
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();
}