JavaScript第十一讲：DOM编程“事件”

前言

当涉及到DOM（Document Object Model）的事件时，JavaScript提供了许多内置的事件处理器，用于处理用户在网页上执行的各种操作。

1. 焦点事件

当元素获得或失去焦点时触发。

• onfocus: 当元素获得焦点时触发。
• onblur: 当元素失去焦点时触发。

// 假设有一个输入框  
<input type="text" id="myInput" onfocus="alert('输入框获得焦点！');" onblur="alert('输入框失去焦点！');">

2. 鼠标事件

与鼠标交互时触发。

• onclick: 当用户点击元素时触发。
• onmousedown: 当用户按下鼠标按钮时触发。
• onmouseup: 当用户释放鼠标按钮时触发。
• onmousemove: 当鼠标指针在元素内部移动时触发。
• onmouseover: 当鼠标指针进入元素时触发。
• onmouseout: 当鼠标指针离开元素时触发。

  // 假设有一个按钮  
  <button id="myButton" onclick="alert('按钮被点击了！');">点击我</button>

  3. 键盘事件

  当用户与键盘交互时触发。

• onkeydown: 当用户按下键盘上的某个键时触发。
• onkeyup: 当用户释放键盘上的某个键时触发。
• onkeypress: 当用户按下并释放一个键时触发（某些键可能不会触发，如修饰键）。

// 监听整个文档的键盘事件  
document.onkeydown = function(event) {  
    alert('你按下了键: ' + event.key);  
};

4. 点击事件

（已在鼠标事件中涵盖）onclick。

5. 变化事件

当元素的值或内容发生变化时触发。

• onchange: 当<input>、<select>或<textarea>元素的值改变且失去焦点时触发。

<input type="text" id="myInput" onchange="alert('输入内容已改变！');">

6. 提交事件

当表单提交时触发。

• onsubmit: 当表单提交时触发。

<form id="myForm" onsubmit="alert('表单正在提交！'); return false;">  
    <!-- 表单内容 -->  
    <input type="submit" value="提交">  
</form>  
  
// 注意：return false; 用于阻止表单的实际提交，以便在示例中仅显示警告。

7. 加载事件

当页面或元素加载时触发。

• onload: 当页面或图像等资源加载完成时触发。

// 监听整个窗口的加载事件  
window.onload = function() {  
    alert('页面已加载完成！');  
};

8. 当前组件

"当前组件"不是一个特定的事件类型，但通常指的是触发事件的DOM元素。在事件处理函数中，您可以通过this关键字或事件对象的target属性来访问它。

// 假设有一个按钮  
<button id="myButton" onclick="handleClick(event);">点击我</button>  
  
<script>  
function handleClick(event) {  
    alert('你点击了: ' + event.target.id); // 显示被点击元素的ID  
}  
</script>

9. 阻止事件的发生

在某些情况下，您可能希望阻止事件的默认行为或阻止事件进一步传播。

• event.preventDefault(): 阻止事件的默认行为（例如，阻止表单提交或阻止链接的默认跳转）。
• event.stopPropagation(): 阻止事件进一步传播到父元素（即阻止事件冒泡）。

<a href="https://example.com" id="myLink" onclick="handleLinkClick(event);">不要跳转到这个链接</a>  
  
<script>  
function handleLinkClick(event) {  
    event.preventDefault(); // 阻止链接的默认跳转行为  
    alert('链接被点击了，但不会跳转！');  
}  
</script>

结语

以上就是关于DOM事件的详细解释和代码示例。希望这些信息能帮助您更好地理解JavaScript中的事件处理机制。下一节有练习题，有需要的大佬们可以看看。

respect！