鼠标事件
- click和dbclick，鼠标单击和双击
<div id="test">点击触发<div>
$("#test").click(function() {
//this指向 div元素
});
<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
//this指向 div元素
//e.data => 11111 传递数据
});
- mousedown 与 mouseup 鼠标按下和松开
- mousemove 鼠标移动
- mouseover 与 mouseout 鼠标移入移出
- mouseenter与mouseleave 同样是鼠标移入移出
区别：
mouseover 与 mouseout 会作用在选中元素的后代身上，而mouseenter与mouseleave则不会
- hover()方法是同时绑定 mouseenter和 mouseleave事件。
$("p").hover(
function() {
$(this).css("background", 'red');
},
function() {
$(this).css("background", '#bbffaa');
}
);
- focusin()方法在所选元素获得焦点的时候触发
- focusout()方法在所选元素失去焦点的时候触发
表单事件
- focus与blur事件，与focusin和focusout不同的是 blur与focus不会总用于他的后代，即不支持冒泡处理
- change事件
input元素
监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发
select元素
对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
textarea元素
多行文本输入框，当有改变时，失去焦点后触发change事件 - select只能作用与<input>和<textarea>元素，当鼠标选中文字时触发
- submit事件，在提交表单的时候触发
具体能触发submit事件的行为：
1. <input type="submit">
2.<input type="image">
3.<button type="submit">
4.当某些表单元素获取焦点时，敲击Enter（回车键）
<script type="text/javascript">
//回车键或者点击提交表单
$('#target1').submit(function(e) {
alert('捕获提交表达动作,不阻止页面跳转')
});
//回车键或者点击提交表单,禁止浏览器默认跳转：
$('#target2').submit(function() {
alert('捕获提交表达动作,阻止页面跳转')
return false;
});
</script>
<form action="______">这里面的地址就是提交之后页面跳转的地址。
键盘事件
- keydown()与keyup()事件
- keypress事件与keydown和keyup的主要区别
1.只能捕获单个字符，不能捕获组合键
2.无法响应系统功能键（如delete，backspace）
3.不区分小键盘和主键盘的数字字符
事件的绑定与解绑
- on()的多事件绑定
使用方法
基本用法
$("#elem").on('click',function(){}) //on方式
多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });
多个事件绑定不同函数
$("#elem").on({mouseover:function(){}, mouseout:function(){} });
示例：
<script type="text/javascript">
//多事件绑定一
$("#test2").on('mousedown mouseup', function(e) {
$(this).text('触发事件：' + e.type)
})
</script>
<script type="text/javascript">
//多事件绑定二
$("#test3").on({
mousedown: function(e) {
$(this).text('触发事件：' + e.type)
},
mouseup: function(e) {
$(this).text('触发事件：' + e.type)
}
})
</script>
- on()的高级用法,事件委托机制
<div class="left">
<div class="aaron">
<a>点击这里</a>
</div>
</div>
<script type="text/javascript">
//给body绑定一个click事件
//没有直接a元素绑定点击事件
//通过委托机制，点击a元素的时候，事件触发
$('body').on('click', 'a', function(e) {
alert(e.target.textContent)
})
</script>
以上代码，在点击<a>标签内容的时候触发
- 卸载事件
删除一个事件：$("elem").off("name")
删除多个事件：$("elem").off("name1 name2")
删除所有事件：$("elem").off()
