事件的概念: 在JavaScript和HTML之間的交互是通過用戶和瀏覽器操作頁面是引發的事件來處理,當文檔或者它的某些元素髮生某些變化或操作時,瀏覽器會自動生成一個事件
事件的定義:
1.通俗的講,我們要做的那件事(操作,動作,行爲),就是一個事件
2.在瀏覽器,事件是指: 瀏覽器打開到關閉這個過程中,用戶在瀏覽器所做的一系列操作就是事件;同時,用戶所做的事件,一般都有相應的響應(函數),因此,完整的事件,一般都會有某個操作的同時,會做出相應的響應
3.瀏覽器事件一般有以下分類
1)鼠標事件 -> 單擊 雙擊 鼠標經過 離開.....
2)鍵盤事件 -> 鍵盤按下 彈起......
3)瀏覽器事件 -> 加載事件 窗口大小改變
4.事件源 -> 發生事件的源頭
1、事件的綁定
1.bind(type,[data],fn) -> 爲每個匹配元素的特定事件綁定事件處理函數 -> 選擇器事件類型事件類型或者("選擇器").bind("事件類型", function(){}) ;
2.on(enents,[selector],[data],fn) -> 在選擇元素上綁定一個或多個事件的事件處理函數 -> $("選擇器").on("事件類型", function(){}) ;
3.one(type,[data],fn) -> 爲每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數 -> $("選擇器").one("事件類型", function(){});
4.簡寫綁定事件 -> $("選擇器").事件類型(function(){}) ;
-> $("p").click(function(){
//函數體
}) ;
2、事件的移除
1.unbind() -> bind()的反向操作，從每一個匹配的元素中刪除綁定的事件 -> $("選擇器").unbind()
2.off() ->在選擇元素上移除一個或多個事件的事件處理函數 -> 選擇器("選擇器").off( "事件類型", "**" )
3、事件對象 & 事件冒泡
1.事件源: event.target -> 最初觸發事件的DOM元素
2.鼠標相對頁面的座標: event.pageX & event.pageY -> 鼠標相對於文檔的左右邊緣的位置(單位像素(px))
3.鼠標鍵的類型: event.which() -> 針對鍵盤和鼠標事件，這個屬性能確定你到底按的是哪個鍵或按鈕(左鍵 1; 右鍵 3; 中間鍵 2)
4.阻止事件冒泡: event.stopPropagation() -> 防止事件冒泡到DOM樹上，也就是不觸發的任何前輩元素上的事件處理函數
$("選擇器").click(function(event){
event.stopPropagation(); // do something
});
5.阻止默認行爲: event.preventDefault() -> 阻止默認事件行爲的觸發 -> $("a").click(function(event) {
event.preventDefault();
}) ;
4、合成事件
1.hover([over,]out): 一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法.這是一個自定義的方法,它爲頻繁使用的任務提供了一種"保持在其中"的狀態
2.toggle():用於綁定兩個或多個事件處理器函數,以響應被選元素的輪流的 click 事件 -> $("p").toggle("slow");
3.trigger() -> 在每一個匹配的元素上觸發某類事件 ->
$("#btn").trigger("click") ; 等於 $("#btn").click() ;
5、動畫
1.動畫基礎
1)width()/height(): 取得第一個匹配元素當前計算的寬度值(px)/取得第一個匹配元素當前計算的高度值(px)
2)offset(): 獲取匹配元素在當前視口的相對偏移
3)position(): 獲取匹配元素相對父元素的偏移
4)scrollTop()/scrollLeft(): 獲取匹配元素相對滾動條頂部的偏移/獲取匹配元素相對滾動條左側的偏移
2.常用動畫
1)show()/hide(): 顯示隱藏的匹配元素/隱藏顯示的元素 -> ("p").hide()
2)fadeIn()/fadeOut():通過不透明度的變化來實現所有匹配元素的淡入/淡出效果, 並在動畫完成後可選地觸發一個回調函數
-> ("p").fadeOut("slow");
3)slideUp()/slideDown():通過高度變化(向上減小)來動態地隱藏/顯示所有匹配的元素,在隱藏/顯示完成後可選地觸發一個回調函數 -> ("p").slideDown("slow");
4)toggle():用於綁定兩個或多個事件處理器函數,以響應被選元素的輪流的 click 事件 -> $("td").toggle() ;
5)slideToggle(): 通過高度變化來切換所有匹配元素的可見性,並在切換完成後可選地觸發一個回調函數 -> $("p").slideToggle("slow") ;
6)fadeTo():把所有匹配元素的不透明度以漸進方式調整到指定的不透明度,並在動畫完成後可選地觸發一個回調函數 -> $("p").fadeTo("slow", 0.66);
.......
3.自定義動畫
animate(params,[speed],[easing],[fn])
params: 一組包含作爲動畫屬性和終值的樣式屬性和及其值的集合
speed: 三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如: 1000)
easing: 要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing".
fn: 在動畫完成時執行的函數,每個元素執行一次
#one {
width: 100px;
height: 100px;
background:red ;
color:#FFF ;
} ->
$("#one").animate({ //選擇要操作的節點,創建自定義動畫 width : "300px", // 寬度 100px -> 300px height : "200px", // 高度 100px -> 300px fontSize : "50px", // 字體 默認 -> 50px opacity : 0.5 // 透明度 1.0 -> 0.5 },5000,"linear",function(){ // 5000ms(5s)完成動畫效果 alert("動畫已經完成! ") ; // 提示完成動畫 }) ;