js事件驱动机制

基本概念

js是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数来处理。

事件驱动原理

事件源:产生事件的地方(html元素)
事件(名称):点击/鼠标操作/键盘操作等等
事件对象:当某个事件发生时,可能会产生一个事件对象,该事件对象会 封装好该事件的信息,传递给事件处理程序
事件处理程序:响应用户事件的代码

案例1:监听鼠标点击事件,并能够显示鼠标点击的位置x,y

<html>
	<head>
		<script>
			function test(e){
				window.alert("x=" + e.clientX + "y=" + e.clientY);
			}
		</script>
	</head>
	<body style="width: 100px; heigth: 80px; border: 1px solid red" onmousedown="test(event)"></body>
</html>

事件对象

event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

  • 什么时候会产生event对象?
  • 例如当用户点击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而函数的形参接收一个event对象。
  • 事件通常与函数结合使用,函数不会再事件发生之前被执行
var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
    alert(event.type); //"click"
}
btn.addEventListener("click", function(event) {
    alert(event.type); //"click"
}, false);

event.type属性表示事件类型。
event.currentTarget是事件处理程序当前正在处理事件的那个元素,返回绑定事件的元素,和this的作用差不多,始终返回绑定事件的元素。(事件委托返回绑定的父元素)
event.target返回触发事件的元素(可以用来事件委托)

posted @ 2018-06-07 10:40  五集麻辣油  阅读(122)  评论(0编辑  收藏  举报