转自: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 事件的自定义函数的更多相关文章

  1. 巧妙利用JS中的自定义函数——化繁为简,提高效率

    利用自定义函数编写年月日时间表: (复杂写法)如下: <body>                <select id="year" size="1&q ...

  2. 转载 jQuery和js自定义函数和文件的方法(全网最全)

    jQuery和js自定义函数和文件的方法(全网最全)    版权声明:本文为像雾像雨又像风_http://blog.csdn.net/topdandan的原创文章,未经允许不得转载. https:// ...

  3. JS常用自定义函数总结

    JS常用自定义函数总结   1.原生JavaScript实现字符串长度截取 2.原生JavaScript获取域名主机 3.原生JavaScript清除空格 4.原生JavaScript替换全部 5.原 ...

  4. JS通用事件监听函数

    JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...

  5. MYSQL数据库重点:自定义函数、存储过程、触发器、事件、视图

    一.自定义函数 mysql自定义函数就是实现程序员需要sql逻辑处理,参数是IN参数,含有RETURNS字句用来指定函数的返回类型,而且函数体必须包含一个RETURN value语句. 语法: 创建: ...

  6. web前端对上传的文件进行类型大小判断的js自定义函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. navicat与phpmyadmin做mysql的自定义函数和事件

    自定义函数和事件是mysql一个很方便的功能,navicat在5.1以上版本就支持了自定义函数和事件,phpmyadmim不清楚. 用这个是由于一些简单的事情,没有必要去做一个服务器计划使用 接下来我 ...

  8. JS中的函数、Bom、DOM及JS事件

    本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...

  9. jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间

    http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...

随机推荐

  1. day 86 Vue学习之八geetest滑动验证

    Vue学习之八geetest滑动验证   本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web ...

  2. spring boot问题记录(持续更新)

    1.springboot v2.1.1.RELEASE版本中server.context-path=/demo不起作用?   路径变了:server.servlet.context-path=/dem ...

  3. Ubuntu环境下Error: Invalid or corrupt jarfile xxx.jar

    一.问题描述 Ubuntu环境下将Maven项目打包成jar包后,运行一下指令: $ java -jar my.jar 发生错误: Error: Invalid or corrupt jarfile ...

  4. JS规则 确定你的存在(变量声明) 声明变量语法: var 变量名; 一次声明多个,中间用逗号隔开var num1,mun2 ;

    确定你的存在(变量声明) 我们要使用盒子装东西,是不是先要找到盒子,那在编程中,这个过程叫声明变量,找盒子的动作,如何表示: 声明变量语法: var 变量名; var就相当于找盒子的动作,在JavaS ...

  5. T2963 贪吃蛇【BFS,四进制状压,A*】

    Online Judge:未知 Label:BFS,四进制状压,暴力,A*,哈希,玄学. 题目描述 给定一个n*m的地图和蛇的初始位置,地图中有些位置有石头,蛇不能经过.当然蛇也不能爬到地图之外. 每 ...

  6. Python全栈开发:html标签

    Html是什么? htyper text markup language 即超文本标记语言 超文本: 就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 标记语言: 标记(标签)构成的语言. ...

  7. Swimming Balls

    Swimming Balls https://vjudge.net/contest/318752#problem/J如果直接算,各种球的情况都不清楚,因为放一个球之后,水位的变化也会影响之前放入的球, ...

  8. order方法属于模型的连贯操作方法之一

    order方法属于模型的连贯操作方法之一,用于对操作的结果排序. 用法如下: $Model->where('status=1')->order('id desc')->limit(5 ...

  9. 安装Ubuntu16.04卡在logo界面

    问题背景 笔者在使用U盘UEFI模式安装Ubuntu16.04时,遇到一个问题,即在BIOS里的boot设置U盘为第一启动项之后,启动,并没有顺利进入系统,而是卡在了logo界面.(PS:其实我等了它 ...

  10. 自己整理的一个访问SQLite3数据库的C++类

    原文地址:自己整理的一个访问SQLite3数据库的C++类作者:vigra 近日,对SQLite3的使用进行了研究.真不愧是优秀的嵌入数据库,API接口也极其简捷.基本上只要使用以下几个接口就能完成数 ...