原生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). 测试自然是检测浏览器是否支持本地存 ...
随机推荐
- springboot 配置webservice接口
导入依赖的jar <!-- webservice cxf --> <dependency> <groupId>org.apache.cxf</groupId& ...
- jdk命令行工具（一）
1.概述 熟悉java开发的人应该都知道在jdk的bin目录下有许多的工具,这些工具主要用于监视虚拟机和故障处理.这些故障处理工具被Sun公司称作为“礼物”附赠给JDK的使用者,并在软件的使用说明中把 ...
- Bootstrap Table使用方法详解
http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...
- 链式二叉树的实现(Java)
定义树节点: package 链式二叉树; public class TreeNode { private Object data; private TreeNode left; private Tr ...
- C#-WebForm-GridView表格展示数据
GrideView 控件,功能是将数据库的数据用表格的形式展示在页面上 一.<源>代码中放入 GridView 控件 打开<设计>界面 二.绑定数据源 (一)创建 LinQ 类 ...
- stark - 5 ⇲ 其他常用功能
Ⅰ 排序 当数据量增多,对于数据 我们应该能够指定如何排序的.且此功能应该是可以给用户自定义进行配置的. 这是StarkHandler类的方法1 order_list = [] def get_ord ...
- Web安全学习笔记——SQL注入
一.MySQL注入 1. 常用信息查询 常用信息: 当前数据库名称:database() 当前用户:user() current_user() system_user() 当前数据库版本号:@@ver ...
- 内核诊断（二）-- patch 和diff
patch文件结构 生成patch文件 --diff命令 patch 使用 -- patch命令 3.1 打path 3.1撤销patch 使用举例 4.1 基本命令使用 4.2 内核打补丁 1. p ...
- c# timer使用
C#里现在有3个Timer类: System.Windows.Forms.Timer System.Threading.Timer System.Timers.Timer 这三个Timer我想大家对S ...
- js 数组随机排序
仅用于个人学习记录 javascript 数组随机排序1.最简洁的方法:function randomsort(a, b) { return Math.random()>.5 ? -1 : ...