<button class="btn">按钮</button>
<ul>
<li>li元素</li>
</ul>
<div class="b">
<span>123</span>
</div>
- jquery中事件可以进行链式操作
- 基本绑定事件
$(".btn").click(function(){
console.log(1);
}).mouseleave(function(){
console.log(2)
})
其中事件的对象
$(".btn").mouseenter(function(e){
console.log(e);//对象为window,即w.event
})
$(".btn").click(function(e){
var ele= e.target;
console.log(ele);//输出值为<button class="btn">按钮</button> 即可通过事件获取当前操作元素的节点
// })
2.bind绑定事件 与js中addEventLisenter一样 bind(“事件类型”,“data”,“function”) 可绑定多个元素
// $(".btn").bind("click",function(){
// $(this).css("color","red")
// })
//$(".btn").bind("click",show);//调用外部函数时不用加小括号
// function show(){
// $(".btn").css("color","red")
// }
// $(".btn").bind("click mouseleave",function(e){
// if(e.type=="click"){
// $(this).css("color","red")
// }
// else if(e.type=="mouseleave"){
// $(this).css("color","blue")
// }
// });//一次性调用多个事件,addEvenTLisenter也是如此,通过函数的对象中type的类型来判断哪一个事件
// $(".btn").bind("click",2,function(e){
// console.log(e);//function中的data值为2;
// })
3.on绑定事件,基本用法与bind一样,但是on可以进行事件的委托
// $(".b").on("click","span",function(){
// $(this).css("backgroundColor","red");
// console.log(this);//this为span
// })
// $(".b").bind("click","span",function(){
// $(this).css("backgroundColor","blue");
// console.log(this);//this为div
// })
4.事件切换
//事件的切换
//鼠标悬停执行第一个函数,离开后执行第二个函数
/* $(".b1").mouseover(function (){
console.log(1);
}).mouseleave(function (){
console.log(2);
});*/
/* $(".b1").hover(function (){
console.log(1);
},function (){
console.log(2);
});*/
5.一次性事件 只执行一次
// $(".b").one("click",function(){
// console.log(1)
// })
6.自定义事件
//自定义事件
// $(".b").bind("mystyle",function(e,b,c){
// console.log(e,b,c);//e为事件对象 b,c输出为1,2
// })
// $(".b").trigger("mystyle",[1,2])