在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢?, Q! N' d. f1 b/ e- z 一、原生JavaScript 2 [9 g& i. h3 ]! l0 x 原生JavaScript主要有2种实现方式,第一种是在动态添加的html代码中添加oclick事件,然后传递一个唯一的参数来判断点击的是哪个,然后做相应的操作。 6 [% ~( L2 ^7 b& @0 `, i; r$ u& c4 X
第二种是通过事件委托的原理进行处理,事件委托将一个 事件监听器实际上绑定到整个容器,然后每个列表项被点击就可以访问,这样效率更高。' @1 z/ u4 M. l+ I
第一:onclick* I, ]: Q8 s% u9 F8 q9 H" V' R( C
document.getElementById('joblist').addEventListener('click', function (ev) {
var target = ev.target || ev.srcElement;
if (target.nodeName.toLowerCase() == 'button') {
var e = document.getElementById(target.parentNode.id);
document.getElementById("joblist").removeChild(e);
}
});
$(document).on('mouseover mouseout', '.dosomething', function(){
// what you want to happen when mouseover and mouseout
// occurs on elements that match '.dosomething'
});