Web开发基础-JavaScript-24

JS中元素绑定事件的用法

案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件</title>
		<script type="text/javascript">
			function f1(){
				alert(1);
			}
			
			//3.后绑定事件：在onload事件中，
			//获取元素并为其绑定事件。
			//onload是页面加载事件，在页面加载后自动触发。
			//写在该事件内的js和写在body末尾的js等效。
			window.onload = function(){
				var btn3 = document.getElementById("btn3");
				btn3.onclick = function(){
					alert(3);
				}
				
				
				//后绑定事件时浏览器会自动给函数传入event，
				//可以通过argument[0]获取event，
				//也可以声明参数来接收event。
				var btn5 = document.getElementById("btn5");
				btn5.onclick = function(e){
					console.log(e);
					alert(e.clientX+","+e.clientY);
				}
			}
			
			//调用该函数时传入了event，可以通过
			//argument[0]获取，也可以通过声明参数e接收。
			function f4(e){
				console.log(e);
				alert(e.clientX+","+e.clientY);
			}
		
		
		</script>
	</head>
	<body>
		<!-- 1.直接绑定事件 -->
		<input type="button" value="按钮1"
			onclick="f1();">
		<input type="button" value="按钮2" 
			id="btn2">
		<input type="button" value="按钮3"
			id="btn3">
		
		<!-- 直接定义事件时如何获取事件对象 -->
		<input type="button" value="按钮4"
			id="btn4" onclick="f4(event);">
		<!-- 后绑定事件时如何获取事件对象 -->
		<input type="button" value="按钮5" 
			id="btn5">

	<script type="text/javascript">
		//2.后绑定事件:在页面加载后，
		//通过js获取元素并为其绑定事件
		var btn2 = document.getElementById("btn2");
		btn2.onclick = function(){
			alert(2);
		}
	
	</script>	
	</body>
</html>

最终页面显示效果：

如果将btn5按钮绑定的事件写在window.onload外，则会报如下错误【元素还没加载出来就绑定事件导致的】：

Web开发基础-JavaScript-24

猜你喜欢