JavaScript（JS）事件_const bt = document.getelementbyid("button"); bt.a-CSDN博客

本文链接：https://blog.csdn.net/moguicy123/article/details/115479788

JavaScript 事件目录

使用事件属性
行内事件
addEventListener() 和removeEventListener()
事件对象
事件冒泡和捕捉
用 stopPropagation() 解决事件冒泡问题
事件委托

使用事件属性

事件属性不止是onclick，还有其他的如onfocus,onblur等。
所支持的事件属性根据元素的类型不同而不同
window.onkeypress, window.onkeydown, window.onkeyup
btn.onfocus，btn.onblur ，btn.ondblclick，btn.onmouseover btn.onmouseout

<!--DOCTYPE html-->
<html>
<head>
<title>prompt</title>
</head>
<body>
	<button id="btn">btn</button>
	<script>
		const btn = document.getElementById('btn');
		btn.onclick=testClick
		function testClick(){
			alert("testClick");
		}
	</script>
	
</body>
</html>

行内事件

<!--DOCTYPE html-->
<html>
<head>
<title>prompt</title>
</head>
<body>
	<button id="btn" onclick="alert('onclick')">btn</button>
</body>
</html>

addEventListener() 和removeEventListener()

<!--DOCTYPE html-->
<html>
<head>
<title>prompt</title>
</head>
<body>
	<button id="btn">onclick</button>	
	<button id="btn2">onclick2</button>
	<script>
		const btn = document.getElementById("btn");
		const btn2 = document.getElementById("btn2");
		btn.addEventListener("click",function(){
			alert("onclick");
		})
		btn2.addEventListener("click",testClick);
		function testClick(){
			alert("onclick2");
		}
	</script>
</body>
</html>

事件对象

在事件处理函数内部，可能会有一个指定名称的参数
如下是一个使用事件对象来操作元素本身的一个示例

<!--DOCTYPE html-->
<html>
<head>
<title>prompt</title>
</head>
<body>
	<button id="btn">onclick</button>	
	<script>
		const btn = document.getElementById("btn");
		btn.addEventListener("click",function(e){
			//e.target在这里是btn元素本身
			e.target.style.backgroundColor=randomColor();
		})
		//生成随机颜色
		function randomColor(){
			return 'rgb(' + random() + ',' + random() + ',' + random() + ')';
		}
		//生成随机数
		function random(){
			return Math.floor(Math.random()*255)+1;
		}
	</script>
</body>
</html>

事件冒泡和捕捉

某个事件发生在具有父元素的元素上时，浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段
在捕获阶段：
浏览器检查元素的最外层元素，是否在捕获阶段中注册了当前事件处理程序，如果是，则运行它。
然后，再移动到中单击元素的下一个父元素，并执行相同的操作，依此类推，直到到达实际点击的元素。
在冒泡阶段：
浏览器检查实际点击的元素是否在冒泡阶段中注册了该事件处理程序，如果是，则运行它
然后它移动到下一个直接的父元素，并做同样的事情，然后是下一个，等等，直到它到达元素。
在当前浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。

用 stopPropagation() 解决事件冒泡问题

标准事件对象具有名为 stopPropagation()的函数, 当在事件对象上调用该函数时，它只会让当前事件处理程序运行，
事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行(不会向上冒泡)。
所以，我们可以通过改变前面代码块中的第二个处理函数来解决当前的问题:

div.onclick = function(e) {
  e.stopPropagation();
  //其他需要处理的代码
};

事件委托

若想要在大量子元素中单击任何一个都可以运行一段代码，
可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。
只在父元素上注册事件，但是每个子元素都有具体的相应操作

<!DOCTYPE html>
<html>
	<head>
		<title>事件冒泡的具体应用</title>
	</head>
	<body>
		<div>
			<ul>
				<h1>
					<li>
						t1
					</li>
				</h1>
				<h1>
					<li>
						t2
					</li>
				</h1>
				<h1>
					<li>
						t3
					</li>
				</h1>
				<h1>
					<li>
						t4
					</li>
				</h1>
				<h1>
					<li>
						t5
					</li>
				</h1>
			</ul>
		</div>

		<script>
			const videoBox = document.querySelector('div');

			videoBox.onclick = function(e) {
				e.target.style.backgroundColor = randomColor();
			};
			//生成随机颜色
			function randomColor() {
				return 'rgb(' + random() + ',' + random() + ',' + random() + ')';
			}
			//生成随机数
			function random() {
				return Math.floor(Math.random() * 255) + 1;
			}
		</script>
	</body>
</html>