jQuery浏览器功能测试support --事件测试（4项）源码分析

最新推荐文章于 2021-06-04 20:46:15 发布

mihuXiaoLang

最新推荐文章于 2021-06-04 20:46:15 发布

阅读量185

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mihuXiaoLang/article/details/42422435

本文介绍了一个使用jQuery进行的事件支持性测试，该测试包括四个主要部分：事件冒泡、事件复制、事件绑定及事件触发机制的检测。这些测试旨在验证不同浏览器对特定事件处理方式的支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件测试（4项）

jQuery.support = (function() {

    var support,
        all,
        a,
        select,
        opt,
        input,
        marginDiv,
        fragment,
        tds,
        events,
        eventName,
        i,
        isSupported,
        div = document.createElement( "div" ),
        documentElement = document.documentElement;

    // Preliminary tests
    div.setAttribute("className", "t");
    div.innerHTML = "   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>";

    all = div.getElementsByTagName( "*" );
    a = div.getElementsByTagName( "a" )[ 0 ];

    // Can't get basic test support
    if ( !all || !all.length || !a ) {
        return {};
    }

    // First batch of supports tests
    select = document.createElement( "select" );
    opt = select.appendChild( document.createElement("option") );
    input = div.getElementsByTagName( "input" )[ 0 ];

    support = {

        // Will be defined later
        submitBubbles: true,
        changeBubbles: true,
        focusinBubbles: false,
        deleteExpando: true,
        noCloneEvent: true
    };  

    // 3.1 如果浏览器再复制DOM元素时不复制事件监听函数，则测试项noCloneEvent为true
    // 在IE6， IE7， IE8中，符合DOM元素时会连同事件监听函数一起复制，此时测试项noCloneEvent为false; 在IE9+和其他浏览器中，则不会复制事件，这时测试项noCloneEvent为true
    // jQuery通过先复制绑定了事件的DOM元素，然后在副本元素上触发事件，并检测事件监听函数是否会执行，来测试测试项noCloneEvent.
    // 在不支持方法addEventListner(type, listener, useCapture),但是支持方法attachEvent(ontype, listener)和fireEvent(ontype, event, canceled)的浏览器（即IE6, IE7, IE8）中，为div元素绑定onclick事件，并在副本元素上触发onclick事件
    if ( !div.addEventListener && div.attachEvent && div.fireEvent ) {
        div.attachEvent( "onclick", function() {
            // Cloning a node shouldn't copy over any
            // bound event handlers (IE does this)
            support.noCloneEvent = false;
        });
        div.cloneNode( true ).fireEvent( "onclick" );
    }

    // Technique from Juriy Zaytsev
    // http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
    // We only care about the case where non-standard event systems
    // are used, namely in IE. Short-circuiting here helps us to
    // avoid an eval call (in setAttribute) which can cause CSP
    // to go haywire. See: https://developer.mozilla.org/en/Security/CSP
    // 3.2 如果submit事件沿着DOM树向上冒泡，则测试项submitBubbles为true
    // 在IE6，IE7，IE8中，submit事件不会向上冒泡，此时测试项submitBubbles为false,而在IE9+和其他浏览器则会向上冒泡，测试项submitBubbles为true
    if ( div.attachEvent ) {
        for( i in {
            submit: 1,
            change: 1,
            focusin: 1
        }) {
            eventName = "on" + i;
            isSupported = ( eventName in div );
            if ( !isSupported ) {
                div.setAttribute( eventName, "return;" );
                isSupported = ( typeof div[ eventName ] === "function" );
            }
            support[ i + "Bubbles" ] = isSupported;
        }
    }

    return support;
})();