`

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

 
阅读更多

可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件。你可以全写在body中,也可以全放到window.onload中,但是这样并不是很方便,有时我们需要两个同时用到。这时就要用window.attachEvent和window.addEventListener来解决一下。 

下面是一个解决方法。至于attachEvent和addEventListener的用法,可以自己Google或百度一下。 

复制代码代码如下:

if (document.all){ 
window.attachEvent('onload',函数名)//IE中 

else{ 
window.addEventListener('load',函数名,false);//firefox 


在近来的工作中,用到了attachEvent方法,该方法可以为某一事件附加其它的处理事件,有时候可能比较有用,这里将其基本用法总结一下。 

其语法可以查看《DHTML手册》,里面有详细的说明,这里贴一个例子,该例子来自互联网: 

复制代码代码如下:

document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3; 


如果这样写,那么将会只有medhot3被执行 

写成这样: 

复制代码代码如下:

var btn1Obj = document.getElementById("btn1"); 
//object.attachEvent(event,function); 
btn1Obj.attachEvent("onclick",method1); 
btn1Obj.attachEvent("onclick",method2); 
btn1Obj.attachEvent("onclick",method3); 


执行顺序为method3->method2->method1 

如果是Mozilla系列,并不支持该方法,需要用到addEventListener 

复制代码代码如下:

var btn1Obj = document.getElementById("btn1"); 
//element.addEventListener(type,listener,useCapture); 
btn1Obj.addEventListener("click",method1,false); 
btn1Obj.addEventListener("click",method2,false); 
btn1Obj.addEventListener("click",method3,false); 


执行顺序为method1->method2->method3

分享到:
评论

相关推荐

    js window.open iframe dialog

    `window.open`是JavaScript中的一个内置函数,用于打开一个新的浏览器窗口或者标签页。它的基本语法是: ```javascript window.open(url, name, features); ``` - `url`: 指定新窗口或标签页加载的网页地址。 - `...

    window.location.hash解析

    在JavaScript编程中,`window.location.hash` 是一个非常重要的属性,它用于获取或设置当前URL的哈希值,也就是URL中“#”后面的部分。这个属性在开发网页应用时经常被用来实现页面内的导航和锚点定位。这篇博客文章...

    重写window.alert方法

    在JavaScript的世界里,`window.alert`是一个非常常见的方法,它用于弹出一个带有消息的对话框,用户只能点击“确定”来关闭这个对话框。在Web开发中,有时我们需要自定义`alert`的行为,比如添加更多的交互性或者...

    javascript页面加载完执行事件代码

    如果需要在页面加载完毕后执行多个操作,则必须在一个函数内组织这些操作,或者使用某些框架提供的方法将多个函数合并起来。 当然,随着前端技术的发展,为了提升页面加载性能,特别是在有多个脚本或大型应用时,...

    仿window.alert()效果的确认窗口

    在网页开发中,`window.alert()` 是一个常用的JavaScript函数,用于向用户显示警告对话框,通常包含一条消息和一个“确定”按钮。然而,有时开发者可能希望创建更复杂的交互,比如添加“确认”或“取消”的选项,这...

    【JavaScript源代码】vue使用echarts图表自适应的几种解决方案.docx

    另外,如果多个Vue组件都使用此方法,resize事件可能会被覆盖,导致处理函数冲突。此外,当路由跳转到新页面时,旧页面的resize事件仍然生效,可能导致性能问题。 2. **使用`window.addEventListener('resize', ...

    attachEvent和addEventListener 使用方法

    此外,`loadevent.html` 文件可能包含一个关于页面加载事件的示例,例如使用 `window.onload` 或 `DOMContentLoaded` 事件来确保元素加载完成后执行某些操作。在IE中,可以使用 `attachEvent` 添加 `window.onload` ...

    windowOpen打开新窗口

    在Web开发中,`window.open()` 是一个非常重要的JavaScript函数,用于在用户的浏览器中打开新的窗口或标签。这个函数在创建交互式用户体验时扮演着关键角色,允许开发者控制新窗口的大小、位置以及加载的URL。现在...

    100多个很有用的JavaScript函数以及基础写法汇总

    以上就是从给定文件中提取的部分JavaScript基础知识和函数,这些内容涵盖了变量声明、数据类型转换、DOM操作、事件处理等多个方面,对于初学者和进阶开发者都非常有用。理解并掌握这些知识点,能够帮助你更好地编写...

    window.js 主要包含了页面的一些操作

    在JavaScript中,`window.js`通常是一个用于处理与浏览器窗口或页面交互的脚本文件。这个文件中的功能主要集中在获取和操作页面上的元素,以及处理与这些元素相关的样式和事件。以下是对`window.js`中部分代码的详细...

    JavaScript 事件绑定及深入

    这种方式更加强大灵活,不会覆盖之前的事件处理函数,允许多个函数在同一个事件上执行。 例如: ```javascript box.addEventListener('click', function() { alert('Lee'); }); ``` 可以为同一个事件绑定多个函数...

    如何在 HTML 中调用 JavaScript 函数而不使用 onclick.docx

    `addEventListener` 方法允许我们为同一个元素添加多个事件监听器,而且可以响应不同类型的事件,如鼠标悬停(mouseover)、双击(dblclick)等。下面是一些使用 `addEventListener` 的实例: 1. 使用常规函数: ``...

    动态的绑定事件addEventListener方法的使用

    这意味着你可以为同一个事件添加多个监听器,它们会按照添加的顺序依次执行。此外,与早期版本的`onxyz`事件处理属性不同,`addEventListener`不会覆盖已有的事件处理函数,而是将其添加到处理函数队列中。 `...

    js鼠标滑过上下图标内容会上下滚动,鼠标滑过左右图标内容会左右滚动

    JavaScript(简称JS)是一种广泛用于网页和网络应用的编程语言,尤其在动态效果和交互性方面表现出色。在这个项目中,我们关注的是通过鼠标悬停事件实现内容的上下左右滚动。这种功能通常用于创建更丰富的用户体验,...

    javascript十个最常用的自定义函数.pdf

    // 为每一个事件处理函数分派一个唯一的 ID if (!handler.$$guid) handler.$$guid = addEvent.guid++; // 为元素的事件类型创建一个哈希表 if (!element.events) element.events = {}; // 为每一个"元素/事件...

    最常用的10个javascript自定义函数(english)

    这个函数通过检查浏览器是否支持 `addEventListener` 方法来决定使用哪种方法添加事件监听器。如果浏览器不支持,则尝试使用 `attachEvent` 方法(主要针对旧版IE浏览器)。 #### 2. addLoadEvent() - **功能概述...

    一些常用且实用的原生JavaScript函数.docx

    为了支持多个回调,可以创建一个兼容的函数: ```javascript function iLoad(func) { var oLoad = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload...

    javascript函数的解释

    例如,可以通过`addEventListener`或`attachEvent`绑定事件监听器,`setInterval`或`setTimeout`用于定时执行任务,以及`XMLHttpRequest`或`fetch`实现异步数据请求。 总之,JavaScript函数是实现网页动态功能的...

Global site tag (gtag.js) - Google Analytics