1.on方法可以对多个事件绑定一起注册使用
采用on 多个事件一起注册
$("div").on({
// 点击事件
click:function(){
$(this).css("background" , "red");
},
// 鼠标经过事件
mouseenter:function(){
$(this).css("background" , "purple");
}
} )
2.on 优势可以操作dom 快速实现简写，实现自动添加类
// 采用on 多个事件一起注册
$("div").on(" mouseenter mouseleave ",function(){
$(this).toggleClass("test");
})
3.事件委托和委派
$(function(){
// 事件委托 委派 click绑定在li 但是效果会给到父级
$("ul").on(" click ","li",function(){
alert("我是li点击 传递给父级的");
})
})
4.on 可以对后面添加的动态元素绑定事件
<!DOCTYPE html>
<html lang="cn-ZH">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>on 多个事件处理</title>
<script src="jquery.js"></script>
<style>
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
$(function(){
// 可以对动态创建元素 来绑定事件
$("ul").on(" click ","li",function(){
alert("我是li点击 传递给父级的");
})
var li = ("<li> 我都后面添加的li </li>")
$("ul").append(li);
})
</script>
</body>
</html>
4.移除事件
5.hover 事件 相当于 mouseover移入和mouseover 移除二个事件的结合
另外一个复合事件 toggle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<button id="one">点击事件</button>
<p>移入移除效果</p>
<script>
// on 可以绑定多个事件
$( function(){
$("#one").on({
click:function(){
alert(11)
},
mouseout:function(){
alert(12) ;
// 调取移除点击事件
removeClick() ;
}
} )
// 移除点击事件
function removeClick (){
$("#one").unbind();
}
// hover 移入移除的效果
$("p").hover(
function(){ // 前面是移入
$(this).css("color","purple");
},
function(){ // 前面是移除
$(this).css("color","black");
} )
} )
</script>
</body>
</html>
