js 事件的自定义函数
转自:http://www.zhangxinxu.com/study/201203/js-custom-dom-events.html
http://stylechen.com/trigger.html
ie下例子
var event = document.createEventObject();
event.eventType = "message";
document.fireEvent('ondata',event);
高级浏览器
var event = document.createEvent('HTMLEvents');
event.initEvent('ondata',true,true);
event.eventType='message';
document.dispatchEvent(event);
var $ = function(el) {
return new _$(el);
};
var _$ = function(el) {
this.el = (el && el.nodeType == 1)? el: document;
};
_$.prototype = {
constructor: this,
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] = 0;
}
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=0; i<arrEv.length; i+=1) {
// 删除该方法名下所有绑定的propertychange事件
el.detachEvent("onpropertychange", arrEv[i]);
}
}
}
return this;
}
};
js 事件的自定义函数的更多相关文章
- 巧妙利用JS中的自定义函数——化繁为简,提高效率
利用自定义函数编写年月日时间表: (复杂写法)如下: <body> <select id="year" size="1&q ...
- 转载 jQuery和js自定义函数和文件的方法(全网最全)
jQuery和js自定义函数和文件的方法(全网最全) 版权声明:本文为像雾像雨又像风_http://blog.csdn.net/topdandan的原创文章,未经允许不得转载. https:// ...
- JS常用自定义函数总结
JS常用自定义函数总结 1.原生JavaScript实现字符串长度截取 2.原生JavaScript获取域名主机 3.原生JavaScript清除空格 4.原生JavaScript替换全部 5.原 ...
- JS通用事件监听函数
JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...
- MYSQL数据库重点:自定义函数、存储过程、触发器、事件、视图
一.自定义函数 mysql自定义函数就是实现程序员需要sql逻辑处理,参数是IN参数,含有RETURNS字句用来指定函数的返回类型,而且函数体必须包含一个RETURN value语句. 语法: 创建: ...
- web前端对上传的文件进行类型大小判断的js自定义函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- navicat与phpmyadmin做mysql的自定义函数和事件
自定义函数和事件是mysql一个很方便的功能,navicat在5.1以上版本就支持了自定义函数和事件,phpmyadmim不清楚. 用这个是由于一些简单的事情,没有必要去做一个服务器计划使用 接下来我 ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间
http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...
随机推荐
- 一些关于Hibernate延迟加载的误区
最近面试别人,正好出的笔试题中有道关于Hibernate延迟加载的问题,聊天过程中发现很多人对Hibernate的延迟加载有些理解误区,写 些东东在这里,希望对大家有所帮助. 首先是第一个误区:延迟加 ...
- angluar1.8.2 PC Mail项目笔记
兼容性技术选型 前后端分离 代理gulp nginx jq+angluar1.8.2 使用级别刚刚好的相对目录,方便转移项目或者做接口代理时的切换目录 指令过滤器服务控制器书写位置 方法封装,自己写和 ...
- openstack实战部署
简介:Openstack系统是由几个关键服务组成,他们可以单独安装,这些服务根据你的云需求工作在一起,这些服务包括计算服务.认证服务.网络服务.镜像服务.块存储服务.对象存储服务.计量服务.编排服务和 ...
- <每日一题>题目1:简单的注册和登录1.0
#版本1.0,最基本的注册登录'''1.注册,将账号和密码分别写在不同的文档里面2.登录,分别从账户文档和密码文档进行读取并登录''' #注册 Identity = input("请输入您想 ...
- (转)NodeJS - 第一个应用程序Hello World
安装NodeJs 在创建实际的“Hello,World!”应用之前,我们应该先安装NodeJS,安装NodeJS可以访问NodeJS官网,下载相应系统的NodeJS的安装包,进行安装. 程序组件 关于 ...
- 转载 pep8安装
一.前提准备 在Python安装了pip的情况下,命令行输入 pip install autopep8 二.PyCharm设置 成功之后,打开PyCharm,File-->setting--&g ...
- P1082 同余方程(扩欧模板)
https://www.luogu.org/problem/P1082 #include <iostream> #include <cstdio> #include <q ...
- limit方法也是模型类的连贯操作方法之一
limit方法也是模型类的连贯操作方法之一,主要用于指定查询和操作的数量,特别在分页查询的时候使用较多.ThinkPHP的limit方法可以兼容所有的数据库驱动类的. 限制结果数量 例如获取满足要求的 ...
- Python-线程(3)-协程
目录 Event事件 线程池 进程池 回调函数 高性能爬取梨视频 协程 yield保存状态 gevent模块 协程的目的 TCP服务端单线程下实现并发 Event事件 event 事件用来控制线程的执 ...
- echarts高级
常用,待续... ♣tooltip自动轮播 ♣ 实现数据自动轮播 原理:其实就是timeline,获取某几段(时间)的数据,然后隐藏timeline ♣ legend自动轮播 ♣ 左侧多字出省略号 f ...