window.onload用法及绑定多个函数详解

admin · 2022-1-17 14:51:14

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js代码的执行顺序</title>
</head>
<body>
<script type="text/javascript">
document.getElementById("btn").onclick=function () {
      alert("hello ");
}
</script>
<input type="button" value="hello" id="btn">
</body>
</html>

网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式:

一.将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。

二.通过window.onload来执行脚本代码

改进：
页面加载完毕后，load事件发生。然后执行read()函数。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js代码的至此那个顺序</title>
</head>
<body onload="read()">
<script type="text/javascript">
function read() {
      document.getElementById("btn").onclick = function () {
         alert("hello")
      }
}
</script>
<input type="button" value="hello" id="btn">
</body>
</html>
或者用：

<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8">
<title>Js代码的至此那个顺序</title></head>
<body ><script type="text/javascript">
/* window.οnlοad=read;
function read() {
      document.getElementById("btn").onclick = function () {
         alert("hello")
      } }*/
//或者，页面加载完毕后，load
window.onload=function () {
      document.getElementById("btn").onclick = function () {
         alert("hello")
      } }
</script><input type="button" value="hello" id="btn">
</body></html>
onload绑定多个事件异常处理：
window.onload=function a(){}
window.onload=function b(){}
以上代码并不能为window.onload事件绑定多个事件处理函数，而是最后一个会覆盖前面的所有函数。

解决方法一：

<script type="text/javascript">
window.onload=function(){
  function a(){ }
  function b(){ }
  a();
  b();
}
</script>
解决方法二：可以使用addEventListener()和attachEvent()为onload事件绑定事件处理函数，addEventListener()是当前标准的一种事件处理函数绑定方式，但是IE8和IE8以下的浏览器并不支持此方式。

addEventListener("type",函数名,false)

addEventListener()函数具有三个参数，第一个参数事件类型，需要注意的是，事件类型名称前面不能有on，例如window.onload事件，在这个地方只能写作load，第二个参数是要绑定的函数名称，第三个参数一般为false。

使用attachEvent()函数绑定事件处理函数:
IE9之前的的IE浏览器不支持addEventListener()函数，所以attachEvent()函数就有了用武之地了

attachEvent("type",函数名)

此函数只有两个参数，第一个参数是事件类型，不过它和addEventListener()的第一个参数的作用是一样，但是名称有所区别，名称前面是具有”on”，第二个参数就是要绑定的事件处理函数名称。

解决兼容性实例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>window.onload用法</title>
<style type="text/css">
#bg{`这里写代码片`
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
if(window.addEventListener){
  window.addEventListener("load",bg,false);
  window.addEventListener("load",changeW,false);
}
else{
  window.attachEvent("onload",bg);
  window.attachEvent("onload",changeW);
}

function bg(){
  document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
  document.getElementById("bg").style.width="200px";
}
</script>
</head>
<body>
以上代码代码解决了各大浏览器的兼容性问题。在上面代码中使用以下代码进行判断:
if(object.addEventListener)
{
object.addEventListener();
}
else{
object.attachEvent();
}

		自动登录	找回密码
密码			立即注册

window.onload用法及绑定多个函数详解

0 个回复

快速回复

admin

楼主热帖

相关帖子

标签云

艾Q网