WordPress的和被动事件监听器的最佳做法

Question

所以我在Chrome浏览器上运行一个网站审计，谷歌说我应该使用被动事件监听器。

我已经通过代码看起来和鉴定它是从WordPress的表情符号整合来：

<script type="text/javascript">/*<![CDATA[*/window._wpemojiSettings={"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/mysite.com.au\/blog\/wp-includes\/js\/wp-emoji-release.min.js?ver=371b19f5ae5bed67ef4d578bd7a19944"}};!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b===c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);/*]]>*/</script> <style type="text/css">img.wp-smiley,img.emoji{display:inline !important;border:none !important;box-shadow:none !important;height:1em !important;width:1em !important;margin:0 .07em !important;vertical-align:-0.1em !important;background:none !important;padding:0 !important}</style> <script type='text/javascript'>var onepress_js_settings={"onepress_disable_animation":"","onepress_disable_sticky_header":"1","onepress_vertical_align_menu":"","hero_animation":"flipInX","hero_speed":"5000","hero_fade":"750","hero_duration":"5000","is_home":"","gallery_enable":"1"};</script> <script type='text/javascript'>var wtilp={"ajax_url":"https:\/\/www.snowys.com.au\/blog\/wp-admin\/admin-ajax.php"};</script> 

现在我想继续为WordPress的表情符号的支持，但我想补充被动侦听器更好的可用性，我将如何去做这件事。

我曾想过如何去除它，如this link并手动添加它，但我不认为这是一个好主意。

Answer 1

很酷我遇到了由devlucky编写的解决方案，他提供了一小段JavaScript来解决这个问题。

Check out this article

这是由听众被动的JavaScript。

(function() { 
    var supportsPassive = eventListenerOptionsSupported(); 

    if (supportsPassive) { 
    var addEvent = EventTarget.prototype.addEventListener; 
    overwriteAddEvent(addEvent); 
    } 

    function overwriteAddEvent(superMethod) { 
    var defaultOptions = { 
     passive: true, 
     capture: false 
    }; 

    EventTarget.prototype.addEventListener = function(type, listener, options) { 
     var usesListenerOptions = typeof options === 'object'; 
     var useCapture = usesListenerOptions ? options.capture : options; 

     options = usesListenerOptions ? options : {}; 
     options.passive = options.passive !== undefined ? options.passive : defaultOptions.passive; 
     options.capture = useCapture !== undefined ? useCapture : defaultOptions.capture; 

     superMethod.call(this, type, listener, options); 
    }; 
    } 

    function eventListenerOptionsSupported() { 
    var supported = false; 
    try { 
     var opts = Object.defineProperty({}, 'passive', { 
     get: function() { 
      supported = true; 
     } 
     }); 
     window.addEventListener("test", null, opts); 
    } catch (e) {} 

    return supported; 
    } 
})();