事件

2019-08-12 本文已影响0人李霖弢

当dom元素被删除时,其绑定的事件也会消失

addEventListener

目前第三个参数可以为布尔值或对象

addEventListener(type, listener[, useCapture ])
addEventListener(type, listener[, options ])

为对象时默认配置如下

capture: false
passive: false
once: false

其中 capture 属性等价于以前的 useCapture 参数；once 属性就是表明该监听器是一次性的，执行一次后就被自动 removeEventListener 掉。
passive是因为浏览器无法预先知道一个监听器会不会调用 preventDefault()，只有等监听器执行完后再去执行默认行为，因此就会导致页面卡顿。而一旦passive为true，浏览器就可以直接执行默认行为而不等待。此时即使调用了 preventDefault() 也不会生效。

阻止冒泡

function myfn(e){//前者为IE,后者为W3C
  window.event? window.event.cancelBubble = true : e.stopPropagation();
}

在JQ中也可以直接使用return false;

阻止默认行为

function myfn(e){//前者为IE,后者为W3C
  window.event? window.event.returnValue = false : e.preventDefault();
}

或直接用return false;

mouseover 和 mouseenter 区别

不论鼠标指针穿过事件绑定元素或其子元素，都会触发 mouseover 事件。mouseout同理。
只有在鼠标指针穿过事件绑定元素时，才会触发 mouseenter 事件。mouseleave同理。

移动端 touch 和 click 区别

移动端点击后依次触发：touchstart => touchmove => touchend => click。
其中触碰后未移动或移动距离很小,则会在触碰结束后触发click事件，但click事件会有300ms延迟(为了等待用户手势操作)。可以引入Fastclick.js来解决这个问题。它会在检测到touchend事件时通过 DOM 自定义事件立即触发一个模拟click事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉(在touchstart事件回调中使用preventDefault可以避免触发click)。

点击穿透问题

由于click事件延迟300ms触发，在该期间内如果页面发生变化，原本触发touch事件的元素所在位置已被其他元素代替，则由该新元素触发click事件。

Event对象中，target和currentTarget的区别

e.currentTarget指向事件直接绑定的元素(如事件委托时的父元素)，而target指向当前事件真正被触发的位置(如事件委托时的子元素)

该特性可用于事件委托时,只对父元素添加事件监听,而通过target的不同确定到底是哪一个子元素触发的事件。

onfocus 与 onblur

form类标签本身支持onfocus与onblur
其他标签可以添加tabindex属性,以支持onfocus与onblur
页面也可以通过window.onblur和window.onfocus监听是否失去焦点

自定义事件

创建事件

普通的事件使用new Event即可创建，并可通过initEvent方法编辑事件

let event = new Event("ev");
//event.initEvent('ev', true, true);

但如果需要为事件传入detail信息，则需要使用new CustomEvent，并可通过initCustomEvent方法编辑事件

let event = new CustomEvent("newMessage", {
    detail: {// 数据将会在EventListener的event.detail中得到
        message: 1,
    },
    bubbles: true,
    cancelable: true
});
//event.initCustomEvent('ev', true, true, {message: 2});

还可以通过createEvent方法创建事件，通过此方法创建的事件必须经过initEvent或initCustomEvent初始化后才能发布

let event = document.createEvent('CustomEvent');
//event.initCustomEvent('ev', true, true, {message: 2});
//event.initEvent('ev', true, true);

触发事件

element.dispatchEvent(event);

监听事件

当一个事件触发的时候，如果相应的element及其上级元素没有对应的EventListener，就不会有任何回调操作。

document.addEventListener("newMessage",  function(e) {
  ...
})

事件