幽灵资源网 Design By www.bzswh.com

由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所出现的错误。如果有多个javascript文件,那么极有可能出现多个window.onload事件,但是最后起作用的只有一个,这时候就需要使用事件绑定来解决这个问题了。

IE方式
attachEvent(事件名称, 函数),绑定事件处理函数
detachEvent(事件名称, 函数),解除绑定

DOM方式
addEventListener(事件名称,函数, 捕获)
removeEventListener(事件名称, 函数, 捕获)

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
<script> 
window.onload=function () 
{ 
  var oBtn=document.getElementById('btn1'); 
  oBtn.onclick=function () 
  { 
    alert('a'); 
  }; 
   
  oBtn.onclick=function () 
  { 
    alert('b'); 
  }; 
}; 
</script> 
</head> 
<body> 
<input id="btn1" type="button" value="按钮" /> 
</body> 
</html> 

这段代码,运行结果是弹出b,因为有两个oBtn的点击事件,但是只执行了最后一个,这时候就体现出事件绑定的重要性了。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
<script> 
window.onload=function () 
{ 
  var oBtn=document.getElementById('btn1'); 
  //IE浏览器 
  if(oBtn.attachEvent) 
  { 
    oBtn.attachEvent('onclick', function () 
    { 
      alert('a'); 
    }); 
    oBtn.attachEvent('onclick', function () 
    { 
      alert('b'); 
    }); 
  } 
  //其他浏览器 
  else 
  { 
    oBtn.addEventListener('click', function () 
    { 
      alert('a'); 
    }, false); 
    oBtn.addEventListener('click', function () 
    { 
      alert('b'); 
    }, false); 
  } 
   
}; 
</script> 
</head> 
<body> 
<input id="btn1" type="button" value="按钮" /> 
</body> 
</html> 

当你使用事件绑定的时候,那么两次点击事件都会执行,只是执行顺序在不同浏览器是不同的。在IE中是自下而上执行,而在其他浏览器中是自上而下,不过由于alert的特殊性我们可以看出差别,其他语句基本等同于没有差别,但是在对于一些对时间要求严格是事件的使用时还是需要注意的,比如之前有一篇文章图片轮播中的setInterval对时间的细微的差别最后导致滚动混乱。 基于原生javascript的图片轮播domo

最后将我们的代码整理成函数,便于之后的使用

function myAddEvent(obj, ev, fn) 
{ 
  if(obj.attachEvent) 
  { 
    obj.attachEvent('on'+ev, fn); 
  } 
  else 
  { 
    obj.addEventListener(ev, fn, false); 
  } 
} 

这时候如果需要使用多个window.onload事件其实就和使用多个oBtn.onclick事件差不多了。如下调用函数即可。

myAddEvent(window,'load',function () 
{ 
  alert('a'); 
}); 
myAddEvent(window,'load',function () 
{ 
  alert('b'); 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
js,事件绑定

幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?