Dom事件

LZDROID
215 阅读2分钟

事件流

事件流描述的是从页面中接收事件的顺序。大家都知道，IE这家伙就是搞特殊，于是出现了两个版本，（不可忽视IE所带来的积极的作用，哈哈）

  • IE的事件冒泡流
  • Netscape的事件捕获流 实际上，这两个就是我后来晓得的DOM事件流，在DOM2级事件中，规定了事件流包括了的三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段。（虽然DOM2中规定了事件从document开始，但大多数浏览器都是从window对象开始捕获的，还有也规定也要求捕获阶段不会涉及事件目标，但大多数浏览器也都在捕获阶段触发了对象上的事件，结果就是说，有两个机会在目标对象上面操作事件）-参考JS高级编程
    --图片来自网络

事件处理程序

  • HTML的事件处理程序，就是将js写在HTML中
  • DOM0级的事件处理程序 element.click = function(){}
  • DOM2级的事件处理程序 element.addEventListTener('click',function(){},false) 最后一个布尔参数代表是否在捕获阶段调用事件处理函数，一般为false,就是在冒泡阶段调用这个事件处理函数IEelement.attachEvent('onclick',function(){}) （DOM2级的好处就是可以添加多个事件处理函数，但是如果想要调用removeEventListener来移除之前添加的事件，则需要将函数以函数变量的形式提取出来，只将函数名作为参数传入）
someFun = function(){}
element.addEventListener('click',someFun,false)
element.removeEventListener('click',someFun,false)
  • DOM3级就是新添了很多时间，例如Keyup等

event事件对象

上面所说的事件的处理函数中，会有一个默认的event对象

element.click = function(event){
    event.preventDefault() 取消事件的默认行为
    event.stopPropagation() 取消事件的进一步的捕获或者冒泡
    event.stopImmediatePropagation() 取消事件的进一步的捕获或者冒，同事阻止任务事件处理程序被调用，（就是加入这个元素绑定了两个处理函数，使用这个会阻止另一个触发）
    event.currentTarget 事件绑定的那个元素上
    event.target 当前点击的元素，它和上面那个大哥常用于事件委托优化
}

自定义事件

var eve = new Event('test')
element.addEventListener('test',function(){})
触发
element.dispatcher(eve)

有的时候面试会问Event和CustomEvent的区别，就是后者可以携带参数

// create and dispatch the event
var event = new CustomEvent("cat", {
  detail: {
    hazcheeseburger: true
  }
});
// add an appropriate event listener
obj.addEventListener("cat", function(e) {});

obj.dispatchEvent(event);
avatar
文章
阅读
粉丝