Javascript基础知识（二）事件

Javascript基础知识（二）事件

一、事件的定义和使用

事件是指在操作网页时所产生的一系列动作，例如鼠标点击、键盘输入、窗口滚动等等。通过事件，我们可以给网页绑定相应的响应函数，实现网页的交互功能。

在Javascript中，事件通常被定义为对象的一种，可以使用addEventListener()方法来绑定事件函数。示例代码如下：

document.getElementById('btn').addEventListener('click', function() {
    alert('Hello, world!');
});

上述代码会给id为"btn"的按钮添加一个"click"事件，当用户点击该按钮时，会触发alert()函数，输出"Hello, world!"的弹窗。

除了click事件外，还有很多其他的事件可以使用，例如mouseover、mouseout、keydown等等。

二、事件冒泡和捕获

在网页上，事件通常会存在着层次结构，例如一个按钮可能被嵌套在一个div元素内。当一个事件被触发时，它会沿着这个层次结构向上或者向下传递，而这个传递过程被称为事件的冒泡（Bubbling）和捕获（Capturing）。

事件冒泡是指事件从最具体的元素开始触发，然后沿着层次结构逐步向上传播，直到传到document对象为止。示例代码如下：

<div id="container">
    <button id="btn">Click me!</button>
</div>

document.getElementById('container').addEventListener('click', function(){
    alert('container clicked!');
});
document.getElementById('btn').addEventListener('click', function(){
    alert('button clicked!');
});

当我们点击按钮时，会依次弹出"button clicked!"和"container clicked!"的弹窗提示。

事件捕获则是从document对象开始，沿着层次结构向下传递，最后传到最具体的元素为止。使用addEventListener()方法时，可以在第三个参数中设置true，将事件设置为捕获模式，例如：

document.getElementById('container').addEventListener('click', function(){
    alert('container clicked!');
}, true);

这样当我们点击按钮时，就会先弹出"container clicked!"的弹窗提示，再弹出"button clicked!"的弹窗提示。

三、阻止冒泡和默认行为

在某些特殊情况下，我们希望阻止事件的冒泡或者默认行为，可以使用event对象提供的方法来实现。

阻止冒泡可以使用event.stopPropagation()方法，示例代码如下：

document.getElementById('btn').addEventListener('click', function(event){
    alert('button clicked!');
    event.stopPropagation();
});

当我们点击按钮时，只会弹出"button clicked!"的弹窗提示，而不会再弹出"container clicked!"的弹窗提示。

阻止默认行为可以使用event.preventDefault()方法，例如在表单提交时阻止页面跳转：

<form>
    <input type="text" name="username">
    <button id="submit-btn" type="submit">Submit</button>
</form>

document.getElementById('submit-btn').addEventListener('click', function(event){
    event.preventDefault();
    // 执行表单提交逻辑
});

上述代码会阻止页面跳转，然后执行表单提交逻辑。

四、on事件属性

除了使用addEventListener()方法外，我们还可以使用on事件属性来给元素绑定事件，例如：

<button id="btn" onclick="alert('button clicked!')">Click me!</button>

这样当我们点击按钮时，就会弹出"button clicked!"的弹窗提示。

不过这种方式有一个缺陷，就是如果元素上已经有了该事件的绑定，再使用on事件属性会覆盖原有的绑定。因此，不推荐使用on事件属性来绑定事件。