（JavaScript）前端JS不知道怎么理解网页？本专栏从0开始教学！（十六）：事件监听和attachEvent绑定；JS无限定时器和延时定时器；键盘事件使用；事件传播；

凉凉心.

发布于 2025-10-13 17:45:21

1140

事件的绑定（拓展）

使用对象.事件=函数形式绑定事件它只能同时为同一个元素绑定同一事件一次不能绑定多次，如果绑定多次，后面的会覆盖掉前面的

btn.onclick=function(){
	alert(1);
};
btn.onclick=function(){
	alert(2);
};

addEventListener() 监听事件

通过这个方法也可以为元素绑定响应函数
参数： 1.事件的字符串，不加on 2.回调函数，当事件触发时该函数会被调用 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

这个方法不支持IE8及以下的浏览器

btn.addEventListener("click",function(){
	alert(1);
},false);
btn.addEventListener("click",function(){
	alert(2);
},false);

attachEvent()

在IE8中可以使用attachEvent()来绑定事件
参数： 1.事件的字符串，要on 2.回调函数
这个方法也可以同时为一个事件绑定多个处理函数 不同的是它是后绑定先执行，执行顺序和addEventListener()相反

btn.attachEvent("onclick",function(){
	alert(1);
});
btn.attachEvent("onclick",function(){
	alert(2);
});

两者 this 的差异

addEventListener()中的this，是绑定事件的对象 attachEvent()中的this，是window

需要统一两个方法的this

btn.addEventListener("click",function(){
	console.log(this);
},false);
btn.attachEvent("onclick",function(){
	console.log(this);
	alert(this);
});

定义一个事件

参数： obj 要绑定事件的对象 eventStr 事件的字符串(不要on) callback 回调函数

三个形参：

绑定对象
事件名称
执行的回调函数

function bind(obj,evenStr,callback){
	// addEventListener(事件的字符串，回调字符串，布尔值)
	obj.addEventListener(evenStr,callback,false);
}

使用

// 调动实参   btn元素  ——  事件(addEventListener不需要加  on)  ——  回调函数
bind(btn,"dblclick",function(){
	alert(1);	
})
bind(btn,"mouseenter",function(){
	console.log("123")
})

事件的传播(拓展)

关于事件的传播网景公司和微软公司有不同的理解

微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素

W3C综合了两个公司的方案，将事件传播分成了三个阶段

捕获阶段在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
目标阶段事件捕获到目标元素，捕获结束开始在目标元素上触发事件
冒泡阶段事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true 一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false

I8及以下的浏览器中没有捕获阶段
W3C:万维网联盟，是Web技术领域最具权威和影响力的国际中立性技术标准机构*

style和body

<style type="text/css">
	#box1{
		width: 300px;
		height: 300px;
		background-color: yellowgreen;
	}

	#box2{
		width: 200px;
		height: 200px;
		background-color: yellow;
	}

	#box3{
		width: 150px;
		height: 150px;
		background-color: skyblue;
	}

</style>

<body>
	<div id="box1">box1
		<div id="box2">box2
			<div id="box3">box3</div>
		</div>
	</div>
</body>

/*
参数：
		obj 要绑定事件的对象
		eventStr 事件的字符串(不要on)
		callback 回调函数
*/
function bind(obj,evenStr,callback){
	if(obj.addEventListener){
		//大部分浏览器中给元素绑定事件
		obj.addEventListener(evenStr,callback,false);
	}else{
		//ie8 及一下浏览器 
		//this的值由调用对象决定
		obj.attachEvent("on"+evenStr,function(){
			callback.call(obj);
		});
	}
}

window.onload=function(){
	/*
	 * 分别为三个div绑定单击响应函数
	 */
	var box1 = document.getElementById("box1");
	var box2 = document.getElementById("box2");
	var box3 = document.getElementById("box3");
	
	bind(box1,"click",function(){
		alert("box1的点击事件被触发了");
	});
	bind(box2,"click",function(){
		alert("box2的点击事件被触发了");
	});
	bind(box3,"click",function(){
		alert("box3的点击事件被触发了");
	});
}

