首页 > 代码库 > 每日一题_JavaScript.两种方式实现网页加载后onload绑定多个函数?
每日一题_JavaScript.两种方式实现网页加载后onload绑定多个函数?
具体需求:
1. 为网页加载后触发的onload事件绑定多个执行函数
实现思路:
1. 可直接给onload绑定一个匿名函数,匿名函数内部调用多个函数
2. 可自定义个函数,首先保存之前window.onload的值,然后判断window.onload的类型是否为function,如果不是就让window.onload的值设置为自定义的函数,否则就先执行window.onload之前绑定的函数,然后在执行自定义的函数
具体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
function func1(){
alert(/(?:function)([^\(]+)/.exec(arguments.callee)[1])
}
function func2(){
alert(/(?:function)([^\(]+)/.exec(arguments.callee)[1])
}
// 方法一, 给onload绑定一个匿名函数,在匿名函数内部调用多个函数
window.onload = function(){
func1()
func2()
}
// 方法二, 定义一个函数来接受要绑定的方法,判断window.onload当前值来加载执行
function addOnLoadEvent(func){
var oldOnLoad = window.onload
if(typeof window.onload == ‘function‘){
window.onload = function(){
oldOnLoad()
func()
}
}else{
window.onload = func
}
}
addOnLoadEvent(func1)
addOnLoadEvent(func2)
</script>
</body>
</html>
总结说明:
1. 强烈推荐第二种更加灵活的方式来创建多函数绑定,其实此方法还可以支持大多数内置事件处理方法,但是一定要注意的是一定要将函数赋值给window.onload,千万不要直接调用,不然会出现意想不到的结果.
本文出自 “ζ自动化运维开发之路ζ” 博客，请务必保留此出处http://xmdevops.blog.51cto.com/11144840/1854704
每日一题_JavaScript.两种方式实现网页加载后onload绑定多个函数?
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。