jQuery 事件整理

1..on() 方法是现在jq比较推荐的事件绑定方法。
$("#btn").on('click',function(){})


2.事件委托:解决后生成元素的事件绑定问题
1.事件冒泡:当你点击子元素的时候,事件冒泡到父元素。
2.事件委托原理: 点击LI 冒泡到 ul 冒泡到div 冒泡到body 冒泡到document
3.delegate() 代理委托函数 //不推荐使用
$("#ul1").delegate("li","click",function(){
alert($(this).html());
})
4. .on()事件代理//第二个参数 ,推荐使用
$("#ul1").on("click","li",function(){
alert($(this).html());
})
3..off()取消函数绑定
1.var a = function(){
alert("haha")
}
var b = function(){
alert("haha")
}
console.log(a==b);
返回false 所以不能用
off(“click”,function(){
alert(“你之前绑的函数”)
}
2. var fn = function(){
$ul1.append("<li>"+Math.random()+"</li>");
}
$btn.on("click",fn);
$btn.off("click",fn)
3..one()
用法和.on一样 ,只触发一次
4..trigger()
1.this 当前指向dom元素
$(this) 当前指向jq节点
2. $("#username").on("focus",function(){
$(this).after("<span>hello我出现了</span>")
})
$("#btn").on("click",function(){
$("#username").trigger("focus");//触发usernamez的获取焦点事件
})
3.blur 失去焦点

$("#username").on("blur",function(){
$("span").remove();
})
4.triggerHandle()

$("#btn").on("click",function(){
$("#username").triggerHandler("focus");
})
只触发事件不获取焦点
5.jq 性能优化
var $app = $("#app");
$("#h",$app).css("background","red");
6.常用事件整理

1.onclick/click
点击事件
2.onfocus/focus
获取焦点
3.onblur/blur
失去焦点
4.onmouseup/mouseup
鼠标某个按键被松开
5.onmousedown/mousedown
鼠标按下
6.onmousemove/mousemove
鼠标移动
7onmouseout/mouseout
鼠标从某元素移开
8.onmouseover/mouseover
鼠标移入某元素
9onkeyup/keyup
键盘按键抬起
10.onkeydown/keydown
键盘按键按下
11.onkeypress
键盘按键按住
12.onchang/chang
用户改变域的内容
13.ondblclick/dblclick
双击
14onselect/select
文本被选定
15.onsubmit/submit
提交按钮被点击
7. mouseenter,mouseleave 解决事件冒泡问题
$("#app").on("mouseenter",function(){
console.log("进入黄的了");
})
$("#app").on("mouseleave",function(){
console.log("出去黄的了");
})
$("#div1").on("mouseenter",function(){
console.log("进入红的了");
})
$("#div1").on("mouseleave",function(){
console.log("出去红的了");
})
8.阻止默认行为+阻止事件冒泡

$("a").on("click",function(e){
return false;

})
9.e.target获得事件源

猜你喜欢

转载自blog.csdn.net/supreme_yes/article/details/80096826