jquery on()事件绑定方法的语法：
其中[selector]，[data]为可选，可以要也可以不要当你需要过滤（筛选）或者需要传递event.data
注：最后会单独说下event.data
on(events,[selector],[data],fn)例子：
$(function(){
$(document).on(‘click‘,‘h1 span‘,function(){
alert($(this).text()) ;
});
})；HTML
<body>
<div>div</div>
<div id=‘odiv1‘>div_id = odiv1</div>
<span>span</span>
<h1>
h1
<span>span</span>
</h1>
</body>on()多个事件绑定的方法
和前面差不多一样，只不过加了是多个空格
$(function(){
$(document).on(‘click mousemove‘,‘h1 span‘,function(){
alert($(this).text()) ;
});
})；html代码段和前面一样
我还是复制过来吧
<body>
<div>div</div>
<div id=‘odiv1‘>div_id = odiv1</div>
<span>span</span>
<h1>
h1
<span>span</span>
</h1>
</body>on()多个事件设置多个不同的效果：
jquery代码块：
$(‘span‘).on({
‘click‘:function(){
console.log($(this).html()) ;
} ,
‘mousemove‘:function(){
alert($(‘div‘).html());
}
}) ;html代码块：
<body>
<div>div</div>
<div id=‘odiv1‘>div_id = odiv1</div>
<span>span</span>
<h1>h1<span>span</span></h1>
</body>event.data单独讲解：
function myHandler(event) {
alert(event.data.foo);
}；
$("h1 span").on("click", {foo: "bar"}, myHandler)；
最后说下on()可以根据boolean的不同模拟jquery库中的某些事件方法
如:当’selector’为null时，on()和bind()差不多就是一样的了
当然也可以模拟live()方法
如：
live()写法：
$(‘#list li‘).live(‘click‘, ‘#list li‘, function() {
//function code here.
}); on()写法
$(document).on(‘click‘, ‘#list li‘, function() {
//function code here.
});还可以替换替换delegate()
delegate()是1.4引入的，目的是通过祖先元素来代理委派后代元素的事件绑定问题，某种程度上和live()优点相似。只不过live()是通过document元素委派，而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。
delegate()写法：
$(‘#list‘).delegate(‘li‘, ‘click‘, function() {
//function code here.
});
on()写法：
$(‘#list‘).on(‘click‘, ‘li‘, function() {
//function code here.
});
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-10-10 08:59:36