重探浏览器事件(浅析事件编程化)

时间: 2019-01-29阅读: 160标签: 浏览器

前言

在平常开发过程中,就算不使用现在主流的框架也至少得使用个Jquery,这些工具帮我们统一不同浏览器平台之间的差异和细节,可以将注意力集中到开发上来.不过有意思的一点是,在看完高程的N年后我居然连event对象中的target和currentTarget属性的区别都忘记了.

先提几个引子:

  • 你能说出event.currentTarget和event.target的区别吗?
  • 如果可以那么event.srcElement和事件监听函数中的this呢
  • 如何使用编程的方式来触发事件,而不借助浏览器默认触发方式?
  • 如何创建一个我们自己的Event对象,然后自定义我们的事件?
  • 实现上方的内容的同时该如何兼容IE浏览器?

如果这几个内容你都熟悉了,那么这篇文章不会给你带来太多的帮助.

在正文开始之前先来浏览一个表格,来看一下不同浏览器之间Event对象的属性有何不同:

<button id="button">click me then change word</button>
  var button = document.getElementById('button');

  button.addEventListener('click',function (event) {
    console.log(event);
  });

在下方的表格中我们记录了不同浏览器之间click点击后event可用的属性列表(删除了控制台输出的原型和函数引用):

firefox67chrome72edge44.17763.1.0ie11ie9
altKeyaltKeyaltKeyaltKeyaltKey
bubblesbubblesbubblesAT_TARGETAT_TARGET
buttonbuttonbuttonbubblesbubbles
buttonsbuttonsbuttonsBUBBLING_PHASEBUBBLING_PHASE
cancelBubblecancelBubblecancelablebuttonbutton
cancelablecancelablecancelBubblebuttonsbuttons
clientXclientXclientXcancelablecancelable
clientYclientYclientYcancelBubblecancelBubble
composedcomposedctrlKeyCAPTURING_PHASECAPTURING_PHASE
ctrlKeyctrlKeycurrentTargetclientXclientX
currentTargetcurrentTargetdefaultPreventedclientYclientY
defaultPreventeddefaultPreventeddetailconstructorconstructor
detaildetaileventPhasectrlKeyctrlKey
eventPhaseeventPhasefromElementcurrentTargetcurrentTarget
explicitOriginalTargetfromElementheightdefaultPreventeddefaultPrevented
isTrustedisTrustedisPrimarydetaildetail
layerXlayerXisTrusteddeviceSessionIdeventPhase
layerYlayerYlayerXeventPhasefromElement
metaKeymetaKeylayerYfromElementisTrusted
movementXmovementXmetaKeyheightlayerX
movementYmovementYmovementXhwTimestamplayerY
mozInputSourceoffsetXmovementYisPrimarymetaKey
mozPressureoffsetYoffsetXisTrustedoffsetX
offsetXpageXoffsetYlayerXoffsetY
offsetYpageYpageXlayerYpageX
originalTargetpathpageYmetaKeypageY
pageXrelatedTargetpointerIdoffsetXrelatedTarget
pageYreturnValuepointerTypeoffsetYscreenX
rangeOffsetscreenXpressurepageXscreenY
rangeParentscreenYrelatedTargetpageYshiftKey
regionshiftKeyreturnValuepointerIdsrcElement
relatedTargetsourceCapabilitiesscreenXpointerTypetarget
returnValuesrcElementscreenYpressuretimeStamp
screenXtargetshiftKeyrelatedTargettoElement
screenYtimeStampsrcElementrotationtype
shiftKeytoElementtargetscreenXview
srcElementtypetiltXscreenYwhich
targetviewtiltYshiftKeyx
timeStampwhichtimeStampsrcElementy
typextoElementtarget
viewytwisttiltX
whichtypetiltY
xviewtimeStamp
ywhichtoElement
widthtype
xview
ywhich
width
x
y

通过这个表格我们可以观察Event对象在不同浏览器之间结构是不同的,出人意料的是即使是在现代浏览器中事件对象也存在着差异.

当然这篇文章可不是将所有的Event属性都将一遍,要知道不同的事件的Event对象结构是不同的.

