JavaScript事件——添加事件处理程序

一、事件处理程序 ===》添加

1》HTML事件处理程序
语法：把事件添加到了节点本身上（也可以添加fn函数）
#添加在节点上

#添加函数

#缺点：HTML和js耦合(若要修改，则在HTML结构修改后还要在js文件中改)

2》DOM 0级事件处理程序

语法：box.onclick = function(){ }

优点：不会耦合
可以直接在js文件内同时修改两处

特点：（单击事件）
同样的元素，同样的事件，后面的事件会覆盖前面的（弹出js）

缺点：在日常开发过程中，当A B两人都在开发项目时，这时候B就会覆盖A的


3》DOM 2级事件处理程序
语法：box. addEventListener(事件名称，函数， false/true)；
       参数1：事件名称不需要加on ===> lick
       参数2：函数
       参数3：false代表冒泡
                    true代表捕获
修正DOM 0级的覆盖型（会依次运行）
依次弹出1，2

缺点：在IE（8或者8以下）是不兼容的(会报错：dom对象不支持此属性/方法)

4》IE事件处理程序
语法：box.attachEvent(事件名称，函数)
参数1：事件名称需要加入on
参数2：函数


在IE中运行才有效，（IE11不行，切换到IE8）且不会覆盖前面事件

5》跨浏览器事件处理程序（即做兼容）
DOM 0级事件处理程序
DOM 2级事件处理程序
IE事件处理程序
步骤：
①封装函数，取名为setEvent
②兼容三者
box. addEventListener() DOM 2级
box. attachEvent () IE
box. onclick = function() {} DOM 0级
③调用函数，执行两个事件
注：字符串需要拼接；
js支持的语法格式[ ]，不能写成box. onclick
先写一个节点