原生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). 测试自然是检测浏览器是否支持本地存 ...
随机推荐
- HTML基础总纲
我看了很多博客感觉如果自己写的话还不一定有人家写的好,在介于我没有时间从这么细小的知识总结,那么人家总结好的我们为什么不用,完了之后在就自己的感受和不足之处在做补充. 我们一个的讲:主要参考: 一,H ...
- mysql导入大批量数据出现MySQL server has gone away的解决方法
因工作需要,需要导入一个200M左右的sql到user库 执行命令 mysql> use user Database changed mysql> source /tmp/user.sql ...
- QuantLib 金融计算——基本组件之 Schedule 类
目录 QuantLib 金融计算--基本组件之 Schedule 类 Schedule 对象的构造 作为"容器"的 Schedule 对象 一些常用的成员函数 如果未做特别说明,文 ...
- QuantLib 金融计算——基本组件之天数计算规则详解
目录 天数计算规则详解 定义 30 / 360 法 30/360 US 30/360 Bond Basis 30E/360 30E/360 ISDA Actual 法 Actual/Actual IC ...
- day3.python 学习之列表
python中列表用[ ]表示, list = [ ] #表示一个空列表 1.list = [ 'A','B','C',‘D’] print(list[0]) # 表示打印出列表中的第一个元素,列表 ...
- 安卓monkey自动化测试，软硬回车
1.Monkey程序介绍 在android手机上做自动化测试,monkey比cts,Android UnitTest 好用多了,他其实是继承与adb shell中的一段的shell指令. monkey ...
- Python数据结构之序列及其操作
数据结构是计算机存储,组织数据的方式.数据结构是指相互之间存在一种或多种特定关系的数据元素的集合. 在Python中,最基本的数据结构为序列(sequence).序列中的每个元素都有编号:从0开始递增 ...
- Redis服务挂掉后,重启时闪退
这个时候去进程管理器里找一个 redisservice.exe 的进程..杀死他 杀死他 杀死他!!! 整理领结,嘬口咖啡, 嗯... 然后再来启动服务..
- html5+js+.Net的即时多人聊天
今天看了下websocket的知识,了解到这是html5新增的特性,主要用于实时web的通信.之前客户端获取服务端的数据,是通过客户端发出请求,服务端进行响应的模式,或者通过ajax每 ...
- 【es6】let和const
let 1.不存在变量提升 es5中var和function都存在变量提升,但let声明的变量不存在. 在代码块内,使用let命令声明变量之前,该变量都是不可用的.这在语法上,称为“ ...