事件处理(事件委托)

Posted 2020-12-25 ajaxa

事件处理(事件委托)
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。

// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
// $(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);})就是筛选出ul下的li给其绑定
// click事件；

[selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件；如：

//$(‘ul li‘).on(‘click‘, function(){console.log(‘click‘);})的绑定方式和
//$(‘ul li‘).bind(‘click‘, function(){console.log(‘click‘);})一样；我通过js给ul添加了一个
//li：$(‘ul‘).append(‘<li>js new li<li>‘)；这个新加的li是不会被绑上click事件的

//但是用$(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);}方式绑定，然后动态添加
//li:$(‘ul‘).append(‘<li>js new li<li>‘);这个新生成的li被绑上了click事件

[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)

 

 

总结:

　　$(‘要绑定标签的上级标签‘).on(‘click‘,‘要绑定的标签‘,function())  

　　#jquery 1版本要使用下面的方式

　　$(‘要绑定标签的上级标签‘).delegate(‘要绑定的标签‘‘click‘,function())