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

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加载方式

1. 写在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>
   

2. 写在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>
   

3. 写在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>
   

4. 使用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>