吐槽:本来是打算提供IE8的但是ie8不能使用addEventListener来监听事件懒得去搞ie那套数据了.


currentTarget,target,srcElement,this

currentTarget

一句话:

哪个元素上监听的事件,event.currentTarget返回的就是这个对象的本身的引用.

如果你的一个事件监听函数被注册到了多个DOM元素上,利用这个属性你就可以判断是谁触发的事件.

this

回调函数中的this === event.currentTarget.

button.addEventListener('click',function (event) {
      console.log(event.currentTarget === this); // true
});

target

event.target和上面的三者不同,这里面涉及到了DOM中的一个基本知识事件冒泡和事件拦截.

关于这两点我相信大家都已经了解了,即使不了解网上介绍的文章也有一大堆.

我们用事件冒泡来举例,并且改写我们之前的那个例子:

  <div id="wrap">
    <button id="button">test click</button>
  </div>
    var 
      wrap = document.getElementById('wrap'),
      button = document.getElementById('button');

    // 注意我们监听的是wrap的click事件,而不是button的click事件
    wrap.addEventListener('click',function (event) {
      
      // event.target指向的是按钮,因为我们点击的是按钮
      console.log(event.target === button && event.target === event.srcElement); // true

      // 当我们点击按钮触发的事件冒泡到了wrap,所以触发了wrap的click事件,
      // 此时currentTarget指向的是wrap
      console.log(wrap===this && wrap === event.currentTarget); // true

      // 直接打印event然后控制台中查看currentTaget会返回null
      // 你可以将他赋值到一个变量在打印输出这个变量
      // see https://github.com/vuejs/vue/issues/6867#issuecomment-338195468
    })

在这个例子中,我们点击页面中的按钮,然后再按钮的包裹div中接收到了button冒泡上来的事件,这其中:

  • this 和 currentTarget指向的都是添加了监听器的对象这里就是wrap
  • target 和 srcElement指向的是触发了事件的元素

事件委托也是event.target最常见的用途之一:

// Make a list
var ul = document.createElement('ul');
document.body.appendChild(ul);

var li1 = document.createElement('li');
var li2 = document.createElement('li');
ul.appendChild(li1);
ul.appendChild(li2);

function hide(e){
  // e.target 引用着 <li> 元素
  // 不像 e.currentTarget 引用着其父级的 <ul> 元素.
  e.target.style.visibility = 'hidden';
}

// 添加监听事件到列表,当每个 <li> 被点击的时候都会触发。
ul.addEventListener('click', hide, false);
https://developer.mozilla.org...

srcElement

简单理解event.srcElement === event.target.

Event.srcElement 是标准的 Event.target 属性的一个别名。它只对老版本的IE浏览器有效。

https://developer.mozilla.org...

参考之前的表格后看来这个属性还没有被干掉,在目前最新的浏览器上它依然存在,不过已经不建议使用,除非你需要向下兼容.


完整的事件编程

EventTarget接口

当我们在使用如下的方法的时候:

  • elem.addEventListener
  • elem.removeEventListener
  • elem.dispatchEvent

实际上是在使用EventTarget接口上的功能.

例如我们可以创建一个新的EventTarget对象来添加事件监听:

    const a = new EventTarget;

    a.addEventListener('click',()=>{
      
    })

但是这没有任何意义,因为这里没有事件被触发.我们仅仅是添加了事件监听器而已.

为了达到我们目的通过编程的方式来执行完整的事件流程我们还需要完成如下的几步:

  • 继承EventTarget而不是直接使用EventTarget的实例,
  • 在事件监听函数中传递Event对象
  • 找个地方来触发这个事件

首先我们来继承EventTarget对象:

继承EventTarget

在浏览器中大部分可以添加删除事件的对象都继承了EventTarget对象.

你可以在控制台选择一个HTML元素一路查找原型链得到.

但是他们进过重重继承,都有自己的独特属性和事件类型甚至是不同的构造函数.

