on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
语法:$(selector).on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间。
selector:可选。一个选择器字符串,用以过滤选定的元素,该选择器的后裔元素将调用处理程序。如果选择是空或被忽略,当它到达选定的元素,事件总是触发。
data:可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。
fn:该事件被触发时执行的函数。 false值也可以做一个函数的简写,返回false。
div{
width: 100px;
height: 100px;
background-color: #1E90FF;
}
<div class="box">
</div>
添加一个事件 on(“事件名”,响应函数)
响应函数可以时匿名函数也可以是函数名
相同的事件后添加的事件不会覆盖前面添加的事件
$(".box").on("click",function(){
$(this).css({backgroundColor:"red"})
})
给多个事件添加一个响应函数 on(“事件名”,“事件名”,响应函数) 注意 多个事件注意用空格隔开
$(".box").on("mouseover mouseout",function(){ // 添加移入移出事件
console.log("Hello!!")
});
//function onclick(){
// console.log("Hello!!")
//}
//$(".box").on("mouseover mouseout",onclick);
一次添加多个事件不同的响应函数on({“事件名1” : “响应函数1” , “事件名2” : “响应函数2”})
在添加多个事件时 一定要注意要以对象得形式传参
$(".box").on({
"mouseover":function(){console.log("移入事件!!")},
"mouseout ":function(){console.log("移出事件!!")}
});
给事件中传入参数
当需要传入参数时需要利用data 同时也必须时对象的时形式传入参数
用data参数为绑定的事件处理函数传递数据。
$("div").on("click",{"mytext":"Hello!!"},function(e){
console.log("点击事件"+e.data.mytext)
$(this).text(e.data.mytext);
})
//var text="Hello!!"
//$("div").on("click",{"mytext":text},function(e){
//$(this).text(e.data.mytext);
//})
.off() 取消事件
.off()取消所有事件
$("div").off();//取消所有的事件
.off(事件名)取消一个事件
$("div").off("click");//取消点击事件
.off(“事件名”,函数名)移除一个响应函数
$("div").off("mouseover",hello);//取消移入事件的hello响应函数
整体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #1E90FF;
}
</style>
</head>
<body>
<div class="box">
</div>
<script type="text/javascript">
//添加一个点击事件
$(".box").on("click",function(){
$(this).css({backgroundColor:"red"})
console.log("点击事件")
})
//添加多个事件 执行一个响应函数
//响应函数可以时匿名函数也可以是函数名
//创建一个和函数以函数名的方式传入
function hello(){
console.log("Hello!!")
}
$(".box").on("mouseover mouseout",hello);
//一次添加多个事件不同的响应函数
//相同的事件后添加的事件不会覆盖前面添加的事件
$(".box").on({
"mouseover":function(){console.log("移入事件!!")},
"mouseout ":function(){console.log("移出事件!!")}
});
//利用data给事件中传入参数
$("div").on("click",{"mytext":"Hello!!"},function(e){
console.log("点击事件"+e.data.mytext)
$(this).text(e.data.mytext);
})
//var text="Hello!!"
//$("div").on("click",{"mytext":text},function(e){
//$(this).text(e.data.mytext);
//})
//$("div").off();//取消所有的事件
//$("div").off("click");//取消点击事件
//$("div").off("mouseover",hello);//取消移入事件
</script>
</body>
</html>