前端基本 — Web事宜总结

本文首发于民众号:相符预期的CoyPan

web中的事宜

事宜并非JavaScript的中心部份,他们是在浏览器的Web Api中定义的。下面枚举的几种状况,都属于发作了事宜。

  • 用户在某个元素上点击鼠标或悬停光标。
  • 用户在键盘中按下某个按键。
  • 用户调解浏览器的大小或许封闭浏览器窗口。
  • 一个网页住手加载。
  • 提交表单。
  • 播放、停息、封闭视频。
  • 发作毛病。

我们可以在代码中运用事宜处置惩罚器来处置惩罚种种事宜。

事宜模子

假定我们有这么一段html代码:

<html>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>Shady Grove</td>
                    <td>Aeolain</td>
                </tr>
                <tr>
                    <td>Over the River, Charile</td>
                    <td>Dorian</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

假如我们点击over the Rive, Charile,全部事宜流程以下:

《前端基本 — Web事宜总结》

事宜会阅历三个阶段,上图平离别由赤色、蓝色、绿色标出。第一阶段为赤色,事宜流从根元素一向走到点击的目的元素,这个历程称为捕捉。第二阶段为蓝色, 称为目的阶段。这个阶段中,会处置惩罚点击事宜,为事宜加上种种属性等。第三阶段为绿色,事宜又回从新回到根元素,这个历程称为冒泡。在全部事宜流中,我们在事宜流经由的任何元素上,都能监听到该事宜,从而举行处置惩罚。

平常发起在冒泡阶段处置惩罚事宜,如许可以最大限制的兼容种种浏览器。

注重:blur、focus、load、unload 等几个事宜不会冒泡。

原因是在于:这些事宜仅发作于自身上,而它的任何父节点上的事宜都不会发生,一切不会冒泡。

我们可以检察事宜的bubbles属性,来推断该事宜是不是可以冒泡。

事宜处置惩罚

EventTarget

EventTarget是一个由可以吸收事宜的对象完成的接口,而且可以为它们建立侦听器。Web中的一切事宜处置惩罚器都是由EventTarget“供应”的。

《前端基本 — Web事宜总结》

addEventListener

该要领将指定的监听器注册到 EventTarget 上,当该对象触发指定的事宜时,指定的回调函数就会被实行。 事宜目的可以是一个文档上的元素 Element,DocumentWindow或许任何其他支撑事宜的对象 (比方 XMLHttpRequest)。其规范语法以下:

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
  • type: 字符串。示意事宜范例,比方: click。
  • listener:函数。事宜触发时的回调函数。这个函数会接收一个Event事宜对象。这个Event事宜对象中,包含了以下主要的属性和要领(这里只枚举出常常使用的)

    属性
    bubbles只读。一个布尔值,示意该事宜是不是可以在DOM中冒泡。
    cancelBubble经由过程在一个事宜处置惩罚顺序返回前设置这个属性的值为真,来阻挠事宜冒泡。
    cancelable只读。一个布尔值,用来示意这个事宜是不是可以作废。
    currentTarget只读。注册事宜监听的对象。
    target只读。对事宜劈头目的的援用。
    要领作用
    preventDefault作废默许事宜
    stopPropagation阻挠事宜冒泡
  • options :对象。指定一个listener的设置参数。

    属性
    capture布尔值。假如为true,示意该listener会在捕捉历程当中实行。假如为false,listener会在冒泡历程当中实行。默许为false。
    once布尔值。默许为false。假如为true,listener只会实行一次,而且实行后会被自动移除。
    passive布尔值。假如为true,则没法挪用preventDefault来阻挠默许事宜。默许为false。这个属性有一个须要注重的处所。在safari浏览器的页面转动事宜中,这个值是默许的true。所以要阻挠safari中的页面转动,须要手动将这个值设为false。
  • useCapture:布尔值,可选。默许为false,事宜在冒泡历程当中触发listener
removeEventListener

删除运用addEventListener注册到target上的事宜。规范语法:

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

为了进步页面机能,我们在处置惩罚完某事宜,而且不必继承监听该事宜时,可以将之前注册的事宜监听函数移除。须要注重的是,假如注册事宜时,在捕捉或冒泡阶段均举行了监听,那末移除时须要离别移除。

currentTarget 与 target的区分

在事宜处置惩罚函数中,我们常常会运用到事宜的这两个属性。currentTarget示意注册事监听的对象。target示意事宜劈头的对象。举个例子:

<div id="father">
     <div id="child1">child1</div>
     <div id="child2">child2</div>
     <div id="child3">child3</div>
</div>

document.getElementById('father').addeventListener('click', function(e){
    console.log(e.currentTarget);
    console.log(e.target);
});

我们将事宜处置惩罚函数绑定在father上。如今,假如我们点击的是child1,因为child1是事宜源,那末e.target就是child1。而我们的事宜处置惩罚函数是绑定在father上的,所以,e.currentTarget就是father

这一点在开辟历程当中须要特别注重。

事宜代办

这个观点依赖于如许一个现实,假如你想要在大量子元素中单击任何一个都可以运转一段代码,您可以将事宜监听器设置在其父节点上,并将事宜监听器气泡的影响设置为每个子节点,而不是每个子节点零丁设置事宜监听器。举个例子:

<ul>
    <li>1<li>
    <li>2<li>
    <li>3<li>
    <li>4<li>
    <li>5<li>
    <li>6<li>
    <li>7<li>
    <li>8<li>
    <li>9<li>
</ul>

我们要完成点击每个li的时刻,输出li内对应的数字,我们固然可以直接在一切的li上离别绑定一个事宜。然则如许会形成内存的糟蹋。我们可以只在ul上绑定一个事宜,依据事宜的target来猎取当前点击的li,拿到该li内对应的数字。

document.querySelector('ul').addEventListener('click', function(e){
    if(e.target && e.target.nodeName === "LI") {
        console.log(e.target.innerHTML);
    }
});

自定义事宜

最新的DOM规范许可我们自定义事宜。直接看下面的例子。

var fakeNode = document.createElement('Coy'); // 建立一个自定义元素
var evt = document.createEvent('Event'); // 建立一个自定义事宜
var evtType = 'test'; // 自定义事宜的范例

// 事宜监听函数
fakeNode.addEventListener(evtType, function(e){ 
    console.log(e); // e.type === 'test';
}, false);

// 初始化事宜。
// initEvent用法:event.initEvent(type, bubbles, cancelable);
evt.initEvent(evtType, false, false); 

// 向fakeNode派发evt事宜
fakeNode.dispatchEvent(evt); 

写在背面

事宜,是前端开辟中的一个基本。虽然简朴,然则十分主要。

迎接关注我的民众号: 相符预期的CoyPan
做一位相符预期的FE
《前端基本 — Web事宜总结》

    原文作者:CoyPan
    原文地址: https://segmentfault.com/a/1190000017890471
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