<!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的模式绑定事件的更多相关文章

  1. 关于Jquery的delegate绑定事件无效

    今天在做一个页面,用的是easyui页面有很多的tabs,里面都放了iframe 需要在load事件动态调整iframe高度 发现始终无法使用delegate来绑定load事件. 纠结了一下午发现了问 ...

  2. JQuery Mobile - 为什么绑定事件后会被多次执行？

    JQuery Mobile 在绑定事件时候,发现会被多次执行,为什么啊? 原来,jquery click  不是替换原有的function ,而是接着添加,所以才会执行次数越来越多,怎么办才能按需实现 ...

  3. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

    jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

  4. 2017年3月25日工作日志：Jquery使用小结[绑定事件判断、select标签、军官证正则]

    jQuery获取DOM绑定事件 在1.8.0版本之前,我们要想获取某个DOM绑定的事件处理程序可以这样: $.data(domObj,'events');//或者$('selector').data( ...

  5. jQuery添加html绑定事件

    jQuery添加html绑定事件 $("#xxx").on("click",".dev",function(){ });

  6. jquery中on绑定事件

    之前项目中动态创建的标签元素  在绑定事件的时候  都是无效  无论如何都不能触发 eg:在页面加载完成之后   再由脚本动态创建的<div>元素  在绑定事件的时候 例如click事件 ...

  7. jquery之on()绑定事件和off()解除绑定事件

    off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该 ...

  8. jQuery的live绑定事件在mobile safari（iphone / ipad / ipod）上失效的解决方案

    jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...

  9. 【原生js】js动态添加dom，如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

随机推荐

  1. 在IIS7上部署aspx网站

    在IIS7上部署aspx网站 2016-12-06 1 示例代码 WebForm.aspx内容: <html> <head> <script language=" ...

  2. shell 全局剔除标点符号

    vim打开文件 []如果是单个字符的话,加上中括号就代表“或”了 :%s/[`~!@#$^&*()=|{}':;',\[\].<>?�/￥……——|[]‘::”“'.,.]//g ...

  3. 删除mysql备份文件

    前言:前篇介绍了mysql的备份方法,但备份不是越多越好,如果磁盘空间不够用,我需要保留近一个周的备份就可以了,那就需要删除备份脚本了,特别注意删除操作比较危险,变量传参要进行二次确认. 下面给出删除 ...

  4. iOS友盟社会化分享U-Share分享面板不显示的问题(基本配置没有错误)

    //要先是window可视化 [self.window makeKeyAndVisible]; //添加友盟分享[[UMSocialManager defaultManager] openLog:YE ...

  5. [转]jquery.validate.js表单验证

    原文地址:https://www.cnblogs.com/si-shaohua/p/3780321.html 一.用前必备官方网站:http://bassistance.de/jquery-plugi ...

  6. 【转】oracle CONNECT BY PRIOR叶子节点查找根节点

    SELECT TRANS_ID FROM TRANS_INST WHERE connect_by_isleaf=1 START WITH TRANS_ID =480242 CONNECT BY PRI ...

  7. 25个必须记住的SSH命令【转】

    OpenSSH是SSH连接工具的免费版本.telnet,rlogin和ftp用户可能还没意识到他们在互联网上传输的密码是未加密的,但SSH是加密的,OpenSSH加密所有通信(包括密码),有效消除了窃 ...

  8. TCP 和 UDP 在socket编程中的区别(转)

    一.TCP与UDP的区别 基于连接与无连接  对系统资源的要求(TCP较多,UDP少)  UDP程序结构较简单  流模式与数据报模式  TCP保证数据正确性,UDP可能丢包  TCP保证数据顺序,UD ...

  9. mosquitto简单应用

    1. 简述 一款实现了消息推送协议 MQTT v3.1 的开源消息代理软件,提供轻量级的,支持可发布/可订阅的的消息推送模式,使设备对设备之间的短消息通信变得简单,比如现在应用广泛的低功耗传感器,手机 ...

  10. logback.xml配置文件详解

    越是老司机越会对日志重视. 如下配置实现了 1.日志文件使用相对路径输出. 2.从日期与文件大小两个纬度分割. 3.特定包与类的日志输出 ** 当存在多个name相同的logger时,逻辑不是很清楚 ...