在web项目中，经常会使用jquery和mui等js框架，之前只是按照API说明去按规则使用，比如在jq和mui中，事件处理函数中可以直接用this访问事件源，如下面的代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="../../js/jquery.min.js" ></script>

    </head>

    <body>

        <button id="msg-btn">CLICK ME!</button>

    </body>

    <script>

        $(document).ready(function(){

            $("#msg-btn").click(function(){

                console.log( this.id );

            });

        });

    </script>

</html>

在界面触发了点击事件后，打印this.id信息如下：

很显然，此处的this指向了事件源这个对象，或者说，事件处理函数的执行上下文（作用域context）被隐式的指定为事件源。

最近在做闭包编程时发现，这一模式很像bind方法和call方法的应用场景（bind方法本质上就是通过call实现的，利用了call可以绑定执行上下文的特性），即就是给函数指定了运行时所挂载的对象！下面分别按照call和bind方式，尝试模拟了具体实现：

1.通过call模拟

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="test">hi</div>

    </body>

    <script>

        var dom = document.querySelector("#test");

        //通过定义自己的事件绑定函数，将事件处理函数的调用上下文指定为事件源，因此事件函数中的this

        //即指向事件源，因此可以直接取其id等其他属性

        dom.__proto__.myaddEventListener = function( evename, _callback){

            this.addEventListener( evename, function(e){                _callback.call( e.target,e );            });

        }

        dom.myaddEventListener( 'click',function(e){

            console.log( this.id );

            console.log( this );

            console.log( e );

        } );

　　</script>

</html>

在界面上点击<div>标签，打印信息如下：

可见this,指向了实践源，可以像访问dom属性一样来访问this了。

2. 通过bind模拟

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="test">hi</div>

    </body>

    <script>

        var dom = document.querySelector("#test");

        dom.__proto__.myaddEventListener = function( evename, _callback){

            this.addEventListener( evename, function(e){

                var __callback = _callback.bind( e.target );

                __callback( e );

            });

        }

        dom.myaddEventListener( 'click',function(e){

            console.log( this.id );

            console.log( this );

            console.log( e );

        } );

    </script>

</html>

在界面上点击<div>标签，打印信息如下：

与call的模拟效果一致。

end...

js插件定义事件中，this引用的实现模拟的更多相关文章

  1. js的touch事件的实际引用

    一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...

  2. thymeleaf 传参到js的onclick事件中

    html: <img th:onclick="'javascript:imgClick(\''+${card.id}+'\',\''+${card.name}+'\');'" ...

  3. Backbone.js 的 View 中定义事件

    使用 Backbone 的 View 时,可以象传统 jQuery 那样定义事件,$("selector").click(function(){...}).幸运的是 Backbon ...

  4. 基础篇：1.JavaScript运行在html中，引用有几种方式？—— 6.js中常用的输出方式？

    书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...

  5. AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

    AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...

  6. 如何定义一个高逼格的原生JS插件

    插件的需求 我们写代码,并不是所有的业务或者逻辑代码都要抽出来复用.首先,我们得看一下是否需要将一部分经常重复的代码抽象出来,写到一个单独的文件中为以后再次使用.再看一下我们的业务逻辑是否可以为团队服 ...

  7. js插件---videojs中文文档详解

    js插件---videojs中文文档详解 一.总结 一句话总结: js插件网上都有很多参考资料,使用起来也非常简单 二.lavarel中使用实例 <video id="example_ ...

  8. 谈谈.NET中常见的内存泄露问题——GC、委托事件和弱引用

    其实吧,内存泄露一直是个令人头疼的问题,在带有GC的语言中这个情况得到了很大的好转,但是仍然可能会有问题.一.什么是内存泄露(memory leak)?内存泄露不是指内存坏了,也不是指内存没插稳漏出来 ...

  9. zepto源码研究 - ajax.js（请求过程中的各个事件分析）

    简要:ajax请求具有能够触发各类事件的功能,包括:触发全局事件,请求发送前事件,请求开始事件,请求结束事件等等,贯穿整个ajax请求过程,这是非常有用的,我们可以利用这些事件来做一些非常有意思的事情 ...

随机推荐

  1. PyTorch 60 分钟入门教程：数据并行处理

    可选择:数据并行处理(文末有完整代码下载) 作者:Sung Kim 和 Jenny Kang 在这个教程中,我们将学习如何用 DataParallel 来使用多 GPU. 通过 PyTorch 使用多 ...

  2. YTU 1075: Time

    1075: Time 时间限制: 1 Sec  内存限制: 128 MB 提交: 7  解决: 7 [提交][状态][讨论版] 题目描述 Digital clock use 4 digits to e ...

  3. bzoj 3232 圈地游戏 —— 01分数规划+最小割建图(最大权闭合子图)

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3232 心烦意乱的时候调这道题真是...越调越气,就这样过了一晚上... 今天再认真看看,找出 ...

  4. [九省联考2018]一双木棋chess——搜索+哈希

    题目:bzoj5248 https://www.lydsy.com/JudgeOnline/problem.php?id=5248 洛谷P4363 https://www.luogu.org/prob ...

  5. LR：HTML-based script和URL-based script方式录制的区别

    转http://www.cnblogs.com/xiaojinniu425/p/6275257.html 一.区别: 为了更加直观的区别这两种录制方式,我们可以分别使用这两种方式录制同一场景(打开百度 ...

  6. QT笔记1

    1 第一个就是helloworld窗体啦 #include <qapplication.h> #include <qpushbutton.h> int main( int ar ...

  7. TCP协议中的三次握手和四次挥手(图解)【转载】

    建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资 ...

  8. Log4j日志等级

    Log4j根据日志信息的重要程度,分OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALL 当然再细分的话 还有 FATAL(严重错误), 但是Log4j官方建议实际实用的话,Log4 ...

  9. bzoj 1853: [Scoi2010]幸运数字&&2393: Cirno的完美算数教室【容斥原理】

    翻了一些blog,只有我用状压预处理嘛2333,.把二进制位的0当成6,1当成8就行啦.(2393是2和9 然后\( dfs \)容斥,加上一个数的\( lcm \),减去两个数的\( lcm \), ...

  10. Ocelot（八）- Ocelot不支持的几个方面

    不支持 Ocelot不支持的几个方面 Chunked Encoding - Ocelot将始终获取正文大小并返回Content-Length标头.很抱歉,如果这对您的用例不起作用! 转发主机标头 - ...