JavaScript学习笔记之JS事件对象
什么是JS事件对象
JavaScript事件对象(Event Object)是在事件被触发时由浏览器自动创建的对象,它包含了与事件相关的所有信息,我们可以通过JS事件对象来获取一些有用的信息,如事件类型、触发事件的元素、鼠标的位置等。
JS事件对象的属性
以下是JS事件对象常用的属性:
type
:事件类型,如"click"、"mouseover"等;target
:触发事件的元素;currentTarget
:事件绑定的元素;pageX
:鼠标指针的水平位置,相对于文档的左侧边缘;pageY
:鼠标指针的垂直位置,相对于文档的顶部边缘;keyCode
:触发事件的按键的键码值;shiftKey
、ctrlKey
、altKey
:是否按下了Shift、Ctrl、Alt键。
JS事件对象的方法
以下是JS事件对象常用的方法:
preventDefault()
:取消事件的默认行为;stopPropagation()
:停止事件的传播;stopImmediatePropagation()
:立即停止事件的传播。
JS事件对象的使用
以下是一个JS事件对象的使用示例:
<!DOCTYPE html>
<html>
<head>
<title>JS事件对象使用示例</title>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(event) {
alert("触发事件的元素:" + event.target.tagName);
alert("事件类型:" + event.type);
alert("键码值:" + event.keyCode);
alert("鼠标位置:" + event.pageX + "," + event.pageY);
event.preventDefault(); //取消事件的默认行为
}
</script>
</head>
<body>
<button id="btn">点击我</button>
</body>
</html>
以上代码中,我们给button元素绑定了一个click事件,当点击该元素时,事件会触发。在事件的处理函数中,我们用JS事件对象来获取一些有用的信息,如事件类型、触发事件的元素、键码值等,并使用event.preventDefault()
方法来取消事件的默认行为。
另外一个JS事件对象的使用示例,如下:
<!DOCTYPE html>
<html>
<head>
<title>JS事件对象使用示例</title>
<script type="text/javascript">
var box = document.getElementById("box");
box.addEventListener("mouseover", function(event) {
event.target.style.backgroundColor = "red";
event.stopPropagation(); //停止事件的传播
}, false);
document.addEventListener("mouseover", function(event) {
event.target.style.backgroundColor = "green";
}, false);
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
以上代码中,我们给一个div元素绑定了一个mouseover事件,并使用event.target.style.backgroundColor
来修改该元素的背景色为红色。同时,在鼠标移入该元素时,还会触发document元素上的mouseover事件,我们在该事件的处理函数中使用event.target.style.backgroundColor
来修改背景色为绿色。为了避免事件在document上的传播,我们使用了event.stopPropagation()
方法来停止事件的传播。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript学习笔记之JS事件对象 - Python技术站