详解JS事宜 - 事宜模子/事宜流/事宜代办/事宜对象/自定义事宜

2024年5月16日 143次阅读 来源: Rainie

事宜模子

  • DOM0 级事宜模子 -没有事宜流，这类体式格局兼容一切浏览器

    // 体式格局一  将事宜直接经由历程属性绑定在元素上
<button onclick="clickBtn()"></button>
/ 体式格局二 获取到页面元素后，经由历程 onclick 等事宜，将触发的要领指定为元素的事宜
var btn = document.getElementById('btn')
btn.onclick = function () {...}
btn.onclick = null

  • IE 事宜模子 – 只要冒牌，仅在 IE 浏览器中有效，不兼容其他浏览器

    1. 事宜处置惩罚阶段：事宜在到达目的元素时，触发监听事宜
    2. 事宜冒泡阶段：事宜从目的元素冒泡到 document，而且一次搜检各个节点是不是绑定了监听函数，如果有则实行
    // 绑定事宜
el.attachEvent(eventType, handler)
// 移除事宜
el.detachEvent(eventType, handler)

  • DOM2 级事宜模子 – W3C规范模子，除 IE6-8 之外的一切当代浏览器都支撑该事宜模子

    1. 事宜捕捉阶段：事宜从 document 向下传播到目的元素，顺次搜检一切节点是不是绑定了监听事宜，如果有则实行 – 从外向内，把这个坐标转换为详细的元素上事宜的历程，就是捕捉历程(点击事宜来自触摸屏或许鼠标，鼠标点击并没有位置信息，然则平常操纵系统会依据位移的积累计算出来，跟触摸屏一样，供应坐标给浏览器）
    2. 事宜处置惩罚阶段：事宜在到达目的元素时，触发监听事宜
    3. 事宜冒泡阶段：事宜从目的元素冒泡到 document，而且一次搜检各个节点是不是绑定了监听函数，如果有则实行 – 从内向外，是人类处置惩罚事宜的逻辑
    // 绑定事宜
target.addEventListener(type, listener[, useCapture]);
// 移除事宜
target.addEventListener(type, listener[, useCapture]);

事宜流：

  • 浏览器事宜流向捕捉阶段、目的阶段、冒泡阶段，就是我们所说的- W3C事宜模子

  • 兼容的事宜绑定写法

    function bindEvent(obj, type, fn) {
    if (obj.addEventListener) {
      obj.addEventListener(type, eventFn);
    } else {
      obj.attachEvent("on" + type, eventFn);
    }
    function eventFn(ev) {
      var ev = ev || window.event;
      var target = ev.target || ev.srcElement;
      fn && fn(target, ev)
    }
  }

事宜代办

  • 定义：指运用“事宜冒泡”，只经由历程指定一个事宜处置惩罚递次，来治理某一范例的一切事宜
  • 长处：

    （1）能够大批节约内存占用，削减事宜注册，比如在table上代办一切td的click事宜就异常棒

    （2）能够完成当新增子对象时无需再次对其绑定事宜，关于动态内容部份尤其适宜

  • 瑕玷：仅限于上述需求下，如果把一切事宜都用代办就可能会涌现事宜误判，即本不运用触发事宜的被绑上了事宜
  • demo: 把动态列表的点击事宜，绑定在父元素上

事宜对象Event

元素举行事宜监听的时刻，它的回调函数里就会默许通报一个参数 event，它是一个对象

  • 属性：

    • event.target：指的是触发事宜的谁人节点，也就是事宜最初发作的节点(fn触发的元素)
    • event.currentTarget：指的是正在实行的监听函数的谁人节点(fn绑定的元素)
    • event.isTrusted：示意事宜是不是是实在用户触发。
    • event.preventDefault()：作废事宜的默许行动。
    • event.stopPropagation()：阻挠事宜的派发（包含了捕捉和冒泡）
    • event.stopImmediatePropagation()：阻挠同一个事宜的其他监听函数被挪用。
  • target和currentTarget区分：触发事宜的元素和事宜绑定的元素

  • stopPropagation和stopImmediatePropagation区分：

    • stopPropagation只对誊写的谁人事宜有效，再绑定另一个click失效
    • stopImmediatePropagation对绑定的许多范例的事宜都有效
  • 兼容写法： ev.target || ev.srcElement

addEventListener(W3C)

  • 参数：

    • 事宜称号 event
    • 事宜处置惩罚函数/具有 handleEvent函数的对象 listener

    • 第三个参数

      • once：只实行一次
      • passive：许诺此事宜监听不会挪用 preventDefault，这有助于机能
      • useCapture：是不是捕捉true（不然冒泡false）
  • 移除：removeEventListener(事宜称号、事宜回调、捕捉/冒泡)

自定义事宜：

只能在DOM元素上自定义事宜

//运用 Event 组织器来制造了一个新的事宜
var evt = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(evt);

面试题

  • 相识js的事宜吗？
  • 说说js的事宜/绑定事宜的要领?/相识事宜流吗？
  • 事宜流的递次是什么？

补充

  • React组件中怎样做事宜代办
  • React组件事宜代办的道理
  • React的事宜合成机制彷佛和js的不太一样 （绑定一个事宜到一个组件上）
  • Emit事宜怎样发，须要引入什么
  • 页面上天生一万个button，而且绑定事宜，怎样做（JS原生操纵DOM）
  • 增加原生事宜不移除为何会内存泄漏
  • vue 中的 native 修饰符
  • 挪动端点击穿透：fastclick
  • 手写原生js完成事宜代办，并请求兼容浏览器
  • 事宜怎样派发也就是事宜播送（dispatchEvent
  • 总结：https://www.cnblogs.com/dfyg-…
  • 手写一个冒泡排序处置惩罚事务
    原文作者：Rainie
    原文地址: https://segmentfault.com/a/1190000018977590
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