1、第一个要说明的就是，在我们编写的代码中，一定要实现【行为】、【样式】、【结构】三者的分离
怎么才能实现呢？
这里我们就要用到window属性的onload事件了
通过在<script>标签中添加window.onload = function(){ // 此处编写JS代码}
来实现将行为代码写在head中也能正常执行的效果
如果没有window.onload事件，下面的代码是不能正常执行的，控制台会提示错误信息。
代码示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){ btn1.onclick = function (){ alert('JS中匿名函数的应用') } } </script> </head> <body> <input id="btn1" type="button" value="按钮"> </body> </html>
2、提取行间事件
说明：
提取行间事件的本质上就是在标签的行间添加属性，例如之前的改变按钮的值
可以看到同样的代码写在body中是没有任何问题的，但是写在head中就不能执行了，原因就在于HTML页面的执行顺序是从上到下，下面的body还没有加载。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- <script> var obtn1 = document.getElementById('btn1'); var btn = document.getElementById('btn'); btn.onclick = function (){ var oBtn1 = document.getElementById('btn1'); alert('改变按钮的值为bbb') oBtn1.value = 'bbb'; } </script> --> </head> <body> <!-- // 通过提取行间事件来修改标签的属性的值 --> <input type="button" value="按钮" id="btn1"> <input id="btn" type="button" value="nihao"> <script> var obtn1 = document.getElementById('btn1'); var btn = document.getElementById('btn'); btn.onclick = function (){ var oBtn1 = document.getElementById('btn1'); alert('改变按钮的值为bbb') oBtn1.value = 'bbb'; } </script> </body> </html>
当使用了上面的window.onload以后，写在head中的代码就可以正常执行了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){ var obtn1 = document.getElementById('btn1'); var btn = document.getElementById('btn'); btn.onclick = function (){ var oBtn1 = document.getElementById('btn1'); alert('改变按钮的值为bbb') oBtn1.value = 'bbb'; } } </script> </head> <body> <!-- // 通过提取行间事件来修改标签的属性的值 --> <input type="button" value="按钮" id="btn1"> <input id="btn" type="button" value="nihao"> <!-- <script> var obtn1 = document.getElementById('btn1'); var btn = document.getElementById('btn'); btn.onclick = function (){ var oBtn1 = document.getElementById('btn1'); alert('改变按钮的值为bbb') oBtn1.value = 'bbb'; } </script> --> </body> </html>
下面的代码也是一种提取行间事件的示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="div1" class="liuyonglin"></div> <script> var oDiv = document.getElementById('div1'); oDiv.className = 'suwenyuan'; </script> </body> </html>
在控制台可以看到div标签的class属性的值变成了"suwenyuan"