<!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. gradle查看依赖关系并写入到文本文件的命令

    gradle dependencies>xx.txt

  2. git stash 暂存恢复和文件误删恢复

    git commit提交文件,服务器返回本地文件有修改. 1.git stash :暂存本地代码 2.git pull origin develop : 获取远程分支代码 3.git stash po ...

  3. 无线投屏PC投电视

    http://www.waxrain.com/index.html 电脑投到电视上,看看PPT,显示电脑屏幕完全ok.

  4. QT-提示“database not open”

    问题现象: 要用QT开发"SQLite"时出现如下提示: QSqlQuery::exec: database not open QSqlDatabase: QSQLITE driv ...

  5. C#学习笔记（17）——C#中接口的作用

    说明(2017-7-17 23:50:48): 原文: 接口的作用 接口的作用(C#)(另一篇) C#接口是一个让很多初学C#者容易迷糊的东西,用起来好像很简单,定义接口,里面包含方法,但没有方法具体 ...

  6. Servlet实例开发---学生管理系统

    Servlet总结 本程序采用Servlet开发技术,MVC分层,所有程序在设计时都要接口为操作的标准,主要逻辑操作只有增删改查. 具体实现操作请看源代码. 本程序采用的是MYSQL数据库,需加入相应 ...

  7. Android 开发自己的网络收音机1——功能要求及设计方案

    最近打算利用业余时间,编写一个Android的网络收音机.因为我自己偶尔也喜欢听听广播,所以打算用业余时间编写一个网络版收音机.说起收音机,其实在工作中已经编写过一个,不过那个收音机是需要硬件支持,也 ...

  8. [转]SpringMVC<from:form>表单标签和<input>表单标签简介

    原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...

  9. C语言 · 集合运算

    算法训练 集合运算   时间限制:1.0s   内存限制:512.0MB    问题描述 给出两个整数集合A.B,求出他们的交集.并集以及B在A中的余集. 输入格式 第一行为一个整数n,表示集合A中的 ...

  10. C语言 · 连续正整数的和

    算法训练 连续正整数的和   时间限制:1.0s   内存限制:256.0MB      问题描述 78这个数可以表示为连续正整数的和,1+2+3,18+19+20+21,25+26+27. 输入一个 ...