原生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. SpringBoot整合MyBatis及Thymeleaf

    http://www.cnblogs.com/ludashi/archive/2017/05/08/6669133.html 上篇博客我们聊了<JavaEE开发之SpringBoot工程的创建. ...

  2. java中mongo的条件查询

    @Override public Page<ProductInfo> findAll(Pageable pageable, ProductInfo productInfo) { //创建一 ...

  3. eclipse如何设置UTF-8

    一.Eclipse设置utf-8编码包括两个方面,一方面可以设置workspace工作间编码,另一方面可以设置Android Project项目编码,设置步骤: 1)设置workspace工作间编码: ...

  4. github访问慢加速访问

    实测从1kb到了1m多 方法: 登录 https://www.ipaddress.com/ 输入github.com得到一个或两个IP地址 输入github.global.ssl.fastly.net ...

  5. 第1章—Spring之旅—Spring模块介绍

    Spring模块介绍 Spring7大核心模块: 核心容器(Spring Core) 核心容器提供Spring框架的基本功能.Spring以bean的方式组织和管理Java应用中的各个组件及其关系.S ...

  6. 设置spacevim字体显示乱码问题

    https://github.com/powerline/fonts clone powerline fonts 仓库 执行项目中的 install.sh 安装字体 修改终端配置中使用的字体为 xxx ...

  7. Freemarker不显示对象的属性

    Freemarker不显示对象的属性 今天使用Freemarker在springboot项目中通过模板生成一些html文件.但是发现没有显示对象的属性. 找了很长时间,终于发现不显示对象的属性可能是两 ...

  8. 08 Java 集合的线程安全问题

    1 Java中的集合 Java中的集合分为同步的集合(线程安全)和线程不安全的集合 例如 : ArrayList和Vector的区别: 一.同步性:Vector是线程安全的,也就是说是同步的,而Arr ...

  9. 转载：GitHub 新手详细教程

    GitHub 新手详细教程 https://blog.csdn.net/Hanani_Jia/article/details/77950594

  10. Veloce2 Emulator

    High capacity, high-speed, multi-application powerhouse for simulation and emulation of SoC designs ...