为JavaScript追加的DOM元素应用live:类的功能

由于 .live（）只是事件委托，将处理程序放在最接近要添加的元素上。

Since .live() is simply event delegation, place your handler on the nearest element to the ones being added.

var container = document.getElementById('my_container');

container.onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;

    while(target && target.nodeName.toUpperCase() !== 'LI' ) {
        if( target === this )
            target = null;
        else 
            target = target.parentNode;
    }

    if( target ) {
        // work with the LI
    }
};

这也类似于 .live（）从某种意义上说，它从 e.target 搜索到具有委托的容器，看它是否是你的目标元素。

This is also similar to .live() in the sense that it searches from the e.target up to the container with the delegate to see if it is your targeted element.

如果 li 有后代，只测试 e.target 本身是不够的。

Just testing the e.target itself isn't enough if the li has descendants.

对于元素的更复杂分析，您可以使用 .matchesSelector ，虽然您需要在正确的名称下将其粘贴在 HTMLElement.prototype 上，因为大多数浏览器都将其作为扩展名包含在内。

For more complex analysis of the elements, you could use .matchesSelector, though you'd need to stick it on the HTMLElement.prototype under the correct name, since most browsers include it as an extension.

另外，你需要一个IE8补丁，但这很简单。

Also, you'd need a patch for IE8, but that's pretty easy.

if (HTMLElement) {
    if (!HTMLElement.prototype.matches && !HTMLElement.prototype.matchesSelector) {
        HTMLElement.prototype.matches =
        HTMLELement.prototype.matchesSelector = 
            HTMLElement.prototype.webkitMatchesSelector ||
            HTMLElement.prototype.mozMatchesSelecvtor ||
            HTMLElement.prototype.msMatchesSelector ||
            HTMLElement.prototype.oMatchesSelector;
    }
} else if (!Element.prototype.matchesSelector && Element.prototype.querySelectorAll) {

    Element.prototype.matches = 
    Element.prototype.matchesSelector =
        function() {
            // exercise for reader to implement using .querySelectorAll, 
            //    though it's pretty easy, and available online if you search
        }
}

这篇好文章是转载于：学新通技术网