如何将eventListener添加到未来的dom元素？

Question

文件partial.html看起来像这样: <button id="test">Hi I am from a partial!</button>

Partial.html动态地包含在页面上,使用XMLHttpRequest:

var oReq = new XMLHttpRequest();
oReq.open('get', 'partial.html', true);
oReq.send();
oReq.onload = function(){
        document.querySelector('#pageArea').innerHTML = this.response;
    }
}

如何添加一个将应用于将来exisiting的事件侦听器,#test 而不是在内容加载并插入后执行#pageArea？

(请不要使用jQuery解决方案!)

Answer 1

像点击 气泡这样的事件,所以你将事件处理程序附加到最近的非动态父级,并在事件处理程序内部通过查看它是否是事件的目标来检查是否是被单击的按钮:

var parent = document.getElementById('pageArea');

if (parent.addEventListener) {
    parent.addEventListener('click', handler, false);
}else if (parent.attachEvent) {
    parent.attachEvent('onclick', handler);
}

function handler(e) {
    if (e.target.id == 'test') {
         // the button was clicked
    }
}

小提琴