为了和已有的事件进行区分我们这里需要对EventTarget进行继承:

    // --- 包装EventTarget开始
    function MyEventTarget() {
      var target = document.createTextNode(null);
      this.addEventListener = target.addEventListener.bind(target);
      this.removeEventListener = target.removeEventListener.bind(target);
      this.dispatchEvent = target.dispatchEvent.bind(target);
    }
    MyEventTarget.prototype = EventTarget.prototype;
    // --- 包装EventTarget结束

    // --- 创建我们继承EventTarget的构造函数
    function myElem() {
      
    }

    myElem.prototype = new MyEventTarget;
    myElem.prototype.constructor = myElem;

    // 创建实例
    const instance = new myElem();

instance.addEventListener('click',()=>{
    // 现在我们实例可以监听事件了
});

    console.log(instance);

继承的过程看似非常复杂,尤其是包装EventTarget显得多此一举.但是搞定EventTarget的继承确实花了我大量的时间去寻找解决方案.

你完全可以编写自己的继承方式来去继承EventTarget,不过你会发现这其中的坑非常深.

简单来说,EventTarget在JavaScript中真的就是一个接口,虽然是以函数的形式存在,但是它不是构造函数(这点在Chrome64 和firefox59后进行了修改).

总之通过原型链继承的EventTarget统统无法工作,如果使用ES6的类式继承在现代浏览器中(Chrome64和firefox59后)可以使用class来进行继承.

详细参考:https://stackoverflow.com/que...


创建我们的Event对象

获取一个event:

document.getElementById('button').addEventListener('click',(event)=>{
      // event
      console.log(event);
    })

如果你在浏览器中运行这段代码并且在控制台中查看,你会发现变量event的名称MouseEvent,如果你沿着原型链向上你会发现继承的是UIEvent再次向上查看则是真正的Event.

事件触发中传递的第一个参数我们通常叫它event,所有的event对象都基于Event,但是这不意味着这种关系的窗户纸就只有一层,click事件中的event和Event之间就隔着一个UIEvent.

通常随着event继承的层数越多,event对象身上的属性也会越来越多.

现在我们来创建一个标准的Event对象:

// 使用全局的Event
new Event('test',{ // 事件类型
      bubbles:false, // 是否冒泡 默认false
      cancelable:false,// 是否可以被取消 默认false
    });
https://developer.mozilla.org...

如果你在浏览器中观察这个对象,你会发现事件上常见的属性诸如:

  • event.target
  • event.currentTarget
  • event.preventDefault()

都在这个new Event()返回的对象中,由于其他类型的事件都继承自Event这也解释了为什么事件对象中总是有这些属性.

和继承EventTarget一样,使用Event的过程也同样艰难,总的来说使用Event的难点在于它有两套API:

  1. 第一套比较新的API提供了现代的接口,也就是之前例子中的方式.
    在创建一个已有的事件的时候,你只需要使用全局的构造函数就可以,
    例如:new MouseEvent('test',/*对应MouseEvent的参数选项*/),
    但是缺点就是不支持IE浏览器.
  2. 第二套API支持IE浏览器,但是使用过程比较繁琐
    使用Event.createEvent(/*事件类型*/)创建对应事件类型的Event对象,
    使用Event.initEvent()来初始化事件,并且提供对应事件类型的参数,
    如果你创建一个MouseEvent类型的事件InitEvent方法最多需要15个参数.
    这种情况下使用new MouseEvent()传入对象配置的形式就简单多了.
一篇值得参考的文章,使用createEvent api

https://www.cnblogs.com/ggz19...

此外不同种类的事件,都有自己的全局构造函数,不同类型的构造函数的第二个参数中的选项也是不同的.

其他的构造函数请参考这里.


触发我们的事件

触发事件就显得简单多了,我们需要使用EventTarget.dispatchEvent方法.

在我们之前创建的实例上进行事件的触发:

    function MyEventTarget() {
      var target = document.createTextNode(null);
      this.addEventListener = target.addEventListener.bind(target);
      this.removeEventListener = target.removeEventListener.bind(target);
      this.dispatchEvent = target.dispatchEvent.bind(target);
    }
    MyEventTarget.prototype = EventTarget.prototype;
    function myElem() {

    }

    myElem.prototype = new MyEventTarget;
    myElem.prototype.constructor = myElem;

    const instance = new myElem();

    instance.addEventListener('test', (event) => {
      console.log(event); // 监听事件并且打印实例
    });

    const myEvent = new Event('test'); // 创建Event实例

    instance.dispatchEvent(myEvent); // 触发事件

