原生js中如果有多个onload事件解决方案
在一个页面中有两个JavaScript 分别都用到了window.onload
一个是:window.onload=func1,另一个是:window.onload=func2 这样就造成了一个JavaScript 运行不了。
方案一:
window.onload=function(){func1();func2();}
方案二:
用window.attachEvent和 window.addEventListener来解决问题了
window.addEventListener("load",调用函数名,false);//对于FireFox
window.attachEvent("onload",调用函数名)//对于IE
方案三
function addLoadEvent(func){
var oldonload = window.onload; //把现在有window.onload事件处理函数的值存入变量oldonload。
if(typeof window.onload != 'function'){ //如果这个处理函数还没有绑定任何函数,就像平时那样把新函数添加给它
window.onload = func;
}else{ //如果在这个处理函数上已经绑定了一些函数。就把新函数追加到现有指令的末尾
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(num1);
addLoadEvent(num2);
如果有人接下来的js写了一个加载事件:
window.onload = function(){ console.log('最后再来个页面加载函数')}
结果妥妥的被覆盖了,只会执行最后一个window.load的内容,因此方案三不可取
推荐使用现代浏览器事件绑定 方案二。
原生js中如果有多个onload事件解决方案的更多相关文章
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- 原生js中slice()方法和splice()区别
slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),sta ...
- ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题
问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
- 关于原生js中函数的三种角色和jQuery源码解析
原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...
- koa 基础(十七)原生 JS 中的类、静态方法、继承
1.app.js /** * 原生 JS 中的类.静态方法.继承 * es5中的类和静态方法 */ function Person(name, age) { // 构造函数里面的方法和属性 this. ...
- 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...
- 原生js中stopPropagation,preventDefault,return false的区别
1.stopPropagation:阻止事件的冒泡,但不阻止事件的默认行为. 最好莫过于用例子说明: <div id='div' onclick='alert("div") ...
- 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数
1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
随机推荐
- Docker Java程序镜像制作
Docker Java程序镜像制作 制作前的准备 jre:不需要完整的jdk,jre即可,到Oracle进行下载即可,下载链接,根据自己的情况进行选择,这里选择jre-8u221-linux-x64. ...
- Kali中安装 Shodan
工具介绍 Shodan 是一个搜索引擎,但它与 Google 这种搜索网址的搜索引擎不同,Shodan 是用来搜索网络空间中在线设备的,你可以通过 Shodan 搜索指定的设备,或者搜索特定类型的设备 ...
- cpp调用c的动态库
目录 cpp调用c的动态库 title: cpp调用c的动态库 date: 2019/11/22 20:34:29 toc: true --- cpp调用c的动态库 CPP文件里这么引用头文件即可 e ...
- 《C专家编程》读书笔记之第8~11章
八.为什么程序员无法分清万圣节和圣诞节 1. 整形提升是指char,short int和位段类型(无论signed或unsigned)以及枚举类型将被提升为int或unsigned int(如果int ...
- Shortest Unsorted Continuous Subarray
Given an integer array, you need to find one continuous subarray that if you only sort this subarray ...
- [转帖]ubuntu 修改 apt源的方法
https://www.cnblogs.com/dadonggg/p/11129973.html ubuntu 和 centos 是不一样的 ubunut 里面 用deb开头 放置到 /etc/apt ...
- 常见的几种web攻击
1. SQL注入 2. OS命令注入 3. 跨站脚本攻击(XSS) 4. HTTP首部注入 5. 会话劫持 6. 跨站点请求伪造(CSRF) 7. 点击劫持 8. DoS
- 19牛客暑期多校 round2 H 01矩阵内第二大矩形
题目传送门//res tp nowcoder 目的 给定n*m 01矩阵,求矩阵内第二大矩形 分析 O(nm)预处理01矩阵为n个直方图,问题转换为求n个直方图中的第二大矩形.单调栈计算,同时维护前二 ...
- Android试题
1. Binder:例子: https://blog.csdn.net/qq_33208587/article/details/82767720
- LeetCode 答案(python)1-17
1.给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, 15], targe ...