JavaWeb-day14-JavaScript事件及加载方式

最新推荐文章于 2022-11-29 19:30:47 发布

Kshmr丶丶

最新推荐文章于 2022-11-29 19:30:47 发布

阅读量126

点赞数

文章标签： web

本文链接：https://blog.csdn.net/lorry001/article/details/107847216

版权

JavaScript事件

案例：

< html>
< head>
< script type="text/javascript">
window.onload = function(){    // 点击按钮触发事件
		var btn = document.getElementById("btnId");
		btn.onclick = function () {
			alert("Bom!~~~");
		}; 
	}
< /script>
< /head>
< body>
	< button id="btnId">SayHello</button>
< /body>
< /html>

JavaScript加载方式

写在HTML标签内，结构与行为耦合，不推荐

 < html>
 < head>
 < meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 < title>Insert title here< /title>
 < /head>
 < body>
 	< button onclick="alert('hello~~~')">SayHello< /button>
 < /body>
 < /html>

写在script标签内：无法获取button

 < html>
 < head>
 < script type="text/javascript">
 	var btn = document.getElementById("btnId");
 	alert(btn);
 	btn.onclick = function() {
 		alert("Hello!~~~");	
 	};
 
 < /script>
 < /head>
 < body>
 	< button id="btnId">SayHello< /button>
 < /body>
 < /html>

写在body标签后面，能获取到button，但不符合习惯

 < html>
 < head>
 < /head>
 < body>
 	< button id="btnId">SayHello< /button>
 < /body>
 < script type="text/javascript">
 var btn = document.getElementById("btnId");
 	alert(btn);
 	btn.onclick = function() {
 		alert("Hello!~~~");
 	};
 < /script>
 < /html>

使用window.onload:推荐使用

 < html>
 < head>
 < title>Insert title here< /title>
 < script type="text/javascript">
 	function myPrograme() {
 		var btn = document.getElementById("btnId");		
 		alert(btn);	
 		btn.onclick = function() {		
 			alert("Hello!Success!~~~");
 		};
 	}
 < /script>
 < /head>
 < body>
 	< button id="btnId">SayHello< /button>
 < /body>
 < /html>