详解javascript事件绑定使用方法

2018-06-24 00:36:45来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

由于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>

  

这段js代码,运行结果是弹出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');

  


标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS padding margin border属性详解

下一篇:CSS3基础 02(2D /3D)