javascript事件处理总结

二、事件处理程序

事件意味着用户或浏览器执行的某种动作。比如，单击（click）、加载（load）、鼠标悬停（mouseover）。为响应事件而调用的函数被称为事件处理程序（或事件监听器）

<input type=“button” value=“Echo Username”

οnclick=“console.log(username.value)”>

事件处理程序的代码就可以不必引用表单元素，而直接访问同一表单中的其他成员了

上述例子中，点击按钮会显示出文本框中包含的文本，注意，事件处理程序中的代码直接引用了username

<input type=“button” value=“Click Me”

οnclick=“try{showMessage();}catch(ex) {}”>

为防止在函数定义前触发事件处理程序，通常事件处理程序会封装在try/catch块中，以便在这种情况下静默失败

赋值和移除

• DOM2事件处理程序

赋值addEventListener()和移除removeEventListener()都接收3个参数：事件名、事件处理函数和一个布尔值（true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序）

DOM2事件处理程序的主要优势是可以为同一个事件添加多个事件处理程序

let btn = document.getElementById(“myBtn”);

btn.addEventListener(“click”, () => {

console.log(this.id); // 点击按钮先打印元素ID

}, false);

btn.addEventListener(“click”, () => {

console.log(“Hello world!”); // 然后显示消息Hello world!

}, false);

需要特别注意的是，使用addEventListener()添加的匿名函数无法移除

// 匿名函数事件程序无法移除

let btn = document.getElementById(“myBtn”);

btn.addEventListener(“click”, () => {

console.log(this.id);

}, false);

// 其他代码

btn.removeEventListener(“click”, function() { // 没有效果！

console.log(this.id);

}, false);

// 建议以下形式抽取一个公共处理函数

let btn = document.getElementById(“myBtn”);

let handler = function() {

console.log(this.id);

};

btn.addEventListener(“click”, handler, false);

// 其他代码

btn.removeEventListener(“click”, handler, false); // 有效果！

• IE事件处理程序

IE 实现了与 DOM 类似的方法，即 attachEvent()和 detachEvent() 。这两个方法接收两个同样的参数：事件处理程序的名字和事件处理函数

与DOM2相同：使用 DOM 方法类似，作为事件处理程序添加的匿名函数也无法移除

与DOM2不同：同一事件添加多个事件处理程序时，以添加的顺序反向触发

三、内存与性能

JavaScript 中，页面中事件处理程序的数量与页面整体性能直接相关

• 每个函数都是对象，都占用内存空间，对象越多，性能越差

• 指定事件处理程序所需访问DOM的次数会造成整个页面交互的延迟

事件委托

当我们页面中的 处理程序过多时 ，可以采用的解决方案是使用 事件委托

我们可以利用事件冒泡的特性，只使用一个事件处理程序来管理一个类型的事件

• Go somewhere
• Do something
• Say hi

• 其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

  这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  《前端开发四大模块核心知识笔记》

  

  最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

  我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。