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