window.addEventListener有哪些事件

时间: 2023-12-05 08:36:56 浏览: 338

window.addEventListener来解决让一个js事件执行多个函数

可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。这时就要用window.attachEvent和window.addEventListener来解决一下,需要的朋友可以参考下在JavaScript编程中，经常需要处理各种用户交互事件，如点击、加载等。当需要一个事件触发时执行多个函数，单纯地使用`window.onload`或元素的`onclick`等事件处理方式可能会遇到问题，特别是在需要同时处理多个事件处理器时。这时，`window.attachEvent`和`window.addEventListener`就显得尤为重要。 `window.onload`是JavaScript中用于处理页面完全加载后的事件，它只能附加一个函数。如果尝试多次赋值，后面的函数会覆盖前面的。这可能导致在某些情况下，我们希望在页面加载完成后执行多个操作时出现问题。例如，如果我们有多个需要在页面加载后运行的函数`function1`、`function2`和`function3`，直接使用`window.onload`只会让最后一个注册的函数`function3`被执行。为了解决这个问题，我们可以使用`window.attachEvent`（适用于Internet Explorer）和`window.addEventListener`（适用于大多数现代浏览器，包括Firefox）。这两个方法允许我们为同一个事件添加多个处理函数，而不会互相覆盖。对于IE浏览器，我们可以这样使用`attachEvent`： ```javascript if (document.all) { window.attachEvent('onload', function1); window.attachEvent('onload', function2); window.attachEvent('onload', function3); } ``` 这样，`function1`、`function2`和`function3`都会在页面加载完成后被依次执行。`attachEvent`的执行顺序是按照它们被注册的顺序，即后注册的先执行。对于非IE浏览器，我们使用`addEventListener`： ```javascript else { window.addEventListener('load', function1, false); window.addEventListener('load', function2, false); window.addEventListener('load', function3, false); } ``` `addEventListener`同样会按照函数注册的顺序执行，但与`attachEvent`不同的是，它是先注册的先执行。第三个参数`useCapture`在此处通常设为`false`，表示在冒泡阶段调用事件处理函数。此外，对于DOM元素的事件处理，如按钮点击事件，也可以使用相同的方法。例如，对于一个ID为"btn1"的按钮，我们希望在点击时执行`method1`、`method2`和`method3`： ```javascript var btn1Obj = document.getElementById("btn1"); // IE btn1Obj.attachEvent("onclick", method1); btn1Obj.attachEvent("onclick", method2); btn1Obj.attachEvent("onclick", method3); // Mozilla等现代浏览器 btn1Obj.addEventListener("click", method1, false); btn1Obj.addEventListener("click", method2, false); btn1Obj.addEventListener("click", method3, false); ``` 在这里，`attachEvent`和`addEventListener`同样会按照它们被添加的顺序执行相应的函数。总结起来，`window.attachEvent`和`window.addEventListener`提供了在JavaScript中为同一事件添加多个处理函数的能力，使得我们能够灵活地组织代码，确保所有必要的操作在特定事件触发时都能得到执行，无论是页面加载还是其他用户交互事件。需要注意的是，这两个方法在不同的浏览器中表现有所不同，因此在编写兼容性良好的JavaScript代码时，需要根据目标浏览器的特性进行适当的适配。

window.addEventListener可以监听多种事件，包括但不限于： 1. click：鼠标点击事件 2. load：页面或资源加载完成事件 3. scroll：滚动条滚动事件 4. keydown：键盘按下事件 5. resize：窗口大小改变事件 6. mouseover：鼠标移入事件 7. mouseout：鼠标移出事件 8. submit：表单提交事件

阅读全文

window.addEventListener有哪些事件

相关推荐

解决vue 给window添加和移除resize事件遇到的坑

window.addEventListener有哪些监听事件

window.addEventListener和div.addEventListener和document.addEventListener

window.addEventListener和document.addEventListener

window.addeventlistener事件

window.addEventListener

window.addEventListener 添加事件监听 在什么时候进行销毁

window.addEventListener('resize')和window.onresize

window.addEventListener消除

window.addEventListener报错

window.addEventListener用法

取消 window.addEventListener

window.addEventListener失效

消除window.addEventListener

window.addEventListener移除

js window.addEventListener

python入门-30.寻找列表中只出现一次的数字-寻找单身狗.py

最新推荐

python入门-30.寻找列表中只出现一次的数字-寻找单身狗.py

火炬连体网络在MNIST的2D嵌入实现示例

管理建模和仿真的文件

L2正则化的终极指南：从入门到精通，揭秘机器学习中的性能优化技巧

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

Angular插件增强Application Insights JavaScript SDK功能

"互动学习：行动中的多样性与论文攻读经历"

L1正则化模型诊断指南：如何检查模型假设与识别异常值（诊断流程+案例研究）

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

实时三维重建：InfiniTAM的ros驱动应用

window.addEventListener 添加事件监听在什么时候进行销毁