原生JS通过什么方法绑定click事件？

　　原生js有一下三种方法为DOM对象绑定click事件，

　　第一种，在html中添加 onclick属性，在此属性中添加要绑定的事件函数，如下， 这种方法为html处理事件的原始方法，使得html和js过分耦合， 即表现层代码 和 行为层代码耦合：

<html>

<head>

    <script src="./jquery.js"></script>

</head>

<body>

    <div name="template">

        <input type="button" name="testBtn" value="click me" onclick="sayHi()">

    </div>

    <script>

        function sayHi()

        {

            alert("hi")

        }

    </script>

</body>

</html>

　　第二种方法， 在js中找到DOM对象， 为onclick属性动态绑定一个处理函数。 在html中不声明事件处理， 在js中定位到dom后动态执行click事件处理函数，如下， 好处是解耦， 修改dom的行为只需要修改一处js代码即可：

<html>

<head>

    <script src="./jquery.js"></script>

</head>

<body>

    <div name="template">

        <input type="button" id="testBtn" value="click me">

    </div>

    <script>

        function sayHi()

        {

            alert("hi")

        }

        document.getElementById("testBtn").onclick=sayHi;

    </script>

</body>

</html>

　　第三种方法， 是使用通用的事件绑定函数， 将一个事件动态绑定处理函数，如下，这种方法可以自定义事件， 并配合dispatchEvent可以使得事件冒泡（https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events）：

<html>

<head>

    <script src="./jquery.js"></script>

</head>

<body>

    <div name="template">

        <input type="button" id="testBtn" value="click me">

    </div>

    <script>

        function sayHi()

        {

            alert("hi")

        }

        document.getElementById("testBtn").addEventListener("click",sayHi);

    </script>

</body>

</html>

JQuery click 实现分析

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +

    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +

    "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

    // Handle event binding

    jQuery.fn[ name ] = function( data, fn ) {

        return arguments.length > 0 ?

            this.on( name, null, data, fn ) :

            this.trigger( name );

    };

});

首先， click作为JQuery对象的方法， 实际上集成其原型对象的方法fn集合， 其中有一个函数名称叫 click，

当click函数调用没有参数，表示触发此事件，对应this.trigger( name )，

当click参数为函数，则将此函数绑定到此对象的click事件上， 对应了 this.on( name, null, data, fn )。

其次，分析下 this.on的实现：

对于click绑定一个事件处理函数的情况， 相关代码：

