JavaScript常见事件对象与操作实例总结

JavaScript中有很多事件，常见的事件有鼠标事件、键盘事件、表单事件等，而这些事件产生时候都会生成相应的事件对象，开发者可以通过事件对象去获取事件的信息，进行事件处理。

常见事件对象属性

以下是常见事件对象的属性：

event.target: 触发事件的 DOM 元素。
event.currentTarget: 当前绑定事件的 DOM 元素。
event.type: 事件类型字符串，例如 "click" 。
event.preventDefault(): 取消浏览器对事件的默认行为。
event.stopPropagtion(): 停止事件冒泡。
event.keyCode: 键盘事件中所按下的键的编码。
event.clientX、event.clientY: 鼠标事件中鼠标点击位置的横纵坐标。

常见事件操作实例

鼠标事件

鼠标事件是常见的事件类型之一。当用户鼠标移动到某个元素上、点击某个元素时，就会触发相应的鼠标事件。我们可以根据 MouseEvent 对象的信息进行事件处理。

以下示例为在鼠标移到元素上时，显示出该元素的信息：

<body>

<div id="box" style="width:100px; height:100px; background-color:red;"></div>

<script>
    var box = document.getElementById("box");

    box.addEventListener("mouseover", function(e) {
        console.log("事件类型：" + e.type);
        console.log("触发元素：" + e.target);
        console.log("当前绑定元素：" + e.currentTarget);
        box.style.backgroundColor = "green";
    });
</script>

</body>

键盘事件

键盘事件是在使用键盘时产生的事件类型。比如在用户按下某键、释放某键、按住某键时，可以通过 KeyboardEvent 对象获取事件信息进行相应的处理。

以下示例为当用户按下空格键时，弹出一个提示框显示出该按键的编码：

<body>

<p>请在文本框中按下键盘上的空格键：</p>
<input type="text">

<script>
    var input = document.getElementsByTagName("input")[0];

    input.addEventListener("keydown", function(e) {
        if (e.keyCode === 32) {
            alert("您按下的是空格键，键盘编码是：" + e.keyCode);
        }
    });
</script>

</body>