js原生addEventListener绑定事件注意事项

一、js原生addEventListener绑定事件注意事项

1、在使用JavaScript原生的addEventListener方法绑定事件时，重要的一点是明确理解其如何影响应用的全局作用域。特别是当事件绑定到像window这样的全局对象上时，需格外留意。

2、在单页面应用中，这种全局事件绑定可能引发误触问题。例如，当音频页面1和音频页面2共享一段代码片段时，如果在页面1中通过window.addEventListener('keydown', playAudio)绑定了一个按键事件处理函数，而在页面2中使用了相同的全局事件绑定逻辑，点击空格键时，可能会意外触发页面1和页面2的音频播放事件，导致两个音频同时播放。

3、这种现象背后的原因在于，当在全局作用域中添加事件监听器后，不论后续页面加载与否，这个监听器都始终存在。因此，即使切换到其他页面，当用户进行如键盘操作等事件时，仍有可能触发已绑定的全局事件。这不仅造成资源浪费，还可能产生用户体验上的不一致。

4、解决这一问题的关键在于，避免在全局作用域中使用全局事件绑定，特别是对于频繁切换页面的应用场景。可以采用事件委托（event delegation）的策略，即在某个父级元素上绑定事件监听器，通过事件冒泡机制来识别特定子元素的事件触发。这样，可以确保事件仅在特定元素上发生时被处理，有效减少全局事件监听带来的问题。

5、综上所述，理解并合理使用JavaScript原生的addEventListener方法，避免在全局作用域中进行事件绑定，可以有效减少单页面应用中可能出现的误触问题，提升应用的稳定性和用户体验。

二、window.addeventlistener怎么用

答案：`window.addEventListener`是 JavaScript中用于在浏览器窗口上添加事件监听器的方法。它允许开发者为窗口的各种事件绑定处理函数，以便在相应事件发生时执行特定的动作。其基本用法是：`window.addEventListener`。

1.基本语法与参数： `window.addEventListener`方法接受两个主要参数。第一个参数是事件的类型，第二个参数是当该事件触发时调用的函数。例如，如果想在用户点击窗口时执行某些操作，可以这样写：`window.addEventListener`。

2.方法的使用：在实际使用中，`functionToHandleEvent`是一个自定义的函数，它定义了当特定事件发生时应该执行的动作。这个函数可以接受一个事件对象作为参数，该对象包含了关于事件的详细信息。这样开发者可以根据这些信息做出相应的响应。

3.异步行为： `window.addEventListener`是异步的，这意味着添加的事件处理函数不会立即执行，而是在对应的事件实际发生时才会被调用。这使得开发者能够创建响应特定用户交互或浏览器行为的动态行为。

4.移除事件监听器：与添加事件监听器相对应，当不再需要某个事件处理函数时，可以使用 `window.removeEventListener`方法来移除它。这确保了代码的整洁性和性能的优化，避免了不必要的计算和资源占用。

使用 `window.addEventListener`时应注意性能和内存管理的问题。过多的事件监听器可能导致性能下降和内存泄漏，因此应该谨慎添加并适时移除不必要的监听器。同时，确保处理函数简洁高效，避免不必要的复杂逻辑和计算。

三、javascript 事件监听

在Javascript中，浏览器一般分为两大类：

①基于IE内核的浏览器（版本号小于9的IE浏览器）

②基于W3C内核的浏览器（版本号大于9的IE浏览器、Firefox、Google等浏览器）

dom对象.attachEvent(type，callback，capture)：为元素绑定事件监听程序

type：绑定的事件类型，如onclick、onmouseover、onmouseout

callback：事件的处理程序，通常是一个匿名函数

capture：使用的浏览器模型，冒泡模型与捕获模型，默认IE8以下的浏览器只支持冒泡模型！

2）基本语法：基于W3C内核的事件监听

dom对象.addEventListener(type，callback)：为W3C内核浏览器绑定事件监听

type：绑定事件类型，不带’on’前缀，如click，mouseover，mouseout

callback：事件的处理程序，通常是一个匿名函数

IE内核的监听方式与W3C内核的监听方式：

IE内核的浏览器使用attachEvent进行绑定

W3C内核的浏览器使用addEventListener进行绑定

IE内核浏览器，其绑定方式一共有三个参数type，callback，capture（使用的浏览器模型）

W3C内核浏览器，其绑定方式一共有二个参数，type和callback

IE内核的浏览器，type是需要添加’on’前缀的，如onclick

W3C内核浏览器，type是不需要添加’on’前缀的，如click

IE内核的浏览器，其事件监听是先绑定后触发，后绑定的先触发

W3C内核的浏览器，其事件监听是先绑定先触发，后绑定的后触发