关键词

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

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>

结语

以上是JavaScript常见事件对象与操作实例的总结。可以根据这些信息去处理事件、获取事件信息等。

本文链接:http://task.lmcjl.com/news/11344.html

展开阅读全文