当你调用dispatchEvent的时候,EventTarget会按照对应事件注册的顺序来同步执行这些事件监听器.

如果在事件监听器中调用了event.preventDefault,那么dispatchEvent就返回false反之返回true(前提是cancleable为true).

详细参考https://developer.mozilla.org...


编程式的事件触发

我们在页面中来一次具体的实战,首先建立如下的HTML结构:

<div id="wrap">
    <button id="button">test click</button>
</div>

我们在#wrap中监听click事件,然后在#button触发click事件.

这样我们可以练习一下Event中bubbles(允许冒泡)参数的使用,

另外还可以测试click事件中的Event对象如果不是MouseEvent的实例那么监听器是否会被触发.

    const
      button = document.getElementById('button'),
      wrap = document.getElementById('wrap');

    wrap.addEventListener('click', (event) => {
      console.log(event); // 打印event对象
    });

    const myEvent1 = new Event('click', {
      bubbles: false, // 不可以冒泡
    });

    const myEvent2 = new Event('click', {
      bubbles: true, // 可以冒泡
    });

    button.dispatchEvent(myEvent1); // 这次没有打印出内容
    button.dispatchEvent(myEvent2); // 这次打印出了内容

结论很明确:

  • dispatchEvent执行的时候只要是Event的实例且类型相同那么监听器就会被触发.
  • bubbles参数可以控制该事件是否允许冒泡


监听浏览器刷新及关闭

为保证‘高度安全性’,用户每次退出页面或浏览器都要清除登陆信息,每次进入系统都要重新登陆(每次登陆还要手机验证码等乱七八糟的验证信息,,,求用户的心里阴影面积),但是刷新页面不可以清除登陆信息。

简洁明了探索浏览器Event loop

前段时间我对于浏览器Event loop中的MacroTask和MicroTask哪个先执行有所困惑,苦于搜索也没有发现很明确的答案,于是决定深入探索浏览器Event loop,现有所愚见,想与大家分享

微软新 Edge 有时会假扮成不同浏览器

Chromium 版 Microsoft Edge 近日被发现会根据所访问的站点模拟其他浏览器。这可能是出于兼容性原因。随着新版 Edge 的发布,微软现在使用 Chromium Blink 引擎而不是原始的 EdgeHTML 引擎。

解决v-lazy-image在qq浏览器x5内核下无效

在安卓qq浏览器中,v-lazy-image始终无法显示。经调试,发现qq浏览器中IntersectionObserver缺少一个isIntersecting字段,而v-lazy-image插件是根据isIntersecting来显示图片的

js通过window.navigator获取平台信息

获取浏览器信息需要使用navigator.userAgent 对象 根据获取到的内容判断浏览器信息navigator.userAgent。IE11浏览器 已经不能用msic 来判断是否是IE11了

Google阻止我写Web浏览器?

Metastream 创始人 Samuel Maddock 在其博客中称:“过去的两年中,我一直致力于一个网页浏览器的开发,却被谷歌阻止。开源浏览器 Chrome 的创建者竟不允许将数字版权授予开源项目。

浏览器会内置类react框架

从Prototype.js到风靡全球的jQuery.js,都是在解决浏览器间DOM操作的差异化问题,同时也提供了简洁友好的API,但是随着标准的不断的推进,现在浏览器间的差异化可以说已经没有了

禁止(防止)浏览器自动填充密码

由于设置autocomplete属性和添加隐藏文本框,以及在初始化时阻止写入等方法都无法完全满足需求,所以只能通过js逻辑来控制。 其中提示相关的代码使用的是layui的layer模块,可以换成自己想用的东西

总结整理HTML5浏览器支持情况总结整理HTML5浏览器支持情况

HTML5浏览器支持情况:现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐、谷歌、Safari和Opera等等,通过对这些主流web浏览器的发展策略调查,发现它们都支持HTML5上采取了措施。

js监听浏览器后退事件

如果在浏览器执行了回退操作,则会触发页面弹出“不可回退”弹框,当然这里可以进行你所需要的不同的处理; 代码如下:

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全