1，事件注册
1）element.事件(function(){
})
例：
<body>
<div></div>
<script>
$(function() {
// 1. 单个事件注册
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
})
</script>
</body>
2） on()方法绑定事件及鼠标进入鼠标离开事件函数
| on()可以同时绑定多个事件，多个事件处理程序 |
$(function() {
$(".v_01").on({
mouseover: function() {
alert("鼠标进入子元素也触发")
},
mouseout: function() {
alert("鼠标离开了子元素也触发")
},
})
})
3，bind()注册事件及鼠标进入和鼠标离开事假函数
$(function() {
$(".v_01").bind({
mouseenter: function() {
alert("鼠标进入子元素不触发")
},
mouseleave: function() {
alert("鼠标离开了子元素不触发")
},
})
})
4，delegate()注册事件及失去焦点事件
$("body").delegate("input", "blur", function() {
alert("文本失去焦点了");
});
5，live()注册事件及获取焦点事件
$('p').live("focus", function() {
alert("文本获取焦点了");
})
6，one()注册事件
$("p").one("click", function() {
alert("鼠标点击了");
});
| .one()该方法注册事件的处理函数在每个元素上每种事件类型最多执行一次。 |
| .trigger()可用于自动触发事件 |
$('.v_01').click(function(){
alert('1')
});
$('.v_01').trigger('click');
| .trigger()可用于自动传递参数 |
$('p').click(function(e, foo, bar) {
console.log(foo, bar)
}).trigger('click', ['传递字符串', 3]);
$('p').click(function(e, value) {
var oValue = '' || value;
alert(oValue);
}).trigger('click', 'hello,你好');
8，.triggerHandler()绑定事件
$("#old").click(function() {
$("input").trigger("focus");
});
$("#new").click(function() {
$("input").triggerHandler("focus");
});
$("input").focus(function() {
$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});
| 注：.trigger()与triggerHandler()的区别1：1)triggerHandler只是调用第一个元素的同类事件，而trigger会调用所有的元素的同类事件。2）triggerHandler不会冒泡，而trigger会冒泡。3）triggerHandler会阻止默认行为 |
$('p').click(function() {
alert("鼠标点击了");
$(this).off();
})
10，die()从元素中删除先前用.live()绑定的所有事件。
$('p').live("focus", function() {
alert("文本获取焦点了");
})
$("p").die( "focus" );
11,jQuery.proxy()
语法：jQuery.proxy( function, context )
用法一：可以修改函数this的指向
var a = 10;
var numb = {
a=20
}
function test(){
console.log(this.a);
}
test(); // 10
$.proxy(test,numb)(); // 20
12,.unbind()从元素上删除一个以前附加事件处理程序。
$('v_01').unbind('click');
13,.undelegate()移除事件
2，事件函数
2.1浏览器事件
2.1.1，.error()为 JavaScript 的 “error” 事件绑定一个处理函数。
例：
$('#mg_01')
.error(function() {
alert('图像加载失败');
})
.attr("src", "missing.png");
2.1.2.resize()浏览器尺寸改变事件
例：
$(window).resize(function() {
alert("浏览器尺寸变了")
});
2.1.3.scroll()浏览器滚动事件
例：
$(window) .scroll(function() {
alert("页面滚动了")
});
2.2表单事件
2.2.1 blur() 失去焦点事件
$("[type=text]").blur();
| 注：改事件不支持冒泡 |
$('input:text').change(function() {
alert('文本框中的值发生改变了');
});
2.2.3 focus()元素获取焦点事件
$('input:text').focus(function() {
alert('文本框获取焦点了');
});
2.2.4 .focusin()元素获取焦点事件
$('input:text').focusing(function() {
alert('文本框获取焦点了');
| .focusing()事件与,focus()事件的区别是：focusin 事件会在元素（或者其内部的任何元素）获得焦点时触发。这跟 focus 事件的显著区别在于，它可以在父元素上检测子元素获得焦点的情况(即它支持事件冒泡)。 |
$('input:text').focusout(function() {
alert('文本框失去焦点了');
| .focusout()事件与,blur()事件的区别是：focusout 事件会在元素（或者其内部的任何元素）失去焦点时触发。这跟 blur 事件的显著区别在于，它可以在父元素上检测子元素失去焦点的情况(即，它支持事件冒泡)。 |
$('input:text').select(function() {
alert('文本框被选中了');
| 注：此事件只能用在input type=“text”，和textarea中。 |
$('#input').submit(function() {
alert('表单提交');
return false;
});
3,键盘事件
3.1 .keydown()键盘按下事件
$('[type=text]').keydown(function() {
alert('键盘被按下了');
});
3.1.2 .keypress()键盘按下事件
$('[type=text]').keypress(function() {
alert('键盘被按下了');
});
| 注：keydown()事件与keypress()事件的区别是：组合键和功能键可以触发keydown但不能触发keypress |
$('[type=text]').keyup(function() {
alert('键盘弹起了');
});
4，鼠标事件
4.1 contextmenu事件
$( "p" ).contextmenu(function() {
alert( "Hello World!" );
});
4.2.dblclick()双击触发事件
$("p").dblclick( function () { alert("Hello World!"); });
4.3 .hover()鼠标进入和离开事件
$( "li" ).hover(//为li绑定了鼠标进入和鼠标移开的两个参数
function() {
$( this ).append( $( "<span> 123</span>" ) );
}, function() {
$( this ).find( "span:last" ).remove();
}
);
4.4 .toggle()绑定两个或多个处理程序绑定到匹配的元素，用来执行在交替的点击。
$('.v_01').toggle(function() {
alert('第一次');
}, function() {
alert('第二次');
});