DOM事件初步

一.关于事件（类比android监听器）

事件源（引发后续事件的标签）

事件（js已经定义好，直接使用）

事件驱动程序（对样式和html的操作）（DOM操作）

二.需求：点击盒子出现弹窗alert（1）；

步骤：

1.获取事件源（document.getElementById(“box”)）

2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）

3.书写事件驱动程序。

    //1.获取事件源（document.getElementById("box")）
    var div = document.getElementById("box");
    //2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）
    div.onclick = function () {
        //3.书写事件驱动程序。
        alert(1);
    }

三.事件的补充与扩展

1.获取事件源的方式（5种）

（1）var div = document.getElementById(“box”);通过id获取

（2）var arr1 = document.getElementsByTagName(“div”);通过标签名获取，返回一个数组

（3）var arr2 = document.getElementsByClassName(“leiming”);通过类名获取，返回一个数组

（4）var arr3 = document.getElementsByName(“aaa”);（不常用）

2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）

（1）匿名绑定

    div.onclick = function () {
        //3.书写事件驱动程序。
     alert(1);
        //可以操作标签的属性和样式。
        div.className = "aaa";
        div.style.width = "200px";
        div.style.height = "200px";
        div.style.backgroundColor = "red";
    }

(2)用函数名绑定

“`
div.onclick = fn ;
function fn() {

div.className=”change” ; //事件驱动程序

}

(3)行内绑定(不常用)