原生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>

原生javascript实现类似jquery on方法的行为监听的更多相关文章

  1. 原生 JavaScript 代码和Jquery实现对比

    下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...

  2. 原生JavaScript常用本地浏览器存储方法一(方法类型)

    有时需要将网页中的一些数据保存在浏览器端.好处就是当下次访问页面时,直接就可以从本地读取数据,不需要再次向服务器请求数据.目前常用的有以下几种方法: 1.cookie cookie会随着每次HTTP请 ...

  3. jQuery EasyUI/TopJUI输入框事件监听

    jQuery EasyUI/TopJUI输入框事件监听 代码如下: <div data-toggle="topjui-panel" title="" da ...

  4. [转]addEventListener() 方法，事件监听

    转载  白杨-M  http://www.cnblogs.com/baiyangyuanzi/p/6627401.html addEventListener() 方法,事件监听 你可以使用 remov ...

  5. addEventListener() 方法，事件监听

    知识点1:addEventListener() 方法,事件监听,可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(e ...

  6. addEventListener() 方法，事件监听（去哪儿网用到过）

    addEventListener() 方法,事件监听 你可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(event ...

  7. 从jQuery的缓存到事件监听

    不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性. <DIV id=d1 jQuery1294122065250=&q ...

  8. jQuery中四种事件监听的区别

    原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...

  9. 原生JavaScript常用本地浏览器存储方法四(HTML5 LocalStorage sessionStorage)

    HTML5 LocalStorage浏览器的支持的情况如上图,IE在8.0的时候就支持了.不过需要注意的是,IE测试的时候需要服务器环境(或者localhost). 测试自然是检测浏览器是否支持本地存 ...

随机推荐

  1. DataList用法总结

    设计模版: 页眉<HeaderTemplate>   </HeaderTemplate> 页脚<FooterTemplate> </FooterTemplat ...

  2. Azure 部署K8S(二)

    在"China Azure中部署Kubernetes(K8S)集群"一文中,我们使用的ACS Version及Kubernete Version版本都比较低,ACS Version ...

  3. Centos7 自定义systemctl服务脚本

    序言篇: 之前工作环境一直使用Centos6版本,脚本一直在使用/etc/init.d/xxx:系统升级到Cento7后,虽然之前的启动脚本也可以使用,但一直没有使用systemctl 的自定义脚本. ...

  4. css的reset和常用的html标签的默认样式整理

    先看下常用的这些标签浏览器的默认样式有哪些: body{ margin: 8px;} hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em; ...

  5. VMware Workstation中虚拟机的克隆

    1 克隆虚拟机 首先需要准备好一个安装好的系统,这里以linux为例进行演示. 在需要克隆的机器上右键选择管理==>克隆 选择需要克隆的虚拟机的状态,如果你想要的就是当前的状态,就直接选择虚拟机 ...

  6. Group by、having、order by、Distinct 使用注意事项

    直奔主题,如下SQL语句 SELECT COUNT(*) AS COUNT,REQUEST,METHOD FROM REQUESTMETH GROUP BY REQUEST,METHOD HAVING ...

  7. JAVA练手--集合

    集合框架体系如图所示 Collections:是一个工具类java.util.Collections(可以使用它对集合对象进行操作) Collection:除了map(键值对)其他集合的父类 1. S ...

  8. 基础语言知识C++

    强制转换: (Cplusplus基础与提高(何桂林)21页) static_cast:有隐式转换的 格式: static_cast<目标类型> (标识符) int a = 10; int ...

  9. 【很重要】优秀的常用的js库

    http://lodashjs.com/docs/   常用的各种工具库 sprintf  字符串格式 占位符替换等处理 devices.min.js

  10. shell脚本:行列转换

    Mybatis中写sql,如select,会涉及到一长串列名. `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(100) COLLATE ut ...