jQuery.fn.extend({

    on: function( types, selector, data, fn, /*INTERNAL*/ one ) {

        var type, origFn;

。。。

        return this.each( function() {

            jQuery.event.add( this, types, fn, data, selector );

        });

    },

on绑定是调用 jQuery.event.add 实现，

下面分析 jQuery.event.add 对于 click绑定一个函数的实现情况。

解释入下面代码注释， 当事件发生， 会触发 公共事件处理函数 elemData.handle， 在此函数中， 会将当前的事件调用dispatch函数，分发到对应的elem对象上。

总结下：

(1) on的实现通过jquery.event.add, 将事件公用处理函数elemData.handle,通过addEventListener绑定到具体的事件类型上，

（2）并将待触发的函数， 存储于 handlers == elemData.events[type]

jQuery.event = {

    global: {},

    add: function( elem, types, handler, data, selector ) {

        var tmp, events, t, handleObjIn,

            special, eventHandle, handleObj,

            handlers, type, namespaces, origType,

            elemData = jQuery._data( elem );

。。。。
        // 给每一个需要绑定的事件处理函数，定义一个唯一的ID

        // Make sure that the handler has a unique ID, used to find/remove it later

        if ( !handler.guid ) {

            handler.guid = jQuery.guid++;

        }

　　　　//定义事件集合，存储于 elem -》data的 events 对象中

        // Init the element's event structure and main handler, if this is the first

        if ( !(events = elemData.events) ) {

            events = elemData.events = {};

        }
　　　　// 定义elem对象的 事件处理函数， 存储于elem-》data的 handle成员中， 为一个函数
        if ( !(eventHandle = elemData.handle) ) {
            eventHandle = elemData.handle = function( e ) {
                // Discard the second event of a jQuery.event.trigger() and
                // when an event is called after a page has unloaded
                return typeof jQuery !== strundefined && (!e || jQuery.event.triggered !== e.type) ?
                    jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
                    undefined;
            };
            // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
            eventHandle.elem = elem;
        }
。。。。。。
            // Init the event handler queue if we're the first
            if ( !(handlers = events[ type ]) ) {
                handlers = events[ type ] = [];
                handlers.delegateCount = 0;

　　　　　　　　// 将定义的事件处理函数， 绑定到具体的事件类型
                // Only use addEventListener/attachEvent if the special events handler returns false
                if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
                    // Bind the global event handler to the element
                    if ( elem.addEventListener ) {
                        elem.addEventListener( type, eventHandle, false );

                    } else if ( elem.attachEvent ) {
                        elem.attachEvent( "on" + type, eventHandle );
                    }
                }
            }
。。。。。
　　　　　　// 将待绑定的click参数（响应函数）存储到handlers中， handlers == elemData.events[type]
            // Add to the element's handler list, delegates in front
            if ( selector ) {
                handlers.splice( handlers.delegateCount++, 0, handleObj );
            } else {
                handlers.push( handleObj );
            }

下面看下trigger事件函数如何执行？

将按照事件名，构建冒泡路径， 依次冒泡执行 addEventListener绑定的事件公共处理函数。

    trigger: function( event, data, elem, onlyHandlers ) {

。。。。。。

                     // 按照DOM树向上构造 冒泡 路径

            for ( ; cur; cur = cur.parentNode ) {

                eventPath.push( cur );

                tmp = cur;

            }

..................
            // jQuery handler
            handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" );
            if ( handle ) {
                handle.apply( cur, data );
            }

            // Native handler
            handle = ontype && cur[ ontype ];
            if ( handle && handle.apply && jQuery.acceptData( cur ) ) {
                event.result = handle.apply( cur, data );
                if ( event.result === false ) {
                    event.preventDefault();
                }
            }

此函数（elemData.handle）中会调用dispatch，将所有的handlers中相同类型事件调用一遍

下面是dispatch的关键代码。

    dispatch: function( event ) {

            handlers = ( jQuery._data( this, "events" ) || {} )[ event.type ] || [],

。。。。。。

        // Determine handlers

        handlerQueue = jQuery.event.handlers.call( this, event, handlers );

，，，，，

            while ( (handleObj = matched.handlers[ j++ ]) && !event.

                    ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )

                            .apply( matched.elem, args );

。。。。。。。

实现思路-描述代码：

给事件绑定公共函数，

将注册事件函数存储到数组中，

公共函数中，对数组中的注册函数依次调用。

<html>

<head>

    <script src="./jquery.js"></script>

</head>

<body>

    <div name="template">

        <input type="button" id="testBtn" value="click me">

    </div>

    <script>

        /* core code start */

        var eventHandlers = [];

        function clickHandle()

        {

            //触发每个绑定函数

            for (var i in eventHandlers)

            {

                eventHandlers[i]();

            }

        }

        function addHandle(fn)

        {

            eventHandlers.push(fn);

        }

        /* core code end */

        //绑定函数1 绑定

        function sayHi()

        {

            alert("hi");

        }

        addHandle(sayHi);

        //绑定函数2 绑定

        function sayHello()

        {

            alert("hello");

        }

        addHandle(sayHello);

        //绑定公共处理函数

        document.getElementById("testBtn").addEventListener("click",clickHandle);

        //脚本 - 触发公共处理函数

        var clickfn = document.getElementById("testBtn")["click"];

        console.log(clickfn)

        clickfn.apply(document.getElementById("testBtn"))

    </script>

</body>

</html>

JQuery实现click事件绑定与触发方法分析的更多相关文章

  1. jQuery中click事件多次触发解决方案

    jQuery 中元素的click事件中绑定其他元素的click事件. 因为jQuery中的click事件会累计绑定,导致事件注册越来越多. 解决方案: 1.能够避开,避免把click事件绑定到其他元素 ...

  2. jquery移除、绑定、触发元素事件使用示例详解

    这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...

  3. jQuery的事件绑定与触发 - 学习笔记

    jQuery的事件绑定与触发 事件绑定 自动触发事件 常用的鼠标事件 事件冒泡和默认行为 事件冒泡 默认行为 获得当前鼠标的位置和按键 jQuery的事件绑定与触发 事件绑定 基本绑定 $(eleme ...

  4. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  5. Jquery中的事件绑定$(&quot;#btn&quot;).bind(&quot;click&quot;,function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  6. click事件多次触发 jQuery

    jQuery 中 click事件会累计绑定 例如下列代码: aNode.click(function(){ bNode.click(function(){ console.log('haha'); } ...

  7. 关于jQuery新的事件绑定机制on()的使用技巧

    关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...

  8. jQuery三种事件绑定方式.bind(),.live(),.delegate()

    .bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...

  9. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

随机推荐

  1. Android 大位图加载

    说明:没对图片进行缓存处理,只是使用软引用进行位图资源的释放,从而避免内存泄漏. 对位图进行解码显示: public Bitmap decodeBitmap(Resources resources, ...

  2. ACM Longest Repeated Sequence

    Description You are given a sequence of integers, A = a1, a2, ... an. A consecutive subsequence of A ...

  3. Codeforces Round #216 (Div. 2)A. Valera and Plates

    #include <iostream> using namespace std; int main(){ int n, m , k; cin >> n >> m & ...

  4. 【Eclipse】 Alt+/ 代码提示问题解决方案

    一般情况下alt+/有代码提示作用,还有代码提示的快捷代码也不是alt+/,因此要恢复代码提示用alt+/.需要做两件事. 在 Window - Preferences - General - Key ...

  5. mysql in 命令

    SQL: select * from table where id IN (3,6,9,1,2,5,8,7); SQL: select * from table where id IN ($str); ...

  6. jquery插件之拖拽

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...

  7. HashMap封装的数据用循环快速添加进list中产生的数据集全部相同的问题

    一.问题概述 在一次使用SimpleAdapter时,Data需要使用传入一条数据(Image.Text),该数据条使用HashMap封装.在用HashMap封装的数据用循环快速添加进list中产生了 ...

  8. 前端相关js

    1. mailchimp.js: 通过电子邮件订阅 RSS 的在线工具 2. ga.js:google推出的用来统计网站信息的一个java脚本.可以在GoogleAnalytics获得网站的统计和追踪 ...

  9. css 实现三角形的原理

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  10. 导入excle数据将excle数据插入到数据库

    实现功能是,用户可以直接导入对应数据,或者用户下载模板,填写数据,导入模板数据.easyui实现 前台页面 { text : '日清导入', iconCls : 'icon-print', handl ...