JQuery: 事件处理

一、绑定事件处理函数

jquery绑定事件有三种方法 jquery中绑定事件时不会进行覆盖

1. 直接绑定
$('div').click(function(){
	console.log("hellow");
});
2. 通过on处理函数绑定
$('div').on('click',function(){
	console.log("hellow");
});
3. 通过one处理函数绑定
$('div').one('click',function(){
	console.log("hellow");
});

1.1 直接绑定

原生直接绑定相同的事件, 事件之间会进行覆盖,只会执行最后绑定的。
jquery的直接绑定事件之间不会进行覆盖, 类似原生中的addEventListener()事件注册程序一样

1.2 on处理函数绑定

将一个或多个事件的处理方法绑定到被选择的元素上。
$(“div”).on(event,childSelector,data,function)

参数	描述
event	必须,添加一个或多个事件,事件名用空格隔开,也可以使数组, 必须是有效的事件
childSelector	可选, 将事件添加到符合条件的子元素身上
data	可选, 传递额外参数
function	可选, 当事件发生时运行的函数

1.3 one处理函数绑定

给元素注册只能监听一次的事件处理函数。一旦事件处理函数执行后, 就会自动删除。
$(‘div’).one(event,childSelector,data,function)

事件
blur 失去焦点	keydowm 键盘摁下	click 单击	load 页面加载完成
focus 获取焦点	keyup 键盘抬起	dblclick 双击	unload 页面关闭完成
focusin	keypress 键盘摁下不放	mousedown 鼠标摁下	resize 浏览器窗口大小改变
focusout		mouseup 鼠标抬起	scroll 滚动条滚动
submit 表单信息发送		mousemove 鼠标移动	error 报错
change 内容发生改变且失去焦点		mouseover 鼠标完全移入
select 选中时		mouseout 鼠标完全移出
input 输入内容时		mouseenter 鼠标刚移入
		mouseleave 鼠标刚移出

二、解绑事件处理函数

可以使用off()对事件进行解绑

var arr = function(){
	console.log("hellow");
}
$('.box').on('click',arr);
// off没有参数是解除绑定的所有事件,有参数则精准解绑
$('.box').off(arr);

三、特殊事件hover()

$(‘div’).hover(inFunction,outFunction);

$("#box1").hover(function (event) {
     console.log(event.type+"我进了边界！");
  },function (event) {
     console.log(event.type+"我出了边界！");
});