jQuery-on()函数

最新推荐文章于 2022-11-11 22:18:05 发布

BERWIN89

最新推荐文章于 2022-11-11 22:18:05 发布

阅读量613

点赞数

本文介绍如何使用jQuery的on()方法为元素绑定事件处理程序，并展示了如何同时为多个事件绑定同一个函数或不同函数的方法。通过实例演示了事件绑定的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

多个事件绑定同一个函数

$(document).ready(function(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});

多个事件绑定不同函数

$(document).ready(function(){
$("p").on({
mouseover:function(){$("body").css("background-color","lightgray");},
mouseout:function(){$("body").css("background-color","lightblue");},
click:function(){$("body").css("background-color","yellow");}
});
});

<script>
$(document).ready(function(){
$("div").on("click",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>This is a new paragraph.</p>").insertAfter("button");
});
});
</script>

<div style="background-color:yellow">
<p>This is a paragraph.</p>
<p>Click any p element to make it disappear. Including this one.</p>
<span>eeee</span>
<button>Insert a new p element after this button</button>
</div>