真正的了解事件绑定

来源：互联网发布：淘宝网儿童帽子编辑：程序博客网时间：2024/05/22 14:18

一、事件绑定
想了解什么是事件绑定前，我先写个小例子看一下：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            window.onload=function(){                alert('a');            }            window.onload=function(){                alert('b');            }        </script>    </head>    <body>    </body></html>

当有两个window.onload同时存在的时候，在页面中弹出的只是最后一个b。也就是说起作用的其实就是最后一个。
当然了有人会说那就都写一个window.onload里啊。但是我们应该考虑到在实际项目中，我们都是分工合作的，每个人都有自己的window.onload。那我们又想让这几个window.onload都起作用时，我们就用到了事件绑定。
下面我就举例说明事件绑定该如何应用
例如：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            window.onload=function(){                var oBtn=document.getElementById("btn");                oBtn.onclick=function(){                    alert('a');                }                oBtn.onclick=function(){                    alert('b');                }            }        </script>    </head>    <body>        <input type="button" name="btn" id="btn" value="点击" />    </body></html>

这是同样是只会显示最后一个b。跟刚刚的一样。这时候我们用到事件绑定
IE方式
attachEvent（事件名称，函数），这个呢是事件绑定的处理函数，现在我们加进去试一下

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            window.onload=function(){                var oBtn=document.getElementById("btn");//              oBtn.onclick=function(){//                  alert('a');//              }//              oBtn.onclick=function(){//                  alert('b');//              }                //attachEvent(事件要加'',后面是函数)//              这种方法只兼容IE                oBtn.attachEvent('onclick',function(){                    alert('a');                });                oBtn.attachEvent('onclick',function(){                    alert('b');                });            }        </script>    </head>    <body>        <input type="button" name="btn" id="btn" value="点击" />    </body></html>

当然还有除IE以外的写法
addEventListener（函数名称，函数，捕获），用法一样

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            window.onload=function(){                var oBtn=document.getElementById("btn");//              oBtn.onclick=function(){//                  alert('a');//              }//              oBtn.onclick=function(){//                  alert('b');//              }                //attachEvent(事件要加'',后面是函数)//              这种方法只兼容IE//              oBtn.attachEvent('onclick',function(){//                  alert('a');//              });//              oBtn.attachEvent('onclick',function(){//                  alert('b');//              });//非IE下起作用                oBtn.addEventListener('click',function(){                    alert('a')                },false);                oBtn.addEventListener('click',function(){                    alert('b')                },false);            }        </script>    </head>    <body>        <input type="button" name="btn" id="btn" value="点击" />    </body></html>

切记，这两种写法不能同时直接写。要想一起用就得用就得给他个 if，else。或者直接封装成一个函数调用。
我就直接介绍封装后的函数一起看下

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">//                   这个函数里面(对象,事件,函数)        function addEvent(obj,ev,fn){//          给判断(如果这个对象用的是attachEvent)            if(obj.attachEvent){//              那么就用IE的                obj.attachEvent('on'+ev,fn);            }            else{//              否则就用 非IE的写法                obj.addEventListener(ev,fn,false);            }        }            window.onload=function(){                var oBox=document.getElementById("box");//              下面就是调用                addEvent(oBox,'click',function(){                    alert('a');                });                addEvent(oBox,'click',function(){                    alert('b');                });            }        </script>    </head>    <body>        <input type="button" name="box" id="box" value="点击" />    </body></html>

这样在任何浏览器都可以使用。仅供参考！

0 0