JavaScript中已經(jīng)學習過了事件，但是jQuery對JavaScript事件進行了封裝，增加并擴展了事件處理機制。jQuery不僅提供了更加優(yōu)雅的事件處理語法，而且極大的增強了事件的處理能力。
簡單事件綁定>>bind事件綁定>>delegate事件綁定>>on事件綁定(推薦)
簡單事件注冊
click(handler)單擊事件
mouseenter(handler)鼠標進入事件
mouseleave(handler)鼠標離開事件
缺點：不能同時注冊多個事件
bind方式注冊事件
//第一個參數(shù)：事件類型
//第二個參數(shù)：事件處理程序
$("p").bind("click mouseenter", function(){
//事件響應(yīng)方法
});
缺點：不支持動態(tài)事件綁定
delegate注冊委托事件
// 第一個參數(shù)：selector，要綁定事件的元素
// 第二個參數(shù)：事件類型
// 第三個參數(shù)：事件處理函數(shù)
$(".parentBox").delegate("p", "click", function(){
//為 .parentBox下面的所有的p標簽綁定事件
});
缺點：只能注冊委托事件，因此注冊時間需要記得方法太多了
on注冊事件
jQuery1.7之后，jQuery用on統(tǒng)一了所有事件的處理方法。
最現(xiàn)代的方式，兼容zepto(移動端類似jQuery的一個庫)，強烈建議使用。
on注冊簡單事件
// 表示給$(selector)綁定事件，并且由自己觸發(fā)，不支持動態(tài)綁定。
$(selector).on( "click", function() {});
on注冊委托事件
// 表示給$(selector)綁定代理事件，當必須是它的內(nèi)部元素span才能觸發(fā)這個事件，支持動態(tài)綁定
$(selector).on( "click",“span”, function() {});
on注冊事件的語法：
第一個參數(shù)：events，綁定事件的名稱可以是由空格分隔的多個事件（標準事件或者自定義事件）
第二個參數(shù)：selector, 執(zhí)行事件的后代元素（可選），如果沒有后代元素，那么事件將有自己執(zhí)行。
第三個參數(shù)：data，傳遞給處理函數(shù)的數(shù)據(jù)，事件觸發(fā)的時候通過event.data來使用（不常使用）
第四個參數(shù)：handler，事件處理函數(shù)
$(selector).on(events[,selector][,data],handler);
// 這個是p自己注冊的事件（簡單事件）
$("p").on("click", function () {
alert("呵呵");
});
$("div").on("click", "p", function () {
alert("呵呵")
});
$("#btn").on("click", function () {
$("<p>我是新建的p元素</p>").appendTo("div");
});
順序：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 500px;
width: 500px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// 這個是p自己注冊的事件（簡單事件）
$("p").on("click", function () {
alert("呵呵噠"); // 1 顯示
});
//給div自己執(zhí)行的
$("div").on("click", function () {
alert("嗚嗚嗚"); // 3 顯示
});
//給div里面的p執(zhí)行 委托事件
$("div").on("click", "p", function () {
alert("嘿嘿嘿") // 2 顯示
});
});
</script>
</body>
</html>
unbind方式（不用）
$(selector).unbind(); //解綁所有的事件
$(selector).unbind("click"); //解綁指定的事件
undelegate方式（不用）
$( selector).undelegate(); //解綁所有的delegate事件
$( selector).undelegate( “click” ); //解綁所有的click事件
// 解綁匹配元素的所有事件
$(selector).off();
// 解綁匹配元素的所有click事件
$(selector).off("click");
$(selector).click(); //觸發(fā) click事件
$(selector).trigger("click");
jQuery事件對象其實就是js事件對象的一個封裝，處理了兼容性。
//screenX和screenY對應(yīng)屏幕最左上角的值
//clientX和clientY距離頁面左上角的位置（忽視滾動條）
//pageX和pageY距離頁面最頂部的左上角的位置（會計算滾動條的距離）
//event.keyCode按下的鍵盤代碼
//event.data存儲綁定事件時傳遞的附加數(shù)據(jù)
//event.stopPropagation()阻止事件冒泡行為
//event.preventDefault()阻止瀏覽器默認行為
//return false:既能阻止事件冒泡，又能阻止瀏覽器默認行為。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
width: 900px;
height: 60px;
background-color: black;
margin: 0 auto;
}
.nav li {
width: 100px;
height: 60px;
/*border: 1px solid yellow;*/
float: left;
position: relative;
overflow: hidden;
}
.nav a {
position: absolute;
width: 100%;
height: 100%;
font-size: 24px;
color: blue;
text-align: center;
line-height: 60px;
text-decoration: none;
z-index: 2;
}
.nav span {
position: absolute;
width: 100%;
height: 100%;
background-color: yellow;
top: 60px;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//給li注冊鼠標進入事件,讓li下面的span top：0 播放音樂
$(".nav li").mouseenter(function () {
$(this).children("span").stop().animate({top: 0});
//播放音樂
var idx = $(this).index();
$(".nav audio").get(idx).load();
$(".nav audio").get(idx).play();
}).mouseleave(function () {
$(this).children("span").stop().animate({top: 60});
});
//節(jié)流閥 ：按下的時候，觸發(fā)，如果沒彈起，不讓觸發(fā)下一次
//1. 定義一個flag
var flag = true;
//按下1-9這幾個數(shù)字鍵，能觸發(fā)對應(yīng)的mouseenter事件
$(document).on("keydown", function (e) {
if(flag) {
flag = false;
//獲取到按下的鍵
var code = e.keyCode;
if(code >= 49 && code <= 57){
//觸發(fā)對應(yīng)的li的mouseenter事件
$(".nav li").eq(code - 49).mouseenter();
}
}
});
$(document).on("keyup", function (e) {
flag = true;
//獲取到按下的鍵
var code = e.keyCode;
if(code >= 49 && code <= 57){
//觸發(fā)對應(yīng)的li的mouseenter事件
$(".nav li").eq(code - 49).mouseleave();
}
});
//彈起的時候，觸發(fā)mouseleave事件
});
</script>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="javascript:void(0);">導(dǎo)航1</a>
<span></span>
</li>
<li><a href="javascript:void(0);">導(dǎo)航2</a><span></span></li>
<li><a href="javascript:void(0);">導(dǎo)航3</a><span></span></li>
<li><a href="javascript:void(0);">導(dǎo)航4</a><span></span></li>
<li><a href="javascript:void(0);">導(dǎo)航5</a><span></span></li>
<li><a href="javascript:void(0);">導(dǎo)航6</a><span></span></li>
<li><a href="javascript:void(0);">導(dǎo)航7</a><span></span></li>
<li><a href="javascript:void(0);">導(dǎo)航8</a><span></span></li>
<li><a href="javascript:void(0);">導(dǎo)航9</a><span></span></li>
</ul>
<div>
<audio src="mp3/1.ogg"></audio>
<audio src="mp3/2.ogg"></audio>
<audio src="mp3/3.ogg"></audio>
<audio src="mp3/4.ogg"></audio>
<audio src="mp3/5.ogg"></audio>
<audio src="mp3/6.ogg"></audio>
<audio src="mp3/7.ogg"></audio>
<audio src="mp3/8.ogg"></audio>
<audio src="mp3/9.ogg"></audio>
</div>
</div>
</body>
</html>
聯(lián)系客服
