javascript - trick to detect bubbling supportability-优快云博客

本文介绍了一种提高Web应用性能的技术——事件委托。通过绑定到祖先元素而非直接绑定到目标元素，可以减少事件处理器的数量，利用浏览器提供的事件冒泡机制来监听所有事件。

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

Event delegation is oe of the best techniques for developing high performance, scalable, web application. the basical idea is instead of directly bind to the elements they wish to watch - with event delegation bind to an ancestor element (such as a tabe or the entire document) and watch for all events that come in . In this way you only have to bind one event handler for a large number of elements. This technique makes good use of the event bubbling provided by the browser. Since the events will bubble up the tree we can simply bind to that once ancestor element and wait for the events to come in.

Since event bubbling is the only technique available across all browsers (event capturing only works in W3C compatible browsers).

However, unfortunately, submit, change, focus, and blur events have serious problems with the bubbling implementation, in various browser, and must be worked around.

To start, the submit and change events don't bubble at all in Internet Explorer. (unlike in the W3C DOMcapable browsers where they bubble consistently). We need some technique which is capable of determing if an event is capable of bubbling up to a parent element.

/**************************************
*@Name: addremoveevents.js
*  this is an code that determine if an event support bubbling
*@Summary
* 
* @todo:
*   Test
***************************************/

function isEventSupported(eventName) {
  var el = document.createElement('div'), isSupported;

  eventName = 'on' + eventName;

  isSupported = (eventName in el); // this is a special use of in operator

  if (!isSupported) {
    el.setAttribute(eventName, 'return;');
    isSupported = typeof el[eventName] == 'function';
  }

  el = null;
  return isSupported;
}