1.多个事件绑定同一函数时,如:但点击或者移入时,被选中元素改变字体色。
点击前
点击或移入后
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("li").on("click mouseover",function(){
$(this).addClass('selected');
$(this).siblings().removeClass('selected')
});
});
</script>
<style type="text/css">
.selected{color:red;}
li{color:green;width:100px;height:40px}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
2.多个事件绑定不同函数时,如:但点击时被选中元素字体变大(点击试也移入了故字体也变红,这里只是随意选择了两个事件),移入时字体色变为红色。
点击移入前
点击后
移入后(重新运行,故点击后的更改消失)
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("li").on({"click":function(){
$(this).css("font-size","larger")
},"mouseover":function(){
$(this).css("color","red")
}});
});
</script>
<style type="text/css">
li{color:green;width:100px;height:40px}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
$(selector).on(event,childSelector,data,function),其中event为必需。规定要从被选元素添加的一个或多个事件或命名空间。由空格分隔多个事件值,也可以是数组。必须是有效的事件