A、JavaScript事件簡介
事件
- 事件，就是檔案或瀏覽器視窗中發生的一些特定的互動瞬間
- JavaScript 與 HTML 之間的互動是通過事件實作的。
- 對于 Web 應用來說，有下面這些代表性的事件：單擊事件、滑鼠移入移出事件、鍵盤按下/彈起事件等等
-事件就是用戶與瀏覽器的互動行為
onclick 滑鼠點擊某個物件
ondblclick 滑鼠雙擊某個物件
onerror 當加載檔案或影像時發生某個錯誤
onfocus 元素獲得焦點
onblur 元素失去焦點
onkeydown 某個鍵盤的鍵被按下
onkeypress 某個鍵盤的鍵被按下或按住
onkeyup 某個鍵盤的鍵被松開
onload 某個頁面或影像被完成加載
onmousedown 某個滑鼠按鍵被按下
onmousemove 滑鼠被移動
onmouseout 滑鼠從某元素移開
onmouseover 滑鼠被移到某元素之上
onmouseup 某個滑鼠按鍵被松開
onreset 重置按鈕被點擊
onresize 視窗或框架被調整尺寸
onselect 文本被選定
onsubmit 提交按鈕被點擊
onunload 用戶退出頁面
-給button按鈕系結事件
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("O(∩_∩)O哈哈~ 第二個按鈕");
}
B、JavaScript檔案的加載
1.瀏覽器在加載一個頁面時，是按照自上而下的順序加載的。讀取到一行的時候就運行一行，如果將script標簽寫在上面，在執行代碼時，頁面還沒有加載
2. onload事件會在整個頁面加載完成之后觸發，為window系結一個onload事件
3. window.onload 在頁面上只能出現一次，后面的代碼會覆寫前面的代碼
4. 將js代碼寫在頁面的下面，就是為了保證執行代碼的時候頁面已經加載完畢
C、JavaScript事件物件(Event)
1.
滑鼠 鍵盤屬性
屬性 描述
altKey 回傳當事件被觸發時，"ALT" 是否被按下。
button 回傳當事件被觸發時，哪個滑鼠按鈕被點擊。
clientX 回傳當事件被觸發時，滑鼠指標的水平坐標。
clientY 回傳當事件被觸發時，滑鼠指標的垂直坐標。
ctrlKey 回傳當事件被觸發時，"CTRL" 鍵是否被按下。
metaKey 回傳當事件被觸發時，"meta" 鍵是否被按下。
relatedTarget 回傳與事件的目標節點相關的節點。
screenX 回傳當某個事件被觸發時，滑鼠指標的水平坐標。
screenY 回傳當某個事件被觸發時，滑鼠指標的垂直坐標。
shiftKey 回傳當事件被觸發時，"SHIFT" 鍵是否被按下。
2.onmousemove
- 該事件將會在滑鼠在元素中移動時被觸發
- 事件物件：當事件的回應函式被觸發時，瀏覽器每次都會將一個事件物件作為實參傳遞傳遞進回應函式,在事件物件中封裝了當前事件相關的一切資訊，比如：滑鼠的坐標 鍵盤那個按鍵被按下，滑鼠滾輪滾動的方向
-在IE8中，回應函式被觸發時，瀏覽器不會傳遞事件物件，
-在IE8及以下的瀏覽器中，是將事件物件作為window物件的屬性保存的
-clientX 可以獲取滑鼠指標的水平坐標
-clientY 可以獲取滑鼠指標的垂直坐標
var X=event.clientX;
var Y=event.clientY;
txt.innerHTML="X="+X+" Y="+Y;
D、JavaScript事件物件案例_移動的愛心
1.處理兼容性問題：
event=event||window.event;
2. 獲取到滑鼠的坐標
clientX和clientY：用于獲取滑鼠當前的可見視窗的坐標。div的偏移量是相對于整個網頁的
var left=event.clientX;
var top=event.clientY;
3. pageX和pageY：用于獲取滑鼠相對于當前頁面的坐標。但是這個屬性在IE8中不兼容，所以如果需要兼容IE8,則不要使用
var left=event.pageX;
var top=event.pageY;
4. 獲取滾動條滾動的距離：
-Chrome認為瀏覽器的滾動條是body的，可以通過body.scrollTop來獲取
-火狐等瀏覽器認為瀏覽器的滾動條是HTML的
-最新的Chrome瀏覽器中可以使用document.documentElement.scrollTop獲取值
E、JavaScript事件冒泡（Bubble）
1. - 所謂冒泡指的就是事件的向上傳導，當后代元素上的事件被觸發時，其祖先元素的相同事件也會被觸發
- 在開發中大部分情況冒泡都是有用的，如果不希望冒泡發生可以通過事件物件取消冒泡 event.cancelBubble=true
事件物件：event=event||window.event;
取消冒泡：event.cancelBubble=true;
F、JavaScript事件的委派
1. 為每一個a標簽系結一個單擊回應事件，這種操作比較麻煩，而且這種操作只能為已有的a標簽系結單擊事件，新添加的超鏈接需要重新系結
2. 我們希望只系結一次事件，即可應用到多個元素上，即使元素是后添加的，我們可以嘗試將其系結給元素的共同的祖先元素
3.事件的委派：
- 指將事件統一系結給元素共同的祖先元素，這樣當后代元素上的事件觸發時，會一直冒泡到祖先元素，從而通過祖先元素的回應函式來處理事件
- 事件委派是利用冒泡，通過委派可以減少事件系結的次數，提高程式的性能
//事件物件的屬性target：回傳觸發此事件的元素(事件的目標節點)
list.onclick=function(event){
event=event||window.event;
if(event.target.nodeName=="A"){
alert("a標簽被點擊了");
}
alert("a標簽被點擊了");
}
G、JavaScript事件的系結（拓展）
1. 使用 物件.事件=函式形式系結事件
-它只能同時為同一個元素系結同一事件一次，不能系結多次，如果系結多次，后面的會覆寫掉前面的
2. addEventListener()
- 通過這個方法也可以為元素系結回應函式
- 引數：
1.事件的字串，不加on
2.回呼函式，當事件觸發時該函式會被呼叫
3.是否在捕獲階段觸發事件，需要一個布林值，一般都傳false
使用addEventListener()可以同時為一個元素的相同事件系結多個回應函式
這樣當事件被觸發時，回應函式將會按照函式的系結順序執行
這個方法不支持IE8及以下的瀏覽器
3. addEventListener()中的this，是系結事件的物件
attachEvent()中的this，是window，需要統一兩個方法的this
4. 引數：
-obj 要系結事件的物件
-eventStr 事件的字串(不要on)
-callback 回呼函式
-大部分瀏覽器中給元素系結事件
obj.addEventListener(evenStr,callback,false);
-ie8 及一下瀏覽器
this的值由呼叫物件決定
obj.attachEvent("on"+evenStr,function(){
callback.call(obj);
});
H、77_JavaScript事件的傳播(拓展)
1. 事件的傳播
- 關于事件的傳播網景公司和微軟公司有不同的理解
- 微軟公司認為事件應該是由內向外傳播，也就是當事件觸發時，應該先觸發 當前元素上的事件，然后再向當前元素的祖先元素上傳播，也就說事件應 該在冒泡階段執行。
- 網景公司認為事件應該是由外向內傳播的，也就是當前事件觸發時，應該先觸發當前元素的最外層的祖先元素的事件，然后在向內傳播給后代元素
- W3C綜合了兩個公司的方案，將事件傳播分成了三個階段
1.捕獲階段
- 在捕獲階段時從最外層的祖先元素，向目標元素進行事件的捕獲，但是默認此時不會觸發事件
2.目標階段
- 事件捕獲到目標元素，捕獲結束開始在目標元素上觸發事件
3.冒泡階段
- 事件從目標元素向他的祖先元素傳遞，依次觸發祖先元素上的事件
- 如果希望在捕獲階段就觸發事件，可以將addEventListener()的第三個引數設定為true
一般情況下我們不會希望在捕獲階段觸發事件，所以這個引數一般都是false
- IE8及以下的瀏覽器中沒有捕獲階段
*/
/*W3C:萬維網聯盟，是Web技術領域最具權威和影響力的國際中立性技術標準機構*/
}
引數：
obj 要系結事件的物件
eventStr 事件的字串(不要on)
callback 回呼函式
例如：
function bind(obj,evenStr,callback){
if(obj.addEventListener){
//大部分瀏覽器中給元素系結事件
obj.addEventListener(evenStr,callback,false);
}else{
//ie8 及一下瀏覽器
//this的值由呼叫物件決定
obj.attachEvent("on"+evenStr,function(){
callback.call(obj);
});
}
}
I、JavaScript事件案例_拖拽
1.拖拽的流程
1.當滑鼠被拖拽元素按下時，開始拖拽 onmousedown
2.當滑鼠移動時被拖拽的元素跟著滑鼠移動 onmousemove
3.當滑鼠松開時，被拖拽元素固定在當前位置 onmouseup
2. 當滑鼠被拖拽元素按下時，開始拖拽 onmousedown
box.onmousedown=function(event){
//事件物件的兼容問題
event=event||window.event;
var ol=event.clientX-box.offsetLeft;
var ot=event.clientY-box.offsetTop;
3. 當滑鼠移動時被拖拽的元素跟著滑鼠移動 onmousemove
document.onmousemove=function(event){
//事件物件的兼容問題
event=event||window.event;
var left=event.clientX;
var top=event.clientY;
box.style.left=left-ol+"px";
box.style.top=top-ot+"px";
}
4. 當滑鼠松開時，被拖拽元素固定在當前位置 onmouseup
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
J、JavaScript事件案例_拖拽(函式封裝)
1. 當滑鼠松開時，被拖拽元素固定在當前位置 onmouseup
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
//取消捕獲
if(obj.releaseCapture){
obj.releaseCapture();
}
}
2. 當我們拖拽一個網頁中的內容時，瀏覽器會默認去搜索引擎中搜索內容，此時會導致拖拽功能例外，這是瀏覽器提供的默認行為，如果不希望發生這個行為，則可以通過return false 來取消默認行為
但是這個對IE8一下不起作用
K、JavaScript事件捕獲(setCaptuer)
設定btn1對滑鼠按下相關的事件進行捕獲
當呼叫一個元素的setCapture()方法以后，
這個元素將會把下一次所有的滑鼠按下相關的事件捕獲到自身上
setCapture()
- 只有IE支持，但是在火狐中呼叫時不會報錯，
-而如果使用chrome呼叫，則會報錯
L、JavaScript鍵盤事件
1.鍵盤事件：
onkeydown: 鍵盤被按下事件
- 如果一直按著某個鍵不松開，則會一直觸發該事件
- 當onkeydown事件連續觸發時，第一次和第二次之間的間隔時間稍微長一點，其他則會非常快。這是為了防止誤操作的發生
onkeyup: 鍵盤被松開的事件
鍵盤事件一般都會系結給一些可以獲取焦點的物件或則是document
2. 可以通過keyCode來獲取按鍵的編碼，通過它可以判斷哪個鍵被按下，除了keyCode，事件物件中還提供了幾個屬性
-altKey
-ctrlKey
-shiftKey
- 這三個屬性分別是用來判斷alt cltrl shift是否被按下的。如果被按下了則回傳true，否則回傳false
3. if(event.keyCode>=48&&event.keyCode<=57){
//在文本框中輸入內容，屬于onkeydown的默認行為，
//如果onkeydown中取消默認行為，則輸入的內容，不會出現在本文本框中
return false;
}
M、JavaScript鍵盤事件_鍵盤移動div
1.事件物件
event=event||window.event;
event.keyCode 37 箭頭向左
event.keyCode 38 箭頭向上
event.keyCode 39 箭頭向右
event.keyCode 40 箭頭向下
uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/50279.html
標籤：非技術區