javascript的事件绑定_<script language=javascript for=-CSDN博客

本文链接：https://blog.csdn.net/hawklbb/article/details/3085229

js的事件绑定有几种方法如下（以button为例）：

1.<button id="btn" οnclick="alert('static')"></button>
2.btn.οnclick=function(){}
3.btn.attachEvent("onclick",function(){})

4.<SCRIPT LANGUAGE=javascript FOR=btn EVENT=onclick()>
dosomething()
</script>

那么这么多方法，有什么区别呢？

经过尝试，总结如下：

1是最常用的方式，不需要解释

2.通过为事件方法属性注册一个函数句柄，此种方式最后的注册的会覆盖前面注册的方法。

3.通过内置函数attach的事件是以类似于堆栈的方式来调用，不会覆盖。后注册的事件会先被调用。

4.此种方式的绑定同第二种，后绑定的会覆盖前绑定的事件。

总结：1，2，4的绑定方式个人感觉其本质上是一致的。其实都是以覆盖的方式重新指定了button的onclick方法

而3，我个人理解为一种关联，在原有事件的基础上关联新的方法。

所以，1，2，4只能绑定一个，后绑定的覆盖先绑定的。用3可以关联上多个方法，只是需要注意一下调用顺序。

附测试代码：

<html>
<head>
  <script>
//   window.attachEvent("onload",function(){
//    alert('on load');
//   });
//
//   window.οnlοad=function(){
//   alert('on load 2');
//   }
//   wbody.οnlοad="alert(2222);"

//   btn.οnclick=function(){
//    alert('outer on click');
//   }
   function regbtn(){
    btn.attachEvent("onclick",function(){
     alert('attach events');
    });
    btn.οnclick=function(){
     alert('1');
    }
//    btn.attachEvent("onclick",function(){
//     alert('attach events2');
//    });
//    btn.οnclick=new function(){
//     alert('2');
//    }
//    btn.attachEvent("onclick",function(){
//     alert('attach events3');
//    });
//    btn.οnclick=function(){
//     alert(3);
//    }
   }

   function selfclick(){
    alert('self event');
   }
  </script>
  <SCRIPT LANGUAGE=javascript FOR=btn EVENT=onclick()>
   //regbtn();
   alert('tag 1');
  </script>
  <SCRIPT LANGUAGE=javascript FOR=btn EVENT=onclick()>
   selfclick()
  </script>
  <script>


  </script>
</head>

<body id='wbody' οnlοad='regbtn()'>
  <input id='btn' type=button value='223213'/>

</body>
</html>