JavaScript 单击侦听器并单击事件委托功能,独立于库

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 单击侦听器并单击事件委托功能,独立于库相关的知识,希望对你有一定的参考价值。

/*! 
light-weight click listener, v 1.0
Copyright (c) 2010 by madr <http://madr.se>
Licensed under the MIT license: http://en.wikipedia.org/wiki/MIT_License
*/
/*
Usage:
Alter the below snippet for your needs and put the modified snippet in a js-file or a <script> and add it to your document. If your webapp depends on libraries or other resources to load, you better keep that in mind.
*/
(function(document, undefined) {
    function investigate(elm){
        /*
        Change the content of this function
        to suit your web application.
        */

        /*
        EXAMPLE 0: do nothing until jQuery (or other libraries) is loaded.
        if (typeof window.jQuery == 'undefined') { return false; }
        */
        
        /*
        EXAMPLE 1: look for element type
        if (elm.nodeName == 'A') {
            // do stuff ...
            return true;
        }
        */
        
        /*
        EXAMPLE 2: look for id or other property
        if (elm.id == 'modal-window-opener') {
            // do stuff ...
            return true;
        }
        */
        
        /*
        EXAMPLE 3: sniffing a classname
        if (elm.className.match(/read-more/)) {
            // do stuff ...
            return true;
        }
        */    
        
        return false; // default
    }
    
    function clicklistener(evt){
        var event = evt || window.event,
            elm = event.target || window.srcElement,
            magic_did_happen = investigate(elm);
        
        if (magic_did_happen) {
            if (window.event) { window.eventReturnValue = false; } 
            else { evt.preventDefault(); }

            return false;
        }
    }
    
    if (document.attachEvent) { 
        document.attachEvent('onclick', clicklistener); 
    } else {
        document.addEventListener('click', clicklistener, false); 
    }
})(document);

以上是关于JavaScript 单击侦听器并单击事件委托功能,独立于库的主要内容,如果未能解决你的问题,请参考以下文章

我们如何在javascript中添加两个事件监听器的单击和击键

事件委托 - 元素样式问题 - Javascript

JavaScript事件委托的技术原理

JavaScript事件委托的技术原理

JavaScript事件委托的技术原理

如何从 EXTJS 中的委托事件中获取记录?