$("#btn1").click(function(){
console.log(1);
}).mouseenter(function(){
console.log(2);
}).mouseleave(function(){
console.log(3);
});
//事件的对象 event
$("#btn2").click(function(e){
console.log(e); //输出为w.event
var ele= e.target; //target:通过事件获取当前操作元素的节点
console.log(ele); //输出为button按钮
});
//bind方法绑定事件 类似js中的事件监听
$("btn3").bind("click",function(){
console.log(1);
});
$("#btn3").bind("click",mendth);
function mendth(){
console.log(2);
}
$("#btn3").bind("click",2,function(e){
console.log(e);
console.log(event);
});
$("#btn3").bind("click mouseleave",function(e){ //一次性绑定多个事件
console.log(1);
if(e.type=="click"){ //在同一个方法中区分两个事件
console.log(2);
}
else{
console.log(3);
}
}).unbind("mouseleave"); //移除事件 不带参时会将全部事件都移除
$("#btn4").click(function(){
var ele=$("<button>JAVA</button>");
ele.addClass("btn41");
$(".block").append(ele);
$(".btn41").bind("click",function(){ //动态创建的元素,要在追加之后写事件
console.log(1);
})
});
$("ul li").click(function(){
$(this).css("backgroundColor","pink"); //$(this)指li,此样式不能用到追加的li上
var ele=$("<li>JAVA</li>");
$(this).parent().append(ele);
});
$("ul").on("click","li",function(){ //特殊绑定on 可进行事件委托
$(this).css("color","red"); //$(this)指li,样式可以用到追加的li上
var ele=$("<li>运维</li>");
$(this).parent().append(ele);
});
$(".b1").hover(function(){ //事件的切换 hover() 进入离开切换
console.log(1);
}),function(){
console.log(2);
};
$("#btn5").one("click",function(){ //一次性事件 one()
console.log(1);
});
$("#txt").trigger("select") //指定事件
.select(function(){
$(this).css("background-color","red");
});
$("#txt").focus(function(){
$(this).css("color","blue");
});
$("#txt").trigger("focus"); //获焦时自动执行 trigger 触发事件,写在事件之后(写在前面时,需选择才能触发,如上)
$("#txt").bind("myself",function(e,a,b,c){ //自定义事件
console.log(a,b,c);
});
$("#txt").trigger("myself",[5,6,7]); //必须写 传参需写成数组形式
二、手机触屏事件(pc端无法操作)touch
共有三个阶段 :touchstart、touchmove、touchend
var startX,startY,moveX,moveY;
$(".block").bind("touchstart",function(e){
console.log(e.touches); //手指坐标
var touch= e.touches[0]; //有1个手指头
startX=touch.pageX,startY=touch.pageY;
}).bind("touchmove",function(e){
var touch = e.touches[0];
moveX = touch.pageX, moveY = touch.pageY;
}).bind("touchend",function(){
if(moveX-startX<=0){
console.log("左")
}
else{
console.log("右")
}
})
Js常用事件
最新推荐文章于 2024-01-12 16:46:20 发布