原生javascript实现类似jquery on方法的行为监听

原生javascript有addEventListener和attachEvent方法来注册事件，但有时候我们需要判断某一行为甚至某一函数是否被执行了，并且能够获取前一行为的参数，这个时候就需要其他方法来实现了。

项目中的原始场景是有若干个tab切换，tab组件当然是已经写好的，现在需要每次点击后保存localstorage等其他操作，需要监听tab是否被点击。下面是简单的实现事件监听方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件注册</title>
</head>
<body>
    <button id="test">点击</button>
    <script type="text/javascript">
    var BC=(function(){
         var attachFunctionList = {};
         //事件通知
         var notify=function(notifyName){
             var args=Array.prototype.slice.call(arguments,1);
             attachFunctionList[notifyName].fun.apply(attachFunctionList[notifyName].scope,args);
             return this;
         }
         //事件监听
         var attach = function(notifyName, callback) {
             if(typeof notifyName ==="string"&&typeof callback==="function"){
                 attachFunctionList[notifyName]={
                     fun:callback
                 };
             }
             return this;
         }
         return {
             attach:attach,
             notify:notify
         }
     })();
         var $test=document.getElementById("test");
         $test.onclick=function(){
             var name="hz";
             BC.notify("clicked",name);//按钮点击后通知该事件已经发生了，并把当前参数传递过去
         }
         //监听到按钮被点击后进行其他操作
         BC.attach("clicked",function(name){
             alert("事件注册成功！参数是："+name);
         })
    </script>
</body>
</html>

 

posted @ 2015-02-28 14:04  沉默术士  阅读(3726)  评论(0)  编辑  收藏  举报