01-DOM0

DOM(Document Object Module) 文档对象模型
DOM0 0 指的是DOM第一次发布标准的版本号
在DOM的第一个版本中 规定了事件的处理相关信息
这个标准 就叫做DOM 0
将一个事件处理函数 添加给一个元素的事件处理属性
DOM0 规定每个事件处理属性 只能添加 一个事件处理函数
DOM0 被叫做 事件绑定
window.onload = function () {
var btn = document.querySelector(‘#btn’);

  1. 解绑事件 将事件处理属性 赋值为null <br />   btn.onclick = function () {<br />        alert('ok');<br />        btn.onclick = null;   解绑事件<br />      }

02-DOM2

DOM2 事件处理方式 叫做 事件监听
node.addEventListener(type,callback[,bool=false]);
type(string) 事件类型
callback(function) 事件处理函数
bool false 冒泡 / true 捕获
事件类型 type 没有 on
node.removeEventListener(type,fnName);
type(string) 事件类型
fnName 函数名
————————————————————————————-
DOMContentLoaded 它的作用是替代 window.onload
DOMContentLoaded 的速度比window.onload 快
DOMContentLoaded 事件 来自 HTML5 标准
这个事件不能使用事件绑定添加 只能使用事件监听
document.addEventListener(‘DOMContentLoaded’, function () {
console.log(2);
var btn = document.querySelector(‘#btn’);
事件监听 可以为一个事件添加多个事件处理函数
当事件监听为元素添加事件处理函数时 会自动创建一个 事件池(event pool) 事件池是一个队列
事件池将事件处理函数 自动进行去重处理
队列也是一种常见的数据结构(FIFO First In First Out)
事件处理函数的执行顺序 是按照 添加顺序 依次执行

03-事件兼容

function addEvent(elm, type, callback) {
if (typeof elm.addEventListener === ‘function’) { 判断浏览器是否支持 addEventListener
elm.addEventListener(type, callback);
} else {
elm.attachEvent(‘on’ + type, callback);
}
}

04-惰性函数

惰性函数
函数功能在初始情况下 不确定
在第一次函数执行结束后 才能确定函数的功能
function fn(level) {
if (level == 1) {
fn = function () {
console.log(1);
}
} else if (level == 2) {
fn = function () {
console.log(2);
}
}
return fn(level);
}

05-事件处理周期

事件处理周期
指的是 事件在DOM中的传播过程
在标准DOM中 事件的处理周期 一共分为三个阶段
1. 事件捕获 事件沿DOM树向下传播
2. 目标触发 执行事件处理函数
3. 事件冒泡 事件沿DOM树向上传播
注意: ie9以下的浏览器 没有事件捕获阶段
所有鼠标事件 都会历经这三个阶段 但是只会表现两个阶段( 触发/冒泡 捕获/触发)
事件绑定(DOM0) 只能实现 (触发/冒泡)
事件监听(DOM2) 默认情况也是(触发/冒泡)

06-阻止捕获和冒泡

window.onload = function () {
var box = document.querySelector(‘#box’);
var btn = document.querySelector(‘#btn’);
所有的事件处理函数 第一个参数都是事件对象
event(会自动被JS引起添加到事件处理函数的参数中)
ev.stopPropagation() 阻止事件捕获/冒泡
box.addEventListener(‘click’, function (ev) {
console.log(1);
ev.stopPropagation();
});

  1.   btn.onclick = function (ev) {<br />       console.log(ev);<br />         在低版本的IE中 event 对象 不是事件处理函数的参数  而是全局对象<br />         window.event - > event<br />        ev = ev || event;  获得 event 对象 兼容ie<br />        if (ev.stopPropagation) {  判断浏览器是否支持该函数<br />          ev.stopPropagation();<br />        } else {<br />          ev.cancelBubble = true;  ie浏览器阻止冒泡<br />        }<br />        console.log('btn');<br />      }<br />    }

07-事件委托

  1.  事件委托(事件委派)<br />     将目标元素的事件处理函数 添加给它的 父级元素 或 祖先级元素<br />     利用事件冒泡的特性 判断事件的目标源 为目标添加事件<br />     使用JavaScript创建添加的元素 叫做 未来元素<br />     使用事件委托 可以给未来元素添加事件<br />box.onclick = function (ev) {<br />        console.log(ev.target);  event.target 获得事件的目标元素(事件源)<br />         console.log(this);  永远指向函数的调用者 box<br />        console.log(ev);<br />      }<br /> 事件委托的作用<br />       1. 可以给未来元素添加事件<br />       2. 减少DOM元素的查找次数<br />       3. 减少事件的添加次数