<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <button>事件监听原理探究</button>

<script>

    var btn = document.getElementsByTagName("button")[0];

//    btn.addEventListener("click",fn1);

//    btn.addEventListener("click",fn2);

        var i=0;

    fn("click",fn1,btn);

    fn("click",fn2,btn);

    fn("click",fn3,btn);

    function fn1(){

        i++;

        console.log("我是第一个监听"+i);

    }

    function fn2(){

        i++;

        console.log("我是第二个监听"+i);

    }

    function fn3(){

        i++;

        console.log("我是第三个监听"+i);

    }

    function fn(str,fn,ele){

        //判断位置要注意：如果进入绑定事件本身，那么该事件已经本绑定了

        //所以获取旧的事件必须在新的事件绑定之前

        var oldEvent = ele["on"+str];

        ele["on"+str] = function () {

            //不能直接执行函数，因为我们还不知道以前有没有绑定我同样的事件

            //进行判断，如果以前有过绑定事件，那么把以前的执行完毕在执行现在的事件，如果没有就直接执行

            //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false

            //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true

            if(oldEvent){

                //因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数

                // console.log(oldEvent()+"oldEvent"+i);

                oldEvent();

                fn();

            }else{

                //没有绑定过事件

                fn();

                console.log("没有绑定事件");

            }

        }

    }

</script>

</body>

</html>

js事件底层原理探究的更多相关文章

  1. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  2. 深入研究Node.js的底层原理和高级使用

    深入研究Node.js的底层原理和高级使用

  3. KVO-基本使用方法-底层原理探究-自定义KVO-对容器类的监听

    书读百变,其义自见! 将KVO形式以代码实现呈现,通俗易懂,更容易掌握 :GitHub   -链接如果失效请自动搜索:https://github.com/henusjj/KVO_base 代码中有详 ...

  4. 如何编写高质量的js代码--底层原理

    转自: 如何编写高质量的 JS 函数(1) -- 敲山震虎篇   本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm ...

  5. How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能

    个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完 ...

  6. JavaScript 工作原理之十三－CSS 和 JS 动画底层原理及如何优化其性能

    原文请查阅这里,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十三章. 概述 正如你 ...

  7. js事件冒泡原理及处理

    事件从根节点开始,逐级派送到子节点,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“捕获阶段(Capture)”:执行完捕获阶段后,事件由子节点往根节点派送,若节点绑定了事件动作,则执行动 ...

  8. 虚拟机研究系列-「GC本质底层机制」SafePoint的深入分析和底层原理探究指南

    SafePoint前提介绍 在高度优化的现代JVM里,Safepoint有几种不同的用法.GC safepoint是最常见.大家听说得最多的,但还有deoptimization safepoint也很 ...

  9. JMM和Volatile底层原理分析

    JMM和volatile分析 1.JMM:Java Memory Model,java线程内存模型 JMM:它是一个抽象的概念,描述的是线程和内存间的通信,java线程内存模型和CPU缓存模型类似,它 ...

随机推荐

  1. Another Eight Puzzle

    Problem Description Fill the following 8 circles with digits 1~8,with each number exactly once . Con ...

  2. 脑残手贱：被NFS祸害的调度系统

    建议:任何时候,都要三思而后行!!! 事请的缘由 系统中采用slurm调度系统来进行并行计算.但是在GPU节点上,无论如何都无法启动slurmd,报插件初始化错误的故障. 因此需要编译新的munge和 ...

  3. SharePoint Server 2013 安装篇 - 如何解决无法找到 .net 4.5 的问题

    SharePoint Server 2013 在安装前,是不能安装 VS 等会自动安装 .net 4.5.x 以上版本的 .net Framework 的软件的.因为安装了 .net Framewor ...

  4. Log4.Net 在Winfrom、MVC、ashx程序里的使用，ashx程序里使用异步

    最近做一个双11活动的,是一套相关的H5页面.本来以为难度不大,但是做下来几天还是遇到些问题.就总结一下吧,还是有收获的. 1.在H5页面中,有一个遮罩层,还是挺有意思的.直接用div+css控制遮罩 ...

  5. .NET项目从CI到CD-Jenkins_Pipeline的应用

    一.罗里吧嗦 最近迁移了服务器,顺道完善下服役了一两年的Jenkins服务,主要是把Slave搭建起来,还有等等.本文只是我对Jenkins Pipeline的一些自己的理解与应用,欢迎指出错误,欢迎 ...

  6. Skylin CityBuilder 6.6.1 提示授权过期解决(License Manager中显示未过期)

    最近工作中使用到Skyline 系列软件,授权一切正常,启动CityBuilder时提示授权过期 运行License Manger之后查看授权状态 ' 一切正常,并没有出现授权过期等情况. 如何解决: ...

  7. JS中encodeURI,escape,encodeURIComponent区别

    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...

  8. phpcms 的getcache()函数

    一直没有去研究phpcms 的getcache()函数是干嘛的,今天有空去看了一下,原来就那样. 1 function getcache($name, $filepath='', $type='fil ...

  9. 6. ZooKeeper访问控制列表

    ZooKeeper的数据模型提供了ACL机制来控制访问znode. 在创建znode时,ACL将确定你可以在znode上执行的各种操作的权限. ZooKeeper ACL模型与Unix / Linux ...

  10. [转]DBCC (Transact-SQL)

    http://msdn.microsoft.com/zh-cn/library/ms188796.aspx Transact-SQL 编程语言提供 DBCC 语句以作为 SQL Server 的数据库 ...