转自: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 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  2. ajax跨域请求使用代理

    public class ProxyHandler extends HttpServlet {    private static final long serialVersionUID = 1L;  ...

  3. java-day09

    接口 就是一种公共规范标准,只要符合规范标准,就可以大家通用,多个类的公告规范,引用数据类型 格式 public interface 接口名称{} 接口都能定义抽象方法 public abstract ...

  4. java-day07

    API 应用程序编程接口 Scanner类 将键盘输入的数据到程序中 1.导包 2.创建 Scanner 对象名 = new Scanner(); 3.使用 int num = 对象名.nextInt ...

  5. FineUI使用记录

    @{ ViewBag.Title = "Grid/Grid"; var F = Html.F();} @section body { @(F.Grid().IsFluid(true ...

  6. Entity Framework Code First 模式-建立一对多联系

    一.建立一对多联系 使用的例子为Product与Category,一个种类(Product)对应多个商品(Product) 1.外键列名默认约定 在“一”这边的实体增加一个集合属性(public vi ...

  7. input光标使用caret-color改变颜色

    本文转载自:https://www.zhangxinxu.com/wordpress/2018/01/css-caret-color-first-line/ CSS caret-color属性可以改变 ...

  8. leetcode-80-删除排序数组中的重复项②

    题目描述: 第一次提交: class Solution: def removeDuplicates(self, nums: List[int]) -> int: nums.reverse() f ...

  9. Java参数校验工具validation实践

    介绍 在项目开发当中,数据校验是你必须要考虑和面对的事情,为此要写上一大串的代码进行校验,这样就会导致代码冗余和一些管理的问题. 例如下面的代码: public void push(List<L ...

  10. 高速网络下的http协议优化

    http协议是基于TCP协议,具备TCP协议的所有功能.但是与一般TCP的长连接不同的是http协议往往连接时间比较短,一个请求一个响应了事.但是总所周知,TCP协议除了具备可靠的传输以外,还有拥塞控 ...