原生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). 测试自然是检测浏览器是否支持本地存 ...
随机推荐
- Ionic2 启动加载优化总结
1. ionic2通过ionic serve生成的main.js大于4M,必须先build才能部署 npm run ionic:build --prod 之后main.js缩小为大概100K+ 2. ...
- vue环境搭建简介
简单整理下vue的安装的新建项目 安装node.js和npm 参考其他教程 安装vue npm install vue 安装脚手架 vue-cli npm install --global vue-c ...
- ZJOI2019 day2 游记
应该是打的最没有信仰的一次比赛了 然后这个垃圾水平居然还拿了170,真是有毒 我的语文并不好所以还是写流水账吧 day-2 到了余姚,发现附近并没有什么好吃的,于是直接去kfc了 另外潮湿的空气对呼吸 ...
- [BZOJ 1056][HAOI2008]排名系统
传送门 \(\color{green}{solution}\) \(fhq \_treap\)模板题. 对于 \(+\) 操作,如果当前人不存在,那么直接加入;如果存在,那么先将他删除,再加入.复杂度 ...
- JAVA数据结构--Array数组实现
所谓数组,是有序的元素序列. [1] 若将有限个类型相同的变量的集合命名,那么这个名称为数组名.组成数组的各个变量称为数组的分量,也称为数组的元素,有时也称为下标变量.用于区分数组的各个元素的数字编 ...
- 关于开发环境无法运行applet
测试一下IE java vm 如果没有正确显示出来,说明java vm插件没有装好: 我用Uninstalle 来清理注册表:重装jdk 1.6_45
- [转] ELK 之 Logstash
[From] https://blog.csdn.net/iguyue/article/details/77006201 ELK 之 Logstash 简介: ELK 之 LogstashLogsta ...
- (转)2017年Linux运维人员必会开源运维工具体系
标签:操作系统 中间件 千里马 Linux 技能 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://oldboy.blog.51ct ...
- 【es6】字符串扩展
8.模板字符串 模板字符串(template string)是增强版的字符串,用反引号(`)标识.它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量. ${}中可以放 1. ...
- ES6 rest参数和扩展运算符
rest参数 ES6引入了rest参数(形式为“…变量名”).其中rest参数搭配的变量是一个数组可以使用数组的一切操作. 例: function rest(...values){ let sum=0 ...