js中绑定事件的三种方式

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　绑定事件

绑定事件有三种方式:

　　第一种，很土的，不管什么行为样式结构分离的，直接在标签里加事件

　　　　　　　　如<input type="button" value="点击"  onclick="say();"/>

　　　　　　　　看完整代码:

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^案件开始^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

=================　js部分===============

　　　　　　　  <script type="text/javascript"><!--此处为行为部分-->
 
 　　　　　　　　 function xin(){
　　　　　　　　　　　　　　　　   alert("abc");
  　　　　　　　 }
  
　　　　　
　　　　　　 </script>

===============html 部分===================

<input type="button"  onclick="xin()" value="点击" /><!--结构部分-->

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^案例结束^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^　

代码解释：

　　上面的代码写的不好，因为它相当于

　　　　　　 <script type="text/javascript"><!--此处为行为部分-->
 
 　　　　　　　　 function xin(){
　　　　　　　　　　　　　　　　   alert("abc");
  　　　　　　　 }

　　　　　　　　xin();//注意这里，如果在<input type="button" value="点击" onclick=xin() ;/>就是在这里调用这么个方法，此时这个方法属于window了.

　　　　　　 </script>

第二种绑定方式：

　　　　给dom对象直接加事件

　　　　document.getElementByTagName("input")[0].onclick=function (){ aler("abc")};

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^第二种绑定方式完整代码^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

js部分：

 <script type="text/javascript"><!--此处为行为部分-->
　　　　window.onload=function (){
　　　　　　　 var buttonObj=document.getElementsByTagName("input")[0];//给按钮加个click事件t*/

　　　　　　　buttonObj.onclick=function(){
   　　　　　　　　　　　　alert("xin");

　　　　　　　　　　 注意：这样的绑定方式，优点：　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　当alert(this);时，代表的是当前对象。即button这个dom对象

　　　　　　　　　　　　　　　　　　　　　不足：不能给一个事件绑定多个执行函数。
　　　 　　　　}  
 }
 </script>

html部分：

　　<input type="button"  value="点击" /><!--结构部分-->

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^案例结束^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^　

第三绑定方式domLev3事件绑定标准，为了弥补第二种方式不能绑定多个事件而产生

注意：第三种方式分支持w3c和IE非支持W3c而讨论

addEventListener('事件',函数);  // 第一个参数事件参数, 没有前缀"on", w3c的标准,IE不支持

 

注意点1: 如果添加了多个事件处理函数, 按"添加时的先后顺序来执行"

注意占2: 事件处理函数中的this 指代 DOM节点自身 (w3c标准)

注意点3: 第一个事件参数,一律把事件名称的'on'去掉 (w3c标准)

 

去除绑定

removeEventListener('事件',函数)

 

 

IE下绑定事件与解除事件的方法

attachEvent('事件',函数)   // 注意: 事件 要加on

detachEvent('事件',函数) // 事件依然要加on

 

 

总结一下:

W3c addEventListener 与IE的attachEvent()的不同

1: 函数名不同

2: 事件名不同, IE下要加on,w3c不加on

3: 加事件后的执行顺序不同, w3c按绑定事件的顺序来执行, 而IE6,7,是后绑定的事件先发生.

4: this的指向, w3c中,绑定函数中的this指向 DOM对象, 而IE6,7中,指向window对象