Event2-事件

最新推荐文章于 2023-05-15 15:28:08 发布

原创最新推荐文章于 2023-05-15 15:28:08 发布 · 906 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了事件捕获与冒泡的概念，展示了如何通过JavaScript控制DOM元素的事件监听，并提供了键盘事件的应用实例，如键盘控制DIV移动等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件捕获

事件捕获就是告诉他监控的是哪一种类型的事件是进去的还是出去的这就是true和false的意义

true&false监控的就是进来的那一下和出去的那一下

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div {padding: 50px;}
#div1 {background: red;}
#div2 {background: blue;}
#div3 {background: green; position: absolute; top: 300px;}
</style>
<script>
window.onload = function() {
		
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3');
	
	function fn1() {
		alert( this.id );
	}
	
	/*oDiv1.onclick = fn1;
	oDiv2.onclick = fn1;
	oDiv3.onclick = fn1;*/
	
	//false = 冒泡
	
	//告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数
	/*oDiv1.addEventListener('click', fn1, false);
	oDiv2.addEventListener('click', fn1, false);
	oDiv3.addEventListener('click', fn1, false);*/
	
	//告诉div1，如果有一个进去的事件触发了你，你就去执行fn1这个函数
	/*oDiv1.addEventListener('click', fn1, true);
	oDiv2.addEventListener('click', fn1, true);
	oDiv3.addEventListener('click', fn1, true);*/
	
	oDiv1.addEventListener('click', function() {
		alert(1);
	}, false);
	oDiv1.addEventListener('click', function() {
		alert(3);
	}, true);
	oDiv3.addEventListener('click', function() {
		alert(2);
	}, false);
	// 3 2 1
	
}
</script>
</head>

<body>
	<div id="div1">
    	<div id="div2">
        	<div id="div3"></div>
        </div>
    </div>
</body>
</html>

事件取消

IE：obj.detachEvent(事件名称,事件函数);

标准：obj.removeEventListenner(事件名称,事件函数,是否捕获);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
<script>
window.onload = function(){
	 // 第一种事件绑定形式的取消
	 function fn1(){
	 	alert(1);
	 }
	 function fn2(){
	 	alert(2);
	 }
	 document.onclick = fn1;
	 document.onclick = null;

	 //第二种事件绑定形式的取消
	 //IE:绑定 obj.attachEvent();
	 	  // 取消 obj.detachEvent(事件名称,事件函数);
	 	document.attachEvent('onclick',fn1);
		document.attachEvent('onclick',fn2);
		document.detachEvent('onclick',fn1);//取消fn1事件
	 //标准:绑定 obj.addEventListenner(事件名称,事件函数,是否捕获);
	 	  // 取消 obj.removeEventListenner(事件名称,事件函数,是否捕获);
	 	document.addEventListenner('click',fn1,false);
	 	document.addEventListener('click',fn2,false);
	 	document.removeEventListener('click',fn1,false);
	 
</script>

键盘事件

onkeydown:键盘按键按下触发
onkeyup:键盘按键抬起触发
event.keyCode:数值键盘按键的值键值
ctrlkey shiftKey altKey 布尔值
当一个事件发生的时候如果ctrl||shift||alt键是按下的状态，返回true

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
onkeydown:键盘按键按下触发
onkeyup:键盘按键抬起触发
event.keyCode:数值 键盘按键的值 键值
	ctrlkey shiftKey altKey 布尔值
	当一个事件发生的时候如果ctrl||shift||alt键是按下的状态，返回true
	
</body>
</html>
<script>
window.onload = function(){
	document.onkeydown = function(){
		alert(1);
	}
	document.onkeyup = function(){
		alert(2);
	}
	document.onkeydown = function(ev){
		varev =  ev||event;
		alert(ev.keyCode);
	}
	document.onclick = function(ev){
		var ev = ev||event;
		alert(ev.ctrlKey);
	}

}
</script>

键盘事件2

按住ctrl+enter输入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<input type="text" id="text"/>
<ul id="list"></ul>
	
</body>
</html>
<script>
	var oText=document.getElementById('text');
	var oList=document.getElementById('list');
	oText.onkeyup = function(ev){
		//alert(this.value);
		var ev = ev||event;  
		if(this.value!=''){
			if(ev.keyCode ==13&&ev.ctrlKey){
				var oLi = document.createElement('li');
				oLi.innerHTML = this.value;
				if(oList.children[0]){
					oList.insertBefore(oLi,oList.children[0]);
				}else{
					oList.appendChild(oLi);
				}
			}
			
		}
	}
</script>

键盘控制DIV

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#box{width:100px;height:100px;background:red;position:absolute;}
	</style>
</head>
<body>
<div id="box"></div>
	
</body>
</html>
<script>
window.onload = function(){
	var oBox=document.getElementById('box');
	document.onkeydown =function(ev){
		//不是所有元素都可以接收键盘事件的，能够响应用户操作的元素
		var ev = ev||event;
		switch(ev.keyCode){
			case 37:
			oBox.style.left = oBox.offsetLeft-10+'px';
			break;
			case 38:
			oBox.style.top = oBox.offsetTop-10+'px';
			break;
			case 39:
			oBox.style.left = oBox.offsetLeft+10+'px';
			break;
			case 40:
			oBox.style.top = oBox.offsetTop+10+'px';
			break;
		}
		
	}
}
</script>

事件默认行为

事件默认行为：当一个事件发生的时候浏览器默认做的事情
怎么阻止？
当前的行为是什么事件触发的，然后在这个事件处理函数中使用return false;
oncontextmenu:右键菜单事件，当右键菜单{环境菜单}显示出来的时候触发

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#div{width:100px;height:200px;border:1px solid red;display:none;position:absolute;}
	</style>
</head>
<body style="height:2000px">
事件默认行为：当一个事件发生的时候浏览器默认做的事情
怎么阻止？
当前的行为是什么事件触发的，然后在这个事件处理函数中使用return false;
oncontextmenu:右键菜单事件，当右键菜单{环境菜单}显示出来的时候触发
<div id="div"></div>
</body>
</html>
<script>
window.onload = function(){
	var oDiv = document.getElementById('div');
	document.oncontextmenu = function(ev){
		var ev = ev||event;
		var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
		oDiv.style.display='block';
		oDiv.style.left = ev.clientX+'px';
		oDiv.style.top = ev.clientY+scrollTop+'px';
		return false;
	}
	document.onclick =function(){
		oDiv.style.display='none';
	}

}
</script>