2025-03-02 日报 Day113

2025-03-02 日报 Day113

Yuyang 前端小白🥬
  2025-03-02 2025-03-02 创建   2025-05-15 05:34:02 2025-05-15 05:34:02 更新      

今日的鸡汤

花会沿路盛开，
你以后的路也是。

今日学习内容

1、JS 红皮书 P543-548 第十七章：事件

今日笔记

1、模拟事件: 事件就是为了表示网页中某个有意义的时刻。通常，事件都是由用户交互或浏览器功能触发。事实上，可能很少有人知道可以通过 JavaScript 在任何时候触发任意事件，而这些事件会被当成浏览器创建的事件。这意味着同样会有事件冒泡，因而也会触发相应的事件处理程序。这种能力在测试 Web 应用时特别有用。

  • DOM事件模拟: 任何时候，都可以使用 document.createEvent()方法创建一个 event 对象。这个方法接收一个参数，此参数是一个表示要创建事件类型的字符串。在 DOM2 中，所有这些字符串都是英文复数形式，但在 DOM3 中，又把它们改成了英文单数形式。可用的字符串值是以下值之一。
     “UIEvents”（DOM3 中是”UIEvent”）：通用用户界面事件（鼠标事件和键盘事件都继承自这个事件）。
     “MouseEvents”（DOM3 中是”MouseEvent”）：通用鼠标事件。
     “HTMLEvents”（DOM3 中没有）：通用 HTML 事件（HTML 事件已经分散到了其他事件大类中）。
    创建 event 对象之后，需要使用事件相关的信息来初始化。每种类型的 event 对象都有特定的方法，可以使用相应数据来完成初始化。方法的名字并不相同，这取决于调用 createEvent()时传入的参数。
    事件模拟的最后一步是触发事件。为此要使用 dispatchEvent()方法，这个方法存在于所有支持事件的 DOM 节点之上。dispatchEvent()方法接收一个参数，即表示要触发事件的 event 对象。调用 dispatchEvent()方法之后，事件就“转正”了，接着便冒泡并触发事件处理程序执行。
  • 模拟鼠标事件: 模拟鼠标事件需要先创建一个新的鼠标 event 对象，然后再使用必要的信息对其进行初始化。要创建鼠标 event 对象，可以调用 createEvent()方法并传入”MouseEvents”参数。这样就会返回一个 event 对象，这个对象有一个 initMouseEvent()方法，用于为新对象指定鼠标的特定信息。initMouseEvent()方法接收 15 个参数，分别对应鼠标事件会暴露的属性。这些参数列举如下。
     type（字符串）：要触发的事件类型，如”click”。
     bubbles（布尔值）：表示事件是否冒泡。为精确模拟鼠标事件，应该设置为 true。
     cancelable（布尔值）：表示事件是否可以取消。为精确模拟鼠标事件，应该设置为 true。
     view（AbstractView）：与事件关联的视图。基本上始终是 document.defaultView。
     detail（整数）：关于事件的额外信息。只被事件处理程序使用，通常为 0。
     screenX（整数）：事件相对于屏幕的 x 坐标。
     screenY（整数）：事件相对于屏幕的 y 坐标。
     clientX（整数）：事件相对于视口的 x 坐标。
     clientY（整数）：事件相对于视口的 y 坐标。
     ctrlkey（布尔值）：表示是否按下了 Ctrl 键。默认为 false。
     altkey（布尔值）：表示是否按下了 Alt 键。默认为 false。
     shiftkey（布尔值）：表示是否按下了 Shift 键。默认为 false。
     metakey（布尔值）：表示是否按下了 Meta 键。默认为 false。
     button（整数）：表示按下了哪个按钮。默认为 0。
     relatedTarget（对象）：与事件相关的对象。只在模拟 mouseover 和 mouseout 时使用。
    1
    2
    3
    4
    5
    6
    7
    8
    let btn = document.getElementById("myBtn"); 
    // 创建 event 对象
    let event = document.createEvent("MouseEvents"); 
    // 初始化 event 对象
    event.initMouseEvent("click", true, true, document.defaultView, 
     0, 0, 0, 0, 0, false, false, false, false, 0, null); 
    // 触发事件
    btn.dispatchEvent(event);
  • 模拟键盘事件: 在 DOM3 中创建键盘事件的方式是给 createEvent()方法传入参数”KeyboardEvent”。这样会返回一个 event 对象，这个对象有一个 initKeyboardEvent()方法。这个方法接收以下参数。
     type（字符串）：要触发的事件类型，如”keydown”。
     bubbles（布尔值）：表示事件是否冒泡。为精确模拟键盘事件，应该设置为 true。
     cancelable（布尔值）：表示事件是否可以取消。为精确模拟键盘事件，应该设置为 true。
     view（AbstractView）：与事件关联的视图。基本上始终是 document.defaultView。
     key（字符串）：按下按键的字符串代码。
     location（整数）：按下按键的位置。0 表示默认键，1 表示左边，2 表示右边，3 表示数字键盘，4 表示移动设备（虚拟键盘），5 表示游戏手柄。
     modifiers（字符串）：空格分隔的修饰键列表，如”Shift”。
     repeat（整数）：连续按了这个键多少次。
    注意，DOM3 Events 废弃了 keypress 事件，因此只能通过上述方式模拟 keydown 和 keyup 事件：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    let textbox = document.getElementById("myTextbox"), 
     event; 
    // 按照 DOM3 的方式创建 event 对象
    if (document.implementation.hasFeature("KeyboardEvents", "3.0")) { 
     event = document.createEvent("KeyboardEvent"); 
     // 初始化 event 对象
     event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 
     0, "Shift", 0); 
    } 
    // 触发事件
    textbox.dispatchEvent(event);
  • 模拟其它事件: 鼠标事件和键盘事件是浏览器中最常见的模拟对象。不过，有时候可能也需要模拟 HTML 事件。模 拟 HTML 事件要调用 createEvent()方法并传入”HTMLEvents”，然后再使用返回对象的initEvent()方法来初始化：
    1
    2
    3
    let event = document.createEvent("HTMLEvents"); 
    event.initEvent("focus", true, false); 
    target.dispatchEvent(event);
    这个例子模拟了在给定目标上触发 focus 事件。
  • 自定义DOM事件: 自定义事件不会触发原生 DOM 事件，但可以让开发者定义自己的事件。要创建自定义事件，需要调用 createEvent(“CustomEvent”) 。返回的对象包含initCustomEvent()方法，该方法接收以下 4 个参数。
     type（字符串）：要触发的事件类型，如”myevent”。
     bubbles（布尔值）：表示事件是否冒泡。
     cancelable（布尔值）：表示事件是否可以取消。
     detail（对象）：任意值。作为 event 对象的 detail 属性。
    自定义事件可以像其他事件一样在 DOM 中派发，比如：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    let div = document.getElementById("myDiv"), 
     event; 
    div.addEventListener("myevent", (event) => { 
     console.log("DIV: " + event.detail); 
    }); 
    document.addEventListener("myevent", (event) => { 
     console.log("DOCUMENT: " + event.detail); 
    }); 
    if (document.implementation.hasFeature("CustomEvents", "3.0")) { 
     event = document.createEvent("CustomEvent"); 
     event.initCustomEvent("myevent", true, false, "Hello world!"); 
     div.dispatchEvent(event); 
    }
    2、小结: 事件是 JavaScript 与网页结合的主要方式。最常见的事件是在 DOM3 Events 规范或 HTML5 中定义的。虽然基本的事件都有规范定义，但很多浏览器在规范之外实现了自己专有的事件，以方便开发者更好地满足用户交互需求，其中一些专有事件直接与特殊的设备相关。
    围绕着使用事件，需要考虑内存与性能问题。例如：
     最好限制一个页面中事件处理程序的数量，因为它们会占用过多内存，导致页面响应缓慢；
     利用事件冒泡，事件委托可以解决限制事件处理程序数量的问题；
     最好在页面卸载之前删除所有事件处理程序。
    使用 JavaScript 也可以在浏览器中模拟事件。DOM2 Events 和 DOM3 Events 规范提供了模拟方法，可以模拟所有原生 DOM 事件。键盘事件一定程度上也是可以模拟的，有时候需要组合其他技术。IE8及更早版本也支持事件模拟，只是接口与 DOM 方式不同。
    事件是 JavaScript 中最重要的主题之一，理解事件的原理及其对性能的影响非常重要。
此页目录
2025-03-02 日报 Day113
  1. 今日学习内容
  2. 今日笔记