js click事件|极客笔记

js click事件

简介

在网页开发中，为了实现交互功能，我们经常需要监听用户的鼠标点击事件。JavaScript中的click事件就是一种常用的监听用户点击行为的方法。本文将详细介绍什么是click事件以及如何使用它。

什么是click事件

click事件是指用户在网页上点击鼠标时触发的事件。当用户点击页面上的元素时，浏览器会自动触发对应元素上的click事件。

click事件可以应用于任何HTML元素，包括按钮、链接、图片等等。当用户点击一个元素时，click事件会被触发，程序员可以通过捕捉这个事件来执行相应的操作，比如改变页面内容、发送请求等。

添加click事件监听器

要监听click事件，首先需要获取需要监听的元素。可以通过以下几种方法来获取元素：

通过元素的id获取：使用document.getElementById()方法来获取指定id的元素。
通过CSS选择器获取：使用document.querySelector()或document.querySelectorAll()方法来获取符合选择器条件的元素。
通过标签名获取：使用document.getElementsByTagName()方法获取所有指定标签名的元素。

获取到元素后，就可以为其添加click事件监听器了。可以通过以下两种方式来添加监听器：

使用DOM的addEventListener()方法来添加监听器。这种方式可以添加多个监听器，它接受两个参数：要监听的事件类型和事件处理函数。当事件被触发时，绑定的处理函数会被调用。
示例代码：
```
// 获取按钮元素
var btn = document.getElementById("myButton");

// 添加click事件监听器
btn.addEventListener("click", function() {
   alert("按钮被点击了");
});
```
运行结果：当按钮被点击时，弹出提示框显示”按钮被点击了”。
直接将事件处理函数赋值给元素的onclick属性。这种方式只能添加一个监听器，并且会覆盖掉之前的监听器。

示例代码：
```
// 获取按钮元素
var btn = document.getElementById("myButton");

// 将事件处理函数赋值给onclick属性
btn.onclick = function() {
   alert("按钮被点击了");
};
```
运行结果：与前一种方式一样，当按钮被点击时，弹出提示框显示”按钮被点击了”。

事件对象

当click事件被触发时，浏览器会自动创建一个事件对象，并传递给对应的事件处理函数。通过事件对象，我们可以获取到一些与事件相关的信息，比如被点击的元素、鼠标位置等等。

可以通过事件对象的target属性来获取被点击的元素。例如，下面的代码会弹出被点击元素的文本内容：

// 获取按钮元素
var btn = document.getElementById("myButton");

// 添加click事件监听器
btn.addEventListener("click", function(event) {
    alert("被点击的元素是：" + event.target.innerHTML);
});

在上述代码中，我们在事件处理函数内部定义一个参数event，该参数代表事件对象。在函数内部，我们可以通过event.target来获取到被点击的元素，再通过innerHTML属性获取到元素的内容。

除了target属性，事件对象还有其他许多属性，可以提供更多关于事件的信息，比如鼠标位置、按键状态等等。详情可以参考MDN文档。

阻止默认行为

在某些情况下，我们可能需要阻止click事件的默认行为。比如，当用户点击一个链接时，浏览器会默认打开链接对应的URL地址。如果我们不希望触发默认行为，可以使用event.preventDefault()方法来阻止它。

示例代码：

// 获取链接元素
var link = document.getElementById("myLink");

// 添加click事件监听器
link.addEventListener("click", function(event) {
    event.preventDefault();
    alert("链接被点击了");
});

运行结果：当点击链接时，不会跳转至指定URL，而是弹出提示框显示”链接被点击了”。

兼容性问题

需要注意的是，click事件在不同浏览器中可能存在一些兼容性问题。具体来说，IE9之前的版本不支持addEventListener()方法，而是使用attachEvent()方法来添加事件监听器。

针对这种情况，我们可以使用一个兼容性函数来统一处理。示例代码如下：

// 添加兼容性函数
function addEventListener(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
    } else {
        element["on" + type] = handler;
    }
}

// 获取按钮元素
var btn = document.getElementById("myButton");

// 使用兼容性函数添加click事件监听器
addEventListener(btn, "click", function() {
    alert("按钮被点击了");
});

通过上述兼容性函数，我们可以在不同浏览器下都正常添加click事件监听器。