电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: JS事件~（1） [打印本页]

作者: look_w 时间: 2019-4-12 13:45 标题: JS事件~（1）

DOM事件流

事件流包括三个阶段

捕获阶段
目标阶段
冒泡阶段
事件一开始从文档的根节点流向目标对象（捕获阶段），然后在目标对象上被触发（目标阶段），之后再回溯到文档的根节点（冒泡阶段）

所有的事件都会经过捕获阶段和目标阶段，但有些事件会跳过冒泡阶段，比如，让元素获得输入焦点的focus事件已经失去输入焦点的blur事件就都不会冒泡

事件处理程序

HTML事件处理程序

<input type="button" value="click me" onclick=“console.log(event.type)” />

<input type="button" value="click me" onclick=“handler(event)” />

结构和行为相耦合，不易维护
DOM 0级事件处理程序

btn.onclick = function(){
   ...
}

这种方式会在事件流的冒泡阶段被处理，删除事件 btn.onclick = null

DOM 2级事件处理程序
dom.addEventListenter() / dom.removeEventListener()
接收3个参数：要处理的事件名，函数，布尔值
可以为同一个元素添加多个同类型事件
按照顺序触发
IE事件处理程序
attachEvent() 和 detachEvent()
接收2个参数，事件名（要加‘on’），函数
IE8及之前的版本
只支持事件冒泡
可添加多个处理程序，但触发顺序是反着来的
最大的区别是：作用域是全局，this.id指的是 window的id

// 兼容性写法
function addEvent(type, el, fn){
   if(window.addEventListener){
      el.addEventListenter(type,fn,false)
   }else if(window.attachEvent){
      el.attachEvent('on'+type, fn)
   }
}
// 结合惰性函数的兼容性写法
   var addEvent = function (type, el, fn){
   if(window.addEventListener){
      addEvent = function(type, el, fn){
      el.addEventListenter(type,fn,false)
      }
   }else if(window.attachEvent){
      addEvent = function(type, el, fn){
         el.attachEvent('on'+type, fn)
      }
   }
}

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)