js事件

事件

JavaScript有兩種事件實現模式：

1, 內聯模式,

2, 腳本模式。

內聯模式

內聯模式 : 直接在HTML標籤中添加事件.  

//在 HTML中把事件處理函數做爲屬性執行JS代碼

<input type="button" value="按鈕" onclick="alert('hello');" />

//注意單雙引號

//在HTML中把事件處理函數做爲屬性執行 JS 函數

<input type="button"value="按鈕" onclick="btnClick();" />

//執行JS 的函數

注: 內聯模式調用函數, 則函數不能放到window.onload 裏面，不然會找不到該函數。

腳本模式

使用腳本模式咱們須要先獲取到元素節點對象, 再針對該節點對象添加事件, 如咱們能夠採用三種方式來得到節點對象: getElementById(), getElementsByTagName(), getElementsByName()

添加事件方式一 :  經過匿名函數，能夠直接觸發對應的代碼

//給box節點對象添加點擊事件onclick

box.onclick = function() {   

         console.log('Hello world!');

};

添加事件方式二 :  經過指定的函數名賦值的方式 來執行函數

//給box節點對象添加點擊事件onclick

box.onclick = func;

function func() {    

         console.log('Hello world!');

}; 

 

循環添加事件

var aArr = document.querySelectorAll("a");
var sectionArr = document.querySelectorAll("section");

for(var i=0; i<aArr.length; i++){
    aArr[i].index = i;
    aArr[i].onclick = function(){
        for(var i=0; i<sectionArr.length; i++){
            sectionArr[i].classList.remove("active");
            aArr[i].classList.remove("active");
        }
        this.classList.add("active");
        sectionArr[this.index].classList.add("active");
    };
 }


/*以下爲用閉包實現方法*/

 for (var i in aArr) {
        aArr[i].onclick = fn(i);
    }

    function fn(index){

        var click = function(){
            for(var j=0;j< aArr.length;j++){
                aArr[j].classList.remove("active");
                sectionArr[j].classList.remove("active");
            }
            aArr[index].classList.add("active");
            sectionArr[index].classList.add("active");

        }
        return click;
    }

 

addEventListener() 方法用於向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法來移除 addEventListener() 方法添加的事件句柄。

語法

element.addEventListener(event, function, useCapture)

參數值

參數	描述
event	必須。字符串，指定事件名。 注意: 不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。
function	必須。指定要事件觸發時執行的函數。  當事件對象會做爲第一個參數傳入函數。 事件對象的類型取決於特定的事件。例如， "click" 事件屬於 MouseEvent(鼠標事件) 對象。
useCapture	可選。布爾值，指定事件是否在捕獲或冒泡階段執行。 可能值:true - 事件句柄在捕獲階段執行 false- false- 默認。事件句柄在冒泡階段執行

 

 

 

事件處理函數

全部的事件處理函數都會都有兩個部分組成，on+ 事件名稱;

注: 事件處理函數通常都是小寫字母

JavaScript 能夠處理的事件種類有三種：

 1, 鼠標事件、

 2, 鍵盤事件、

 3, HTML事件。

 

鼠標事件

click： 當單擊鼠標按鈕並在鬆開時觸發     boxNode.onclick = function() { };

dblclick： 當雙擊鼠標按鈕時觸發。ondbclick = function() { };

mouseover：當鼠標移入某個元素的那一刻觸發。onmouseover = function() { };

mousedown：當按下了鼠標還未鬆開時觸發。 onmousedown = function() { };

mousemove：當鼠標指針在某個元素上移動時觸發。onmousemove = function() { };  

mouseup： 釋放鼠標按鈕時觸發。 onmouseup = function() { };

mouseout：當鼠標剛移出某個元素的那一刻觸發。 onmouseout = function() {  };

 

鍵盤事件

鍵盤事件，在鍵盤上按下鍵時觸發的事件;

(通常由window對象或者document對象調用)

keydown：當用戶按下鍵盤上某個鍵觸發，若是按住不放，會重複觸發。

