html代码与样式

DOM共有4个级别：DOM0级、DOM1级、DOM2级和DOM3级。DOM事件共有3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理,暂时了解即可

DOM的0级事件

1.DOM0级事件的绑定方式:

1.1直接写在元素标签内 <div id="dv0" onclick="alert('标签内绑定事件')"></div>

1.2通过获取元素绑定事件

document.getElementById("dv0").onclick = function () {

alert("通过先获取此元素再绑定相应事件函数");

}

2.DOM0级事件的特点

DOM0级事件就是将一个函数赋值给一个事件处理属性,因此DOM0级事件具有以下特点

2.1 相同dom元素的相同事件只能注册一个,注册多个相同事件时会被后面的事件覆盖掉,只执行最后一个相同的事件函数

0级单击事件

0级事件本质原因是:0级事件就是为dom元素对象上的一个属性进行赋值,当赋值多次时以最后值为准,比如设置其背景色

两次设置其背景色,第一次设置的被覆盖掉;0级事件时多次注册相同事件其原理与此类同

2.使用的是事件冒泡机制 注册的事件函数执行顺序是由内而外地执行

事件冒泡:按钮在div中

DOM的2级事件

1.Dom2级事件绑定方式:对象.addEventListener(事件名称,事件处理函数,事件机制)

事件名称:名称为字符串类型,比如单击事件的click,名称没有on()

事件处理函数:就是function函数,函数中就是要执行的js代码

事件机制:布尔类型,其值 为true时是捕获机制 为false时是冒泡机制(默认机制)

div注册单击事件

2.Dom2级事件的特点

2.1为相同对象注册多个相同事件,不会被覆盖

注册同一个事件,了解即可

2.2可以设置触发机制即事件的冒泡/捕获机制(默认冒泡,不写最后一个参数或值为false)

设置事件机制

事件机制为true时,单击按钮时先执行div的事件,再执行按钮的事件

2.3可以移除某个事件(前提是注册事件时事件函数不能为匿名函数)

移除方式: 对象.removeEventListener(事件名称,事件函数名称,事件机制)

移除事件

3.在IE浏览器中IE8.0及以下不支持addEventListener这个绑定事件方法,需要使用对象.attachEvent()的方式绑定添加事件;移除事件使用对象.detachEvent()

注意:事件名称需要加on IE8及以下浏览器绑定方式没有第三个参数不能设置捕获阶段