键盘事件

onkeydown: 键盘被按下事件

如果一直按着某个键不松开，则会一直触发该事件
当onkeydown事件连续触发时，第一次和第二次之间的间隔时间稍微长一点，其他则会非常快。这是为了防止误操作的发生

onkeyup: 键盘被松开的事件

键盘事件一般都会绑定给一些可以获取焦点的对象或则是document

var txt=document.getElementById("txt");
txt.onkeydown=function(event){
	event=event||window.event;
	/*数值取值范围48~57*/
	//不允许文本框中输入数字
	if(event.keyCode>=48&&event.keyCode<=57){
		//在文本框中输入内容，属于onkeydown的默认行为，
		//如果onkeydown中取消默认行为，则输入的内容，不会出现在本文本框中
		return false;
	}
	
}

键盘的事件对象可以通过keyCode属性来获取按键的编码，该编码就是ASCII码，可以根据码表进行对照用户按下了哪个按键

除了keyCode，事件对象中还提供了几个属性 altKey ctrlKey shiftKey

这三个属性分别是用来判断alt cltrl shift是否被按下的如果被按下了则返回true，否则返回false

示例 - 键盘移动div

	<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>82JavaScript键盘事件_键盘移动div</title>
<style>
		div{
			width: 100px;
			height: 100px;
			background: #DE9E9F;
			position: absolute;
			top: 100px;
			left:100px;
		}
	</style>
</head>

<body>
	<div></div>
	<script>
		window.onload=function(){
			var box=document.getElementsByTagName("div")[0];
			console.log(box);
			document.onkeydown=function(event){
				//事件对象
				event=event||window.event;
				///event.keyCode 37 箭头向左
				///event.keyCode 38 箭头向上
				///event.keyCode 39 箭头向右
				///event.keyCode 40 箭头向下
				var speed=50;
				/*if(event.keyCode==37){
					box.style.left=box.offsetLeft-20+"px";
				}else if(event.keyCode==38){
					box.style.top=box.offsetTop-20+"px";
				}else if(event.keyCode==39){
					box.style.left=box.offsetLeft+20+"px";
				}else if(event.keyCode==40){
					box.style.top=box.offsetTop+20+"px";
				}*/
//				console.log(event.keyCode);
				
				switch(event.keyCode){
					case 37:
						box.style.left=box.offsetLeft-speed+"px";
						break;
					case 38:
						box.style.top=box.offsetTop-speed+"px";
						break;
					case 39:
						box.style.left=box.offsetLeft+speed+"px";
						break;
					case 40:
						box.style.top=box.offsetTop+speed+"px";
						break;
					default:
						break;
				}
			}
		}
	</script>
</body>
</html>

定时器

setInterval() 无限定时器

JS的程序的执行速度是非常非常快的如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用

setInterval()

定时调用
可以将一个函数，每隔一段时间执行一次
参数： 1.回调函数，该函数会每隔一段时间被调用一次 2.每次调用间隔的时间，单位是毫秒
返回值：返回一个Number类型的数据这个数字用来作为定时器的唯一标识

clearInterval() 这个方法可以关闭定时器

参数： 1.定时器变量

window.onload = function(){
	//获取count
	var count = document.getElementById("count");
	var num = 1;
	var timer = setInterval(function(){
		count.innerHTML = num++;

		if(num == 11){
			//关闭定时器
			// clearInterval(timer);
			
			// 到十时下一步切换为一
			num = 1;
		}

	},1000);
}

延时定时器

延时调用

延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择

var timer = setTimeout(function(){
	console.log(num++);
},3000);

//使用clearTimeout()来关闭一个延时调用
clearTimeout(timer);

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-08-03，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度