本文深入讲解了jQuery中事件处理的方法，包括基本事件绑定、事件对象的使用、bind和on的区别，以及事件委托、hover、one等高级用法，是前端开发者不可多得的学习资源。
<body>
<button id="btn">按钮</button>
<div class="block">
<button class="btn">按钮1</button>
</div>
<ul>
<li>li元素</li>
</ul>
<input type="text" id="txt" value="请输入......">
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
// jquery里面的事件可以进行链式操作
// 基本写法：
/*$('#btn').click(function(){
console.log(1);
}).mouseenter(function(){
console.log(2);
}).mouseleave(function(){
console.log(3);
})*/
// 事件的对象
/*$('#btn').click(function(e){
//事件对象：event
var ele=event.target;
console.log(ele);//输出原生js对象
console.log($(this));//输出Jquery对象
})*/
// 通过bind来绑定事件，bind(type,data,fn)
//一般方法
/* $('#btn').bind('click',function(){
console.log(1);
})*/
// 调用函数方法
/*$('#btn').bind('click',btnconsole);//注意在此调用的是函数名称而不是函数的执行
function btnconsole(){
console.log(1);
}*/
// 完整写法可选data
/*$('#btn').bind('click',2,function(e){
console.log(e);//e为Jquery的事件，有data值
console.log(event);//event为原生js的事件，无data值
})*/
// 一次性绑定多个事件
/* $('#btn').bind('click mousemove',function(e){
if (e.type=='click'){//判断不同的事件
console.log(1);
}
else{
console.log(2);
}
}).unbind('click');
// 移除对象的事件 unbind() 如果不带参数，移除全部事件，带参数移除参数事件
*/
// 特殊的事件绑定 on();说简单点，就是可以进行事件的委托，其它方面差异不大
/*$('#btn').on('click',function(){
console.log(1);
})*/
/*$('#btn').on('click',function(){
var newbtn=$("<button>追加的按钮</button>");
newbtn.addClass('new_btn');
$('.block').append(newbtn);
$('.new_btn').on('click',function(){//在给新创建的元素绑定事件时，一定要在创建元素之后绑定
console.log(1);
})
})
*/
// on() 可以进行事件的委托 bind不可以
/*$('ul').on('click','li',function(){
console.log($(this));//即当前操作对象为li，它的子集
})*/
/*
$('ul').bind('click','li',function(){
console.log($(this));//操作对象为ul
})
*/
// 事件的切换 hover()
/*$('#btn').hover(function(){
console.log(1);
},function(){
console.log(2);
});*/
// 一次性事件 one()
/*$('#btn').one('click',function(){
console.log(1);
})*/
// 指定事件
// trigger
/*$("#txt").trigger("select")
.select(function () {
$(this).css("color", "red");
});*/
//触发事件 trigger放在事件之后
/*$("#txt").focus(function () {
$(this).css("color", "red");
});
$("#txt").trigger("focus");*/
// 自定义事件
/*
$('#txt').bind('mything',function(e,a,b,c){
console.log(c);
});
$('#txt').trigger('mything',[1,2,3]);*/
</script>
</body>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