window.onkeydown = function() { };

keypress：當用戶按下鍵盤上的字符鍵觸發，若是按住不放，會重複觸發

window.onkeypress = function() { };

keyup：當用戶釋放鍵盤上的某個鍵觸發。 

window.onkeyup = function() { };

 

Keypress和keydown的區別

KeyDown：在控件有焦點的狀況下按下鍵時發生。會重複觸發

KeyPress：在控件有焦點的狀況下按下鍵時發生。會重複觸發

KeyUp：在控件有焦點的狀況下釋放鍵時發生。

1.KeyPress主要用來捕獲數字(注意：包括Shift+數字的符號)、字母（注意：包括大小寫）、小鍵盤等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開始鍵}和方向鍵外的ANSI字符 KeyDown 和KeyUp 一般能夠捕獲鍵盤除了PrScrn全部按鍵(這裏不討論特殊鍵盤的特殊鍵）

2.KeyPress 只能捕獲單個字符KeyDown 和KeyUp 能夠捕獲組合鍵。

3.KeyPress 能夠捕獲單個字符的大小寫

4.KeyDown和KeyUp 對於單個字符捕獲的KeyValue 都是一個值，也就是不能判斷單個字符的大小寫。

5.KeyPress 不區分小鍵盤和主鍵盤的數字字符。KeyDown 和KeyUp 區分小鍵盤和主鍵盤的數字字符。

6.其中PrScrn 按鍵KeyPress、KeyDown和KeyUp 都不能捕獲。

系統組合鍵的斷定

在使用鍵盤的時候，一般會使用到CTRL+SHIFT+ALT 相似的組合鍵功能。對於此，咱們如何來斷定？

經過KeyUp 事件可以來處理（這裏說明一下爲何不用KeyDown，由於在斷定KeyDown的時候，CTRL、SHIFT和ALT 屬於一直按下狀態，而後再加另一個鍵是不能準確捕獲組合鍵，因此使用KeyDown 是不能準確判斷出的，要經過KeyUp 事件來斷定 ）

 

 

HTML事件

load：當頁面徹底加載後觸發 window.onload = function() { };

unload：當頁面徹底卸載後觸發window.onunload = function() { };

select：當用戶選擇文本框(input 或 textarea)中的內容觸發。 

input.onselect = function() { }; 

change：當文本框(input 或 textarea)內容改變且失去焦點後觸發。

input.onchange = function() { };

focus：當頁面或者元素得到焦點時觸發。 input.onfocus = function() { };

blur：當頁面或元素失去焦點時觸發。input.onblur = function() {  };

submit：當用戶點擊提交按鈕在<form>元素節點上觸發。

 form.onsubmit = function() {  };

reset：當用戶點擊重置按鈕在<form>元素節點上觸發。

form.onreset = function() { };

scroll：當用戶滾動帶滾動條的元素時觸發。

window.onscroll= function() { };

 

事件處理的三個組成部分

事件處理由三個部分組成：

1, 觸發事件的節點對象

2, 事件處理函數

3, 事件執行函數。

 

this關鍵字 

在JS事件中, this表示觸發事件的元素節點對象;this指向函數的全部者

var box = document.getElementById('box');

box.onclick = function() {

      console.log(this.nodeName);  //this表示box對象

};

 

 

event對象的獲取

event對象(事件對象)是在觸發事件時, 瀏覽器會經過函數把事件對象做爲參數傳遞過來, 在事件觸發執行函數時通常會獲得一個隱藏的參數, 該參數也是放在arguments數組中.

 

box.onclick = function(evt){

     var oEvent  = evt || event; //獲取到event對象(事件對象)

     alert(oEvent);

};

 

 

event對象的屬性

1.button屬性

document.onclick = function(evt) {

        var oEvent  = evt || event;

        console.log(oEvent.button);

};

 

（右鍵屬性在mousedown中能夠顯示）；

2.可視區座標及屏幕座標

事件對象提供了兩組來獲取瀏覽器座標的屬性，一組是頁面可視區座標，另外一組是屏幕區座標。

 

Client 是到window的座標，screen是到整個電腦屏幕的座標

 

document.onmousedown= function(evt) {

       var oEvent  = evt || event;

        console.log(oEvent.clientX + ',' + oEvent.clientY);

        console.log(oEvent.screenX + ',' + oEvent.screenY);

};

 

event對象的屬性/鍵盤事件(修改鍵)

有時，咱們須要經過鍵盤上的某些鍵來配合鼠標來觸發一些特殊的事件。這些鍵爲： Shfit、Ctrl、Alt 和 Meat(Windows 中就是 Windows 鍵，蘋果機中是 Command 鍵)，它們常常被用來修改鼠標事件和行爲，因此叫修改鍵。

 

 

event對象的屬性/鍵盤事件(鍵碼)

1. 鍵碼 : keyCode屬性 

       全部按鍵, 包括功能鍵(control, alt,shift, tab, 方向鍵等), (不包括亮度,音量..的按鍵)在發生 keydown和keyup 事件時，event對象的 keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。對數字字母字符集，keyCode屬性的值與 ASCII 碼中對應, 大寫字母或小寫的編碼相同, 爲大寫字母。

document.onkeydown = function(evt) {

      var oEvent = evt || window.event;

      alert(oEvent.keyCode);  //按任意鍵，獲得相應的 keyCode

};

 

 

event對象的屬性/鍵盤事件(字符碼)

2.字符編碼 : charCode屬性 

Firefox、Chrome 和 Safari 的event對象支持charCode屬性，這個屬性只有在發生keypress事件時才包含值，並且這個值是按下的那個鍵所表明字符的 ASCII 編碼。此時的keyCode一般等於0或者也可能等於所按鍵的編碼

( 鍵盤上的數字, 字母(區分大小寫), 字符, 空格, 回車) 

document.onkeypress = function(evt) {

var oEvent = evt || event;

console.log(oEvent.charCode);

}

 

注：可使用 String.fromCharCode()將 ASCII 編碼轉換成實際的字符

 

事件的目標(target屬性)

target: 目標對象,存放綁定事件的元素節點對象

document.onclick = function(evt) {

     var oEvent = evt || event;

     console.log("document: " + oEvent.target); //HTMLHtmlElement

}

 

 

事件的冒泡

事件流

        事件流是描述的從頁面接受事件的順序，當幾個都具備事件的元素層疊在一塊兒的時候， 那麼你點擊其中一個元素，並非只有當前被點擊的元素會觸發事件，而層疊在你點擊範圍 的全部元素都會觸發事件。事件流包括兩種模式：冒泡和捕獲。

事件冒泡是從裏往外逐個觸發。事件捕獲，是從外往裏逐個觸發。那麼現代的瀏覽器 默認狀況下都是冒泡模型

事件的冒泡: 指的是在頁面上層節點觸發的事件會繼續傳遞給下層節點, 這種傳遞方式,咱們稱之爲事件的冒泡傳遞;

 

阻止冒泡的方式有兩種:

( 在指定不想再繼續傳遞事件的節點的事件執行函數中使用)

//1, 取消冒泡

     oEvent.cancelBubble = true;     //這個用的比較多

//2, 中止傳播

     oEvent.stopPropagation();  //不支持IE8如下

 

阻止右鍵菜單事件

阻止右鍵菜單

在以前使用event對象的button屬性時, 點擊鼠標右鍵會彈出系統菜單, 若是咱們想要建立本身的右鍵菜單, 則須要先阻止默認的右鍵菜單

document.oncontextmenu = function(){

alert("右鍵被按下");

return false;

}

 

 

 

超連接的攔截

<a>標籤有屬性href, 在用戶點擊超連接標籤<a>時, 實際上內部會調用onclick事件，那麼若是咱們須要在超連接跳轉前作一些判斷處理, 則能夠將onclick指向咱們本身的函數,並返回true或者false來決定是否容許超連接跳轉;

var oA = document.getElementsByTagName("a")[0];

oA.onclick = function() {

return (confirm("你肯定要跳轉嗎?"))；

}

 

<a href="http://www.baidu.com">百度一下</a>

 

拖拽

所謂拖拽: 就是按住元素後移動位置, 最後鬆開的過程

1, 實現拖拽相關的三大事件:

onmousedown : 鼠標按下

onmousemove : 鼠標移動

onmouseup : 鼠標鬆開

 

實現拖拽思路：

    1, 給目標元素添加onmousedown事件(鼠標按下事件)

        在鼠標按下的瞬間, 記錄鼠標所在位置與目標元素左邊界的距離disX, 以及與上邊界的距離disY

    2, 當onmousedown事件發生之後(鼠標按下後)，就給document添加onmousemove事件(鼠標移動事件)

    在onmousemove(鼠標移動事件)中, 根據如下公式不斷刷新目標元素所在的位置:

    公式: 目標元素的left = oEvent.clientX – disX + 「px」;

             目標元素的top = oEvent.clientY – disY + 「px」;

3, 在onmousedown事件(鼠標按下事件)發生之後，給document再添加onmouseup事件(鼠標鬆開事件)，且在onmouseup事件中，取消document的onmousemove事件; 

onmousedown觸發事件的對象: 目標元素(即要拖拽的元素);

onmousemove觸發事件的對象: document

onmouseup觸發事件的對象: document

onmousemove和onmouseup的觸發事件對象都是document, 意味着鼠標在網頁的任意位置移動鼠標或鬆開鼠標，都會觸發對應的事件;

onmousemove和onmouseup 都要寫在onmousedown事件中, 這樣就能夠保證鼠標按下後才能夠移動目標元素(onmousemove)或中止移動(onmouseup) 

取消事件的方法：把該事件等於null,(divNode.onmousedown = null;)

 

事件監聽器

      事件監聽器, 是JS事件中的一種事件觸發機制, 咱們能夠經過添加事件監聽器的方式給元素添加事件及執行函數

1, 添加事件監聽器

   box.addEventListener("click", func, false) : 給box元素添加點擊事件(click), 以及事件執行函數func

針對該函數的三個參數做說明:

      第一個參數(「click」) : 事件名稱(前面沒有on)

      第二個參數(func): 事件執行函數名稱(沒有雙引號, 也沒有())

匿名函數寫法：function(){}

      第三個參數(false/true) : 是否使用捕捉(反向冒泡)，默認false，爲冒泡 

注: IE8及其如下不支持，火狐和谷歌支持。 

2, 移除事件監聽器 

   box.removeEventListener("click", func) : 將box元素的點擊事件(click), 以及對應的事件執行函數func移除 

注: 這裏只會刪除使用box.addEventListener()方法添加的事件監聽器 

 

獲取style樣式

Var cssStyle = box.currentStyle || getComputedStyle(box, null);

 

例子：console.log(getComputedStyle(box, null).width);

修改style屬性的時候只能用   doxNode.style.width =’100px’;

 

offsetParent參照物父元素(只能取值，不能賦值)

當某個元素的父元素或以上元素都未進行CSS定位時，則返回body元素，也就是說元素的偏移量（offsetTop、offsetLeft）等屬性是以body爲參照物的

當某個元素的父元素進行了CSS定位時（absolute或者relative），則返回父元素，也就是說元素的偏移量是以父元素爲參照物的

當某個元素及其父元素都進行CSS定位時，則返回距離最近的使用了CSS定位的元素

Offsetwidth 相似於 style.width,此處取到的是自身的寬度   Offsetheight 相似於 style.height，此處取到的是自身的高度

oEvent.offsetX 就是鼠標點擊的位置距離其所屬對象左邊界的距離

oEvent.offsetY 就是鼠標點擊的位置距離其所屬對象上邊界的距離