2020.8.25

　　

事件的交互

事件的三要素

事件源

事件

事件驱动程序

步骤

• 获取事件源：document.getElementById(“box”);

• 绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };

• 书写事件驱动程序：关于DOM的操作。

获取事件的方式

1. 通过id获取标签
var div = document.getElementByIv("box");
​
2. 通过标签名获得数组
var div = document.getElementsByTagName('div');
​
3.通过类名获得数组
var div = document.getElementsByClassName('haha');

绑定事件的方式

1.绑定匿名函数
<script type="text/javascript">
    var div1 = document.getElementById("box1");
    div1.onclick = function () {
    // 函数内容
    }
</script>
​
2.绑定定义了的函数
<script type="text/javascript">
    var div1 = document.getElementById("box1");
    div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
    //单独定义函数
    function fn() {
      // 函数内的内容
    }
</script>

<script type="text/javascript">
    window.onload = function () {
       //等页面加载完毕时，再执行的内容
    }
</script>

 

onload事件

js的加载是和html同步加载的

当页面加载（文本和图片）完毕的时候，触发onload事件。

建议：整个页面上所有元素加载完毕再执行js内容。window.onload可以预防使用标签在定义标签之前。