js以类似jquery的模式绑定事件
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<button class="a"></button>
</body> </html>
<script>
var $ = function (el) {
return new _$(el);
};
var _$ = function (el) {
this.el = (el && el.nodeType == ) ? el : document;
};
_$.prototype = {
constructor: _$,
addEvent: function (type, fn, capture) {
var el = this.el; if (window.addEventListener) {
el.addEventListener(type, fn, capture); var ev = document.createEvent("HTMLEvents");
ev.initEvent(type, capture || false, false);
// 在元素上存储创建的事件，方便自定义触发
if (!el["ev" + type]) {
el["ev" + type] = ev;
} } else if (window.attachEvent) {
el.attachEvent("on" + type, fn);
if (isNaN(el["cu" + type])) {
// 自定义属性，触发事件用
el["cu" + type] = ;
} var fnEv = function (event) {
if (event.propertyName == "cu" + type) {
fn.call(el);
}
}; el.attachEvent("onpropertychange", fnEv); // 在元素上存储绑定的propertychange事件，方便删除
if (!el["ev" + type]) {
el["ev" + type] = [fnEv];
} else {
el["ev" + type].push(fnEv);
}
} return this;
},
fireEvent: function (type) {
var el = this.el;
if (typeof type === "string") {
if (document.dispatchEvent) {
if (el["ev" + type]) {
el.dispatchEvent(el["ev" + type]);
}
} else if (document.attachEvent) {
// 改变对应自定义属性，触发自定义事件
el["cu" + type]++;
}
}
return this;
},
removeEvent: function (type, fn, capture) {
var el = this.el;
if (window.removeEventListener) {
el.removeEventListener(type, fn, capture || false);
} else if (document.attachEvent) {
el.detachEvent("on" + type, fn);
var arrEv = el["ev" + type];
if (arrEv instanceof Array) {
for (var i = ; i < arrEv.length; i += ) {
// 删除该方法名下所有绑定的propertychange事件
el.detachEvent("onpropertychange", arrEv[i]);
}
}
}
return this;
}
}; var dom = document.querySelector(".a");
var test = $(dom).addEvent("alert", function () {
alert("弹弹弹，弹走鱼尾纹~~");
}, false); test.fireEvent("alert");
</script>
js以类似jquery的模式绑定事件的更多相关文章
- 关于Jquery的delegate绑定事件无效
今天在做一个页面,用的是easyui页面有很多的tabs,里面都放了iframe 需要在load事件动态调整iframe高度 发现始终无法使用delegate来绑定load事件. 纠结了一下午发现了问 ...
- JQuery Mobile - 为什么绑定事件后会被多次执行？
JQuery Mobile 在绑定事件时候,发现会被多次执行,为什么啊? 原来,jquery click 不是替换原有的function ,而是接着添加,所以才会执行次数越来越多,怎么办才能按需实现 ...
- jquery-10 jquery中的绑定事件和解绑事件的方法是什么
jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...
- 2017年3月25日工作日志：Jquery使用小结[绑定事件判断、select标签、军官证正则]
jQuery获取DOM绑定事件 在1.8.0版本之前,我们要想获取某个DOM绑定的事件处理程序可以这样: $.data(domObj,'events');//或者$('selector').data( ...
- jQuery添加html绑定事件
jQuery添加html绑定事件 $("#xxx").on("click",".dev",function(){ });
- jquery中on绑定事件
之前项目中动态创建的标签元素 在绑定事件的时候 都是无效 无论如何都不能触发 eg:在页面加载完成之后 再由脚本动态创建的<div>元素 在绑定事件的时候 例如click事件 ...
- jquery之on()绑定事件和off()解除绑定事件
off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该 ...
- jQuery的live绑定事件在mobile safari（iphone / ipad / ipod）上失效的解决方案
jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...
- 【原生js】js动态添加dom，如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
随机推荐
- js模板引擎art-template使用方法
art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/ 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好:语法. ...
- LeetCode: Maximum Subarray 解题报告
Maximum Subarray Find the contiguous subarray within an array (containing at least one number) which ...
- PHP error_reporting() 函数
实例 规定不同的错误级别报告: <?php // 关闭错误报告 error_reporting(0); // 报告 runtime 错误 error_reporting(E_ERROR | E_ ...
- [转]oracle 11g jdbc jar包在哪个文件目录
oracle 11g jdbc jar包在哪个文件目录 一. 如果装了Oracle数据库的话, 大致是这样的目录: D:\oracle\product\11.2.0\client_1\oui\ ...
- Linux 增量系统备份和部分还原策略
. . . . . 完全用 Linux 已经有快半年的时间了,一直想要全盘备份一下数据,但是却一直没有做,为什么呢? 一方面是东西比较多,备份一次要很长的时间:另一方面是一直在纠结用哪种方式备份比较好 ...
- UIButton的竖排图片和文本
UIButton的竖排图片和文本html, body {overflow-x: initial !important;}.CodeMirror { height: auto; } .CodeMirro ...
- HTTP Status 500 PWC6188 jsp/jstl/core cannot be resolved in either web.xml or the jar files deployed with this application
报错如下: 解决方案: 1.可能是依赖引用错了,注意 JSP 应依赖: <!-- JSP --> <dependency> <groupId>javax.servl ...
- WPF System.InvalidCastException: 无法将类型为“System.Windows.Media.Color”的对象强制转换为类型“System.Windows.Media.Brush”。
场景:添加ComboBox样式,界面卡死,日志异常文件如下: -- ::, | ERROR | System.InvalidCastException: 无法将类型为“System.Windows.M ...
- Java编程的逻辑 (73) - 并发容器 - 写时拷贝的List和Set
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...
- Java编程的逻辑 (46) - 剖析PriorityQueue
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...