原生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>
原生javascript实现类似jquery on方法的行为监听的更多相关文章
- 原生 JavaScript 代码和Jquery实现对比
下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...
- 原生JavaScript常用本地浏览器存储方法一(方法类型)
有时需要将网页中的一些数据保存在浏览器端.好处就是当下次访问页面时,直接就可以从本地读取数据,不需要再次向服务器请求数据.目前常用的有以下几种方法: 1.cookie cookie会随着每次HTTP请 ...
- jQuery EasyUI/TopJUI输入框事件监听
jQuery EasyUI/TopJUI输入框事件监听 代码如下: <div data-toggle="topjui-panel" title="" da ...
- [转]addEventListener() 方法，事件监听
转载 白杨-M http://www.cnblogs.com/baiyangyuanzi/p/6627401.html addEventListener() 方法,事件监听 你可以使用 remov ...
- addEventListener() 方法，事件监听
知识点1:addEventListener() 方法,事件监听,可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(e ...
- addEventListener() 方法，事件监听（去哪儿网用到过）
addEventListener() 方法,事件监听 你可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(event ...
- 从jQuery的缓存到事件监听
不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性. <DIV id=d1 jQuery1294122065250=&q ...
- jQuery中四种事件监听的区别
原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...
- 原生JavaScript常用本地浏览器存储方法四(HTML5 LocalStorage sessionStorage)
HTML5 LocalStorage浏览器的支持的情况如上图,IE在8.0的时候就支持了.不过需要注意的是,IE测试的时候需要服务器环境(或者localhost). 测试自然是检测浏览器是否支持本地存 ...
随机推荐
- 如何在Cordova Android 7.0.0 以下版本集成最新插件 极光插件为例
前提 Cordova Android 7.0.0开始改变了项目安卓平台的架构.新建一个空项目分别添加Android 6.4.0 和 Android 7.0.0平台: cordova platform ...
- django 的 安全机制
xss 保护: xss攻击允许用户注入客户端脚本到其他用户的服务器上.通常通过存储恶意脚本到数据库,其他用户通过数据库获取恶意脚本,并在浏览器上呈现:或是使用户点击会引起攻击者javascirpt脚本 ...
- Eclipse署动态web项目方法
和MyEclipse不一样,在Eclipse中做的Web项目默认是不支持将项目发布到Web服务器上的,会发布到工作空间的某个目录,因此无法在外部启动Tomcat来运行Web项目,只有打开Eclipse ...
- random 模块常用方法学习
>>> import random#随机小数>>> random.random() # 大于0且小于1之间的小数0.7664338663654585>> ...
- 配置 CentOS 7 安装位置
红框里是CentOS 7安装程序检测到的硬盘,选择你想把系统安装到哪个硬盘当中. 点击 Add disk 按钮可以添加指定的附加设备或者网络设备(通过ISCSI.FCoE等方式添加硬盘) 此处设置分区 ...
- vue2.0用法技巧汇总
1.class拼接: 2.select下拉截取: <template> <!--vip班支付报名页面--> <div id="payRecordMain&quo ...
- 编写一个算法，将非负的十进制整数转换为其他进制的数输出，10及其以上的数字从‘A’开始的字母表示
编写一个算法,将非负的十进制整数转换为其他进制的数输出,10及其以上的数字从‘A’开始的字母表示. 要求: 1) 采用顺序栈实现算法: 2)从键盘输入一个十进制的数,输出相应的八进制数和十六进制数. ...
- (热死你)Resin https ssl Linux 配置，实战可用
(热死你)Resin https ssl Linux 配置,实战可用 一.配置resin 1.在resin服务器中创建目录keys文件和openssl.conf,格式内容如下: #先复制以下的内容: ...
- 释放linux端口
感谢作者的共享,在此表示感谢 有时候关闭软件后,后台进程死掉,导致端口被占用.下面以TOMCAT端口8060被占用为例,列出详细解决过程. 解决方法: 1.查找被占用的端口 netstat -tln ...
- JVM-垃圾收集过程的内存管理
JDK1.7 JVM的垃圾收集算法有 1. 标记-清除算法: 2. 复制算法:在商业虚拟机都是使用这种算法来回收新生代的 3. 标记-整理算法: 4.分代收集算法: JDK1.7 JVM的垃圾收集器有 ...