原生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). 测试自然是检测浏览器是否支持本地存 ...
随机推荐
- 在PL/SQL里直接插入日期时提示 is not a valid date and time的解决方法
在PL/SQL Developer里直接往表里插入日期格式的数据时,经常会出现" is not a valid date and time"的错误,这是因为Oracle的日期格式和 ...
- day04 --class --homework
# -*- coding: utf-8 -*- # @Time : 2018/12/24 12:10 # @Author : Endless-cloud # @Site : # @File : 04 ...
- C#-WebForm-LinQ（一）-LinQ：语言集成查询（Language Integrated Query）-增删改查、属性扩展
LinQ-语言集成查询(Language Integrated Query) 高集成化的数据库访问技术 LINQ 2 SQL 实际是将数据库的表映射成程序中的类 会把数据库的表名原封不动的变成类名 数 ...
- 为项目配置了Bean，结果Spring Boot并没有扫描到
问题如图,而这个问题遇见的场景是因为自己在一个基础项目里面配置cros,按照网上的说法都配置了一边,结果发现前后端的通讯仍然报跨域问题.后来怀疑是否bean并没有被注入进去,导致没有生效,于是在代码中 ...
- JDK7,8,JD9的hashmap，hashtable，concurrenthashmap及他们的区别
1:hashmap简介(如下,数组-链表形式) HashMap的存储结构 图中,紫色部分即代表哈希表,也称为哈希数组(默认数组大小是16,每对key-value键值对其实是存在map的内部类entry ...
- git 远程库和url
我们使用 git remote add origin <url> 来关联远程主机,这个origin就是关联的远程主机名,如果我们想同时关联两个远程主机,我们可以用 git remote a ...
- 关于ubuntu环境下gcc使用的几点说明
sudo apt-get build-dep gcc //安装gcc编译器 /* 假设已经创建hello.c文件 */ //方法一 $gcc hello.c //将源文件直接编译成文件名为a.out的 ...
- 释放linux端口
感谢作者的共享,在此表示感谢 有时候关闭软件后,后台进程死掉,导致端口被占用.下面以TOMCAT端口8060被占用为例,列出详细解决过程. 解决方法: 1.查找被占用的端口 netstat -tln ...
- redis 数据类型 Hash
Redis 数据类型Hash:hash数据类型存储的数据和mysql数据库中存储的一条记录很类似. hash的一些操作: 比如数据库是user表,有id,name,age ,sex,可以建立与之对应的 ...
- PHP 删除 数组 指定成员
1. unset删除某一个 特定成员 $arr[] = ; $arr[] = ; $arr[] = ; ]); var_dump($arr); array() { []=> ) []=> ...