书城项目第一阶段事件驱动补充

后端

2023-12-16 11:34:36

取消控件的默认行为
- 控件默认行为
- 取消默认行为的两种方法
- 代码示例
事件对象的详解
- 事件对象的属性
- 事件对象的常用方法
- 代码示例

正文

一、取消控件的默认行为

控件默认行为

控件默认行为是指控件在收到用户操作时，浏览器或操作系统自动执行的操作。例如，超链接控件的默认行为是跳转到指定页面，表单提交按钮的默认行为是将表单数据提交给服务器。
取消默认行为的两种方法

有两种方法可以取消控件的默认行为：
- 使用preventDefault()方法
- 使用stopPropagation()方法
preventDefault()方法可以阻止控件执行默认行为，但不会阻止事件传播。stopPropagation()方法可以阻止控件执行默认行为，并阻止事件传播。
代码示例

以下代码演示了如何使用preventDefault()方法取消超链接的默认行为：
```
<a href="https://www.baidu.com" onclick="return false;">百度</a>
```
以下代码演示了如何使用stopPropagation()方法取消表单提交按钮的默认行为：
```
<form action="submit.php" onsubmit="return false;">
    <input type="submit" value="提交">
</form>
```

二、事件对象的详解

事件对象的属性

事件对象包含了有关事件的信息，这些信息可以帮助我们了解事件是如何发生的。事件对象常用的属性包括：
- type：事件的类型
- target：触发事件的元素
- currentTarget：当前正在处理事件的元素
- clientX和clientY：鼠标指针相对于窗口的水平和垂直位置
- offsetX和offsetY：鼠标指针相对于触发事件的元素的水平和垂直位置
- keyCode：按下的键盘按键的代码
事件对象的常用方法

事件对象提供了许多有用的方法，这些方法可以帮助我们控制事件的传播和执行。事件对象常用的方法包括：
- preventDefault()：阻止控件执行默认行为
- stopPropagation()：阻止事件传播
- stopImmediatePropagation()：立即停止事件传播
- initEvent()：初始化事件对象

代码示例

以下代码演示了如何使用事件对象的属性和方法：

document.addEventListener('click', function(e) {
    console.log(e.type); // 输出：click
    console.log(e.target); // 输出：触发事件的元素
    console.log(e.currentTarget); // 输出：当前正在处理事件的元素
    console.log(e.clientX); // 输出：鼠标指针相对于窗口的水平位置
    console.log(e.clientY); // 输出：鼠标指针相对于窗口的垂直位置
    console.log(e.offsetX); // 输出：鼠标指针相对于触发事件的元素的水平位置
    console.log(e.offsetY); // 输出：鼠标指针相对于触发事件的元素的垂直位置
    console.log(e.keyCode); // 输出：按下的键盘按键的代码

    e.preventDefault(); // 阻止控件执行默认行为
    e.stopPropagation(); // 阻止事件传播
    e.stopImmediatePropagation(); // 立即停止事件传播
});