嵌入方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>load01</title> <script type="text/javascript" src="demo.js"></script> <script type="text/javascript"> alert("hello"); </script> </head> <body> <!-- * js的嵌入方式 1.行内js,写到标签的事件属性中:结构与行为相耦合,不建议使用 2.内部js,写到script标签中,script标签放到head标签中,无法获取按钮对象 3.外部js,引入外部的js文件 * <script type="text/javascript" src="demo.js"></script> * 如果script标签中有src属性,此时该标签的作用为引入外部js,不能在该标签中书写js代码。 * window.onload:当前文档完全加载后执行。(不可以写多个window.onload) 完全:指的是包含图片,音频,视频等 --> <button id="btnId" onclick="alert('Hello');">SayHello</button> </body> </html>
window.onload = function(){
var btnEle = document.getElementById("btnId");
btnEle.onclick = function(){
alert("dd");
}
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>load02</title> <!-- 2.写到script标签中,script标签放到head标签中,无法获取按钮对象 --> <script type="text/javascript"> </script> </head> <body> <button id="btnId">SayHello</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>load03</title> </head> <body> <button id="btnId">SayHello</button> </body> <!-- 3.写到script标签中,script标签放到body标签后面,不符合我们的习惯 --> <script type="text/javascript"> </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>load04</title> <!-- 4.使用window.onload,完美解决此问题 --> <script type="text/javascript"> </script> </head> <body> <button id="btnId">SayHello</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>load05</title> <!-- 5.引入外部的js文件 --> </head> <body> <button id="btnId">SayHello</button> </body> </html>