1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <!-- 9 可以在事件对应的属性中设置一些JS代码， 10 这样当事件触发时，代码就会执行 11 这种写法结构和行为耦合，不方便维护，不推荐使用 12 --> 13 <button id="wxy" onclick="alert('k')">button</button> 14 <button id="w">button2</button> 15 16 <script type="text/javascript"> 17 /* 18 DOM Document Object Model 文档对象模型 19 节点 构成HTML文档最基本的单元 20 常用节点分为四类 21 文档节点 整个HTML文档 22 元素节点 HTML文档中的标签 23 属性节点 元素的属性 id 24 文本节点 HTML标签中的文本内容 25 26 浏览器已经为我们提供文档节点对象 这个对象是window属性 27 可以在页面中直接使用，文档节点代表的是整个网页 28 */ 29 30 //获取button对象 31 var b=document.getElementById("wxy"); 32 console.log(b); 33 //修改按钮的文字 34 b.innerHTML="sheep"; 35 /* 36 事件就是用户与浏览器之间的交互行为 37 比如 点击按钮，鼠标移动，关闭窗口 38 39 可以为按钮的对应事件绑定处理函数的形式来响应事件 40 这样当事件被触发时，其对应的函数将会被调用 41 */ 42 //获取按钮对象 43 var btn=document.getElementById("w"); 44 //可以为按钮的对应事件绑定处理函数的形式来响应事件 45 //绑定一个单击事件 像这种为单击事件绑定的函数,称为单击响应函数 46 btn.onclick=function(){ 47 alert("zzz"); 48 }; 49 /* 50 文档的加载 51 浏览器在加载一个页面时，是按照自上向下的顺序加载的， 52 读取到一行就运行一行，如果将script标签写到页面的上边， 53 在代码执行时，页面还没有加载 54 所以将JS代码编写到页面的下部就是为了可以在页面加载完毕以后再执行JS代码 55 */ 56 </script> 57 </body> 58 </html>
在JS中，也可以不将<script type="text/javascript">嵌套在<body>下
可以使用onload，onload使得事件会整个页面加载完成以后才触发
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <script type="text/javascript"> 9 /* 10 浏览器在加载一个页面时， 11 在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载 12 13 onload事件会在整个页面加载完成以后才触发 14 为window绑定一个onload事件 15 确保页面加载出来以后再执行回调函数 16 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕 17 */ 18 window.onload=function(){ 19 var button=document.getElementById("wxy"); 20 button.onclick=function(){ 21 alert("hi"); 22 } 23 } 24 </script> 25 <body> 26 <button id="wxy" onclick="alert('k')">button</button> 27 </body> 28 </html>