الكشف عن الدعم لحدث JavaScript معين؟

Question

أنا مهتم باستخدام حدث HashChange JavaScript لمراقبة التغييرات في معرف شظايا عنوان URL. أنا على علم تاريخ بسيط حقا والمكونات الإضافية jQuery لهذا الغرض. ومع ذلك ، فقد توصلت إلى استنتاج مفاده أنه في مشروعي الخاص لا يستحق حقًا النفقات العامة المضافة لملف JS آخر.

ما أود القيام به بدلاً من ذلك هو أخذ مسار "التحسين التدريجي". أي أنني أريد اختبار ما إذا كان حدث HashChange مدعومًا من قبل متصفح الزائر ، وكتابة الكود الخاص بي لاستخدامه إذا كان متاحًا ، كتعزيز بدلاً من ميزة أساسية. IE 8 و Firefox 3.6 و Chrome 4.1.249 يدعمونه ، وهذا يمثل حوالي 20 ٪ من حركة مرور موقعي.

لذا ، أه ... هل هناك طريقة لاختبار ما إذا كان المتصفح يدعم حدثًا معينًا؟

شكرًا.

Answer 1

حسنًا ، لا تمر أفضل طريقة من خلال استنشاق المتصفح ، فوري Zaytsev (kangax) جعلت طريقة مفيدة حقا لاكتشاف دعم الأحداث:

var isEventSupported = (function(){
  var TAGNAMES = {
    'select':'input','change':'input',
    'submit':'form','reset':'form',
    'error':'img','load':'img','abort':'img'
  }
  function isEventSupported(eventName) {
    var el = document.createElement(TAGNAMES[eventName] || 'div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported) {
      el.setAttribute(eventName, 'return;');
      isSupported = typeof el[eventName] == 'function';
    }
    el = null;
    return isSupported;
  }
  return isEventSupported;
})();

الاستخدام:

if (isEventSupported('hashchange')) {
  //...
}

هذه التقنية تستخدم الآن في بعض المكتبات مثل jQuery.

اقرأ المزيد هنا:

• اكتشاف دعم الأحداث دون استنشاق المتصفح

Answer 2

ال توثيق موزيلا يقترح ما يلي:

if ("onhashchange" in window) {
    alert("The browser supports the hashchange event!");
}

يعمل هذا في IE8 و Chrome 5 Beta أيضًا (لم أختبر Chrome 4.1) ، ويفشل بشكل صحيح في الأوبرا و Safari.

Answer 3

هنا تعديل من الإجابة التي توفرها CMS, ، والتي لا تحتوي على وظيفة في أخرى ، والتي أعتقد أنها ستعمل:

function event_exists(eventName){
    if(typeof(eventName)!='string' || eventName.length==0)return false;
    var TAGNAMES = {
        'select':'input','change':'input',
        'submit':'form','reset':'form',
        'error':'img','load':'img','abort':'img'
    }
    var el = document.createElement(TAGNAMES[eventName] || 'div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported) {
        el.setAttribute(eventName,'return;');
        isSupported = (typeof(el[eventName])=='function');
    }
    el = null;
    return isSupported;
}