一、事件的注册
1、一次注册多个事件
（1）普通的注册方式
<body>
<div></div>
<script>
$(function(){
$("div").click(function(){
$(this).css("background-color","red");
});
$("div").mouseover(function(){
$(this).css("background-color","black");
})
})
</script>
</body>
需要单个单个地注册jq的事件
事件处理on：
<body>
<div></div>
<script>
$(function(){
$("div").on({
click:function(){
$(this).css("background-color","red");
},
mouseenter:function(){
$(this).css("background-color","black");
},
});
})
</script>
</body>
和上面的效果是一样的，但是一次可以注册多个事件
（2）on的事件委派
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
$(function(){
$("ul").on("click","li",function(){
alert("你好");
})
})
</script>
</body>
click事件是绑定在ul上的，但是触发事件的是ul内的子元素li
2、事件解绑
（1）解绑普通事件
<body>
<div></div>
<script>
$(function(){
$("div").on({
click:function(){
$(this).css("background-color","red");
},
mouseenter:function(){
$(this).css("background-color","black");
},
});
$("div").off("click");
})
</script>
</body>
在函数里不写参数的时候默认为解除所有事件
（2）解绑带有事件委派的事件
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
$(function(){
$("ul").on("click","li",function(){
alert("你好");
})
});
$("ul").off("click","li");
</script>
</body>
3、只触发一次one
<body>
<div></div>
<script>
$(function(){
$("div").one({
click:function(){
$(this).css("background-color","red");
},
mouseenter:function(){
$(this).css("background-color","black");
},
});
})
</script>
</body>
4、自动触发事件
方式一：
<body>
<div></div>
<script>
$(function(){
$("div").on({
click:function(){
alert("你好");
}
});
$("div").click();
})
</script>
</body>
方式二：
<body>
<div></div>
<script>
$(function(){
$("div").on({
click:function(){
alert("你好");
}
});
$("div").trigger("click");
})
</script>
</body>
方式三：
<body>
<div></div>
<script>
$(function(){
$("div").on({
click:function(){
alert("你好");
}
});
$("div").triggerHandler("click");
})
</script>
</body>
不会触发元素的默认行为，例如：input无光标
5、jq的事件对象
<body>
<div></div>
<script>
$(function(){
$("div").on("click",function(event){
console.log(event);
})
})
</script>
</body>
二、鼠标、键盘事件
1、鼠标事件
(1)鼠标单击：click
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标单击事件</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#button").click(function(){ alert("按键被单击了！"); }); }); </script> </head> <body> <button id="button">请点击！</button> </body> </html>
（2）鼠标双击事件：dblclick
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标单击事件</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("button").dblclick(function(){ alert("鼠标双击了！！"); }); }); </script> </head> <body> <button>请双击，以触发事件！</button> </body> </html>
（3）mouseenter鼠标移动到相应元素上的时候触发，mouseleave鼠标不在相应的元素上的时候触发：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标单击事件</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("p").mouseenter(function(){ alert("鼠标移动到了段落上！"); }); $("p").mouseleave(function(){ alert("鼠标从段落上移开了！"); }); }); </script> </head> <body> <p>Just go. Just go. I just keep going until it feels right to me.</p> </body> </html>
(4)hover()：鼠标悬停在元素上的时候触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标悬停事件</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("p").hover(function(){ $("p").css("background-color","red"); },function(){ $("p").css("background-color","yellow"); }); }); </script> </head> <body> <p>Just go. Just go. I just keep going until it feels right to me.</p> </body> </html>
2、键盘事件
(1)keypress()：按键被按下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标悬停事件</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("input").keypress(function(){ alert("有按键按下了！"); }); }); </script> </head> <body> <input type="text"> </body> </html>
（2）keyup()：按键抬起触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>按键事件</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("input").keyup(function(){ alert("按键抬起了！"); }); }); </script> </head> <body> <input type="text"> </body> </html>
按下按键没有警告框，只有按键抬起的时候对话框才会出现。
（3）keydown()：按键按下有效
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>按键事件</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("input").keydown(function(){ alert("按键按下了！"); }); }); </script> </head> <body> <input type="text"> </body> </html>
与keypress不同，keydown是一个过程，只有在按键按下的过程中才会有对话框出现，按键抬起对话框立即消失。