Event

事件（event)是javascript應用跳動的心臟，進行交互，使網頁動起來

      事件多是用戶在某些內容上的點擊，鼠標通過某個特定元素或按下鍵盤上的某些按鍵

      事件還多是web網頁加載完成，用戶滑動窗口，改變窗口大小   

      經過js能夠監聽特定事件的發生，並規定讓某些事件發生，以對這些事件做出響應

 

     對用戶行爲或者頁面自身行爲的一種監聽

     當某種行爲觸發以後，會調用指定的函數執行

     事件通常要配合函數使用！！經過事件驅動函數的執行

 

做用：

     1.驗證用戶輸入的數據

     2.增長頁面的動感效果

     元素與元素之間的交互，用戶與頁面之間的交互，前段與後端的交互

   

事件流：

     分兩個階段：捕獲階段和冒泡階段（IE)提出

     捕獲：先由不具體的元素接收事件，最具體的節點最後才能接收到事件

     冒泡：先從具體的接收元素，而後逐步向上傳播不具體的元素 

 

事件名稱：click 點擊 ， mousemove 鼠標移動 ， load 加載

          onload 加載事件   onclick 點擊事件的處理函數

          

事件三種方式\DOM事件級別：3級

     1.行內事件\HTML事件：就是將事件處理函數做爲html的屬性來使用；耦合度高  

       不屬於DOM事件級中的任意一種       

        1）<input type="button" value="按鈕" onclick="alert(js行內事件');"/>    

        2）<input type="button" value="按鈕" onclick="showMsg();"/>

           js-->function showMsg () {

                    alert('js行內事件2');

                }

            若是方法名改變，那麼就改兩處，方法名和引用位置都要改,不方便!!!

 

      2.DOM0級事件處理--解耦

            步驟：

                (1)先獲取須要綁定事件的元素對象

                (2)給該元素對象綁定事件

        缺點：DOM0級事件，不能給同一個元素對象綁定同類型的事件，

              由於後面的事件覆蓋前面的事件處理函數

        取消事件：onclick=null ;把時間置爲空

         <input type="button" value="按鈕" id="btn"/>

         js-->var inputs = document.getElementById("btn");

               inputs.onclick = function () { \\也可使用鏈式操做

                    //func回調函數，也叫監聽函數

                   alert("你好");

               }

 

     3.DOM2事件：才分捕獲和冒泡，D0沒有

          獲取元素，綁定事件 addEventListener   listen聽 listener監聽

          傳入三個參數：addEventListener(事件名稱，事件處理方法，是否冒泡）

          用DOM2級事件，不須要加on 如onclick——>click

          能夠綁定多個事件，之間不會覆蓋

          缺點：兼容問題（跟IE有關！！)

          取消事件：removeEventlistener('事件名稱字符串'，事件處理方法，是否冒泡）

 

     4.DOM3級事件

       DOM3級事件在DOM2級事件的基礎上添加了更多的事件類型，所有類型以下：

       UI事件，當用戶與頁面上的元素交互時觸發，如：load、scroll

       焦點事件，當元素得到或失去焦點時觸發，如：blur、focus

       鼠標事件，當用戶經過鼠標在頁面執行操做時觸發如：dblclick、mouseup

       滾輪事件，當使用鼠標滾輪或相似設備時觸發，如：mousewheel

       文本事件，當在文檔中輸入文本時觸發，如：textInput

       鍵盤事件，當用戶經過鍵盤在頁面上執行操做時觸發，如：keydown、keypress

 

IE兼容DOM2

     1.IE8以及如下不支持 addEventListener,removeEventListener

       那麼要使用[兩個參數，不須要指定是否冒泡]

       attachEvent(事件名[帶on的事件名],處理方法

       detachEvent(事件名[帶on的事件名],處理方法）

     2.在IE9,IE10中同時支持這兩種方式

     3.在IE11 只支持addEventListener,removeEventListener 

 

封裝事件：讓元素對象同時支持現代瀏覽器和IE8以及如下的瀏覽器

     抓住二者不一樣點

     若是window.addEventListener 存在就用他綁定

     若是不存在用attachEvent

 

     /** 文檔註釋

      * @func:  兼容各個瀏覽器的DOM2事件

      * @param:  {obj}  要被綁定事件的對象

      * @param:  {eventType}  事件類型

      * @param:  {fn}  事件處理的方法

     function bindEvent(obj,eventType,fn){   //fn方法名，fn()調用

          if(window.addEventListener){

               obj.addEventListener(eventType,fn,false)

          }else{

               obj.attachEvent('on'+eventType,fn)

          }

 

事件冒泡：

     false:表明在冒泡階段執行

           ('click',fn1,false)

     true:表明在捕獲階段執行

           ('click',fn1,true)

     在函數裏面阻止冒泡

      1.第一步在函數裏面定義一個形參event

      2.調用方法 event.stopPropagation();stop泡

      function fn1(event){

        event.stopPropagation();//阻止冒泡!!!

        alert('我是目標事件!');

      }

 

事件捕獲：由父到子的傳遞過程

 

事件捕獲和事件冒泡：

     捕獲階段

     document.body.addEventListener('click',function(){

          alert('我是body,緊隨document觸發'）;

          document.body.style.background='red';

     },true);

     冒泡階段

     document.body.addEventListener('click',function(){

          alert('----');

          document.body.style.background='';

     },false};

     寫在一塊兒時，最終背景無顏色變化，應註釋冒泡階段代碼

 

計算器：

     1.加法

     sum.onclick=function(){

          var v1=Number(num1.value); //默認獲得就是字符串類型

          var v2=Number(num2.value);

          result.value=v1+v2;

     }

     2.加減乘除運算

     result.value = eval(num1.value) 把一段字符串解析成js代碼

     3.退格

     num.value=num.value.slice(0,num.value.length-1);

 

鼠標事件

     onclick: 鼠標單擊事件  使用率90%

     ondblclick: 鼠標雙擊事件

     onmousedown: 鼠標上的按鈕被按下時

     onmouseup: 鼠標按下後，鬆開時激發的事件

 

     d.onmousedown = function () {

        console.log('鼠標被按下!!');

     };

     onmouseover: 當鼠標移動\入到某對象範圍的上方時觸發的事件 over超過，上方

     onmousemove: 鼠標移動時觸發的事件

     onmouseout: 當鼠標移出\離開某對象範圍時觸發的事件

 

把大問題分紅小問題，去解決

鼠標控制鍵盤hover特效：

   event.target  指向當前的事件元素 event.target==M true

     var array = document.getElementsByClassName('btn');

     obj.onmouseover = function (event) {

          event.target.style.color = 'red';

     obj.onmouseout = function () {

 

鍵盤事件：

     onkeypress: 當鍵盤上的某個鍵被按下並釋放時觸發事件 

          貪吃蛇：沒反應

     onkeydown: 當鍵盤上某個按鍵被按下時觸發的事件，cl會一在直打印

     onkeyup: 當鍵盤上某個按鍵被放開時觸發的事件，按鍵鬆開時，cl打印

          貪吃蛇用此事件

     注意：頁面內必須有被聚焦的對象

     event.keyCode 返回鍵盤碼

     document.onkeypress = function(){

 

鍵盤控制運動

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

    document.onkeyup = function (event) {

        var code = event.keyCode;

        if (code == 38) {

            //往左走

            div.style.top = (div.offsetTop-100)<0?0:div.offsetTop-100 +'px';

        } else if (code == 40) {

            div.style.top = div.offsetTop+100 +'px';

        } else if (code == 37) {

            div.style.left = (div.offsetLeft-100)<0?0:div.offsetLeft-100 +'px';

        } else if (code == 39) {

            div.style.left = div.offsetLeft+100 +'px';

        }

    };

 

document.onmousemove=function(e){
    mov.style.left= e.pageX+'px';
}

全局鼠標移動，放大鏡跟着移動

---

 

Event對象

     1.跟特定事件相關，且包含該事件的屬性和方法的對象

     2.能夠傳遞給事件處理程序

     3.經過傳入的參數，在函數內部能夠訪問到全部的方法和屬性

     兼容性：IE8 以及如下不傳入event對象

             用window.event 作兼容

     btn.onclick = function(event){

          event=event || window.event  //使用‘或’進行兼容

       

Event對象：事件方法

     1.stopPropagation: 阻止冒泡，就是在子元素上觸發事件，不會觸發父元素的事件

          兼容性：IE8及如下，用cancelBubble代替stopPropagation

          用法：event.cancelBubble = true;

     2.preventDefault: 阻止瀏覽器默認行爲！！！如：a標籤跳轉或者表單提交

          兼容性：IE9及如下，用returnValue屬性爲false來實現

          用法：event.returnValue=false;

     實例封裝

     1.阻止冒泡

     child.onclick = function (event) {

        event = event || window.event;//使用或進行兼容

        if (event.stopPropagation) {

            event.stopPropagation();

        } else {

            event.cancelBubble = true;

     2.阻止默認行爲

     a.onclick = function (event) {

        event = event || window.event;

        if (event.preventDefault) {

            event.preventDefault();

        } else {

            event.returnValue = false;

 

Event對象屬性：4塊

     1.type: 返回事件類型，如click

     2.target: 返回事件觸發的目標元素

          兼容性：IE8及如下用 srcElement

     btn.onclick  = function (e) {

        e = e || window.event;//取IE的event對象

        var ele = e.target || e.srcElement;//取出元素,兼容IE8 srcElement

        console.log(e.type); //click

        console.log(ele); //<button id="btn">事件屬性</button>

 

   3.鼠標事件屬性

     screenX: 當前鼠標點距離屏幕左上角的水平距離

     screenY: 當前鼠標點距離屏幕左上角的垂直距離

     clientX: 當前鼠標點距離瀏覽器左上角的水平距離

     clientY: 當前鼠標點距離瀏覽器左上角的垂直距離

     pageX: 當前鼠標點距離頁面(document/body)左上角的水平距離

     pageY: 當前鼠標點距離頁面(document/body)左上角的垂直距離

     button: 獲取鼠標 點擊那個鍵 ;非IE瀏覽器中0爲鼠標左鍵，1爲鼠標中鍵，2爲鼠標右鍵

     which: 返回Unicode碼

 

     4> 鍵盤事件屬性:

        keycode : 返回鍵盤碼

        ctrlKey: 是否按下ctrl鍵,若是按了,返回true,不然返回false

        shiftKey: 是否按下shift鍵,若是按了,返回true,不然返回false

        altKey: 是否按下alt鍵,若是按了,返回true,不然返回false

 

文檔事件

     onload: 當頁面加載完成後，觸發！！在整個頁面加載完後觸發

     onresize: 當瀏覽器窗口大小被改變時，觸發！

     onscroll: 當頁面滾動的時候觸發

     onbeforeunload: 當頁面關閉或者刷新的時候觸發

          須要配合return來使用。用event.returnValue="提示信息"解決兼容性

          老的瀏覽器會把return以後的值返回，可是部分新瀏覽器只能使用默認的提示框

        window.onscroll = function () {

            console.log('文檔滾動了!!!');

      

        window.onbeforeunload = function (event) {

            event.returnValue = '你要離我而去嗎?!';

 

返回頂部

      document.body.scrollTop能夠獲取頁面滾動的高度，同時能夠賦值，更改滾動的高度       

 

表單事件:

     onfocus：當某個元素得到焦點時觸發的事件

     onblur：當前元素失去焦點時觸發的事件

     onchange：當前元素失去焦點而且元素的內容發生改變而觸發的事件

     onreset：當表單中reset的屬性被激發時觸發的事件

     onsubmit：一個表單被提交時觸發的事件

     咱們能夠的經過form表單的name屬性,獲取整個表單!!!，action="#"提交到本地，submit纔有效果

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

事件（event)是javascript應用跳動的心臟，進行交互，使網頁動起來

      事件多是用戶在某些內容上的點擊，鼠標通過某個特定元素或按下鍵盤上的某些按鍵

      事件還多是web網頁加載完成，用戶滑動窗口，改變窗口大小   

      經過js能夠監聽特定事件的發生，並規定讓某些事件發生，以對這些事件做出響應

 

     對用戶行爲或者頁面自身行爲的一種監聽

     當某種行爲觸發以後，會調用指定的函數執行

     事件通常要配合函數使用！！經過事件驅動函數的執行

 

做用：

     1.驗證用戶輸入的數據

     2.增長頁面的動感效果

     元素與元素之間的交互，用戶與頁面之間的交互，前段與後端的交互

   

事件流：

     分兩個階段：捕獲階段和冒泡階段（IE)提出

     捕獲：先由不具體的元素接收事件，最具體的節點最後才能接收到事件

     冒泡：先從具體的接收元素，而後逐步向上傳播不具體的元素 

 

事件名稱：click 點擊 ， mousemove 鼠標移動 ， load 加載

          onload 加載事件   onclick 點擊事件的處理函數

          

事件三種方式\DOM事件級別：3級

     1.行內事件\HTML事件：就是將事件處理函數做爲html的屬性來使用；耦合度高  

       不屬於DOM事件級中的任意一種       

        1）<input type="button" value="按鈕" onclick="alert(js行內事件');"/>    

        2）<input type="button" value="按鈕" onclick="showMsg();"/>

           js-->function showMsg () {

                    alert('js行內事件2');

                }

            若是方法名改變，那麼就改兩處，方法名和引用位置都要改,不方便!!!

 

       2.DOM0級事件處理--解耦

            步驟：

                (1)先獲取須要綁定事件的元素對象

                (2)給該元素對象綁定事件

        缺點：DOM0級事件，不能給同一個元素對象綁定同類型的事件，

              由於後面的事件 覆蓋前面的事件處理函數

        取消事件：onclick=null ;把時間置爲空

         <input type="button" value="按鈕" id="btn"/>

         js-->var inputs = document.getElementById("btn");

               inputs.onclick = function () { \\也可使用鏈式操做

                    //func回調函數，也叫監聽函數

                   alert("你好");

               }

 

     3.DOM2事件：才分捕獲和冒泡，D0沒有

          獲取元素，綁定事件 addEventListener   listen聽 listener監聽

          傳入三個參數： addEventListener(事件名稱，事件處理方法，是否冒泡）

          用DOM2級事件，不須要加on 如onclick——>click

          能夠綁定多個事件，之間不會覆蓋

          缺點：兼容問題（跟IE有關！！)

          取消事件：removeEventlistener( '事件名稱字符串'，事件處理方法，是否冒泡）

 

     4.DOM3級事件

       DOM3級事件在DOM2級事件的基礎上添加了更多的事件類型，所有類型以下：

       UI事件，當用戶與頁面上的元素交互時觸發，如：load、scroll

       焦點事件，當元素得到或失去焦點時觸發，如：blur、focus

       鼠標事件，當用戶經過鼠標在頁面執行操做時觸發如：dblclick、mouseup

       滾輪事件，當使用鼠標滾輪或相似設備時觸發，如：mousewheel

       文本事件，當在文檔中輸入文本時觸發，如：textInput

       鍵盤事件，當用戶經過鍵盤在頁面上執行操做時觸發，如：keydown、keypress

 

IE兼容DOM2

     1.IE8以及如下不支持 addEventListener,removeEventListener

       那麼要使用[ 兩個參數，不須要指定是否冒泡]

       attachEvent(事件名[ 帶on的事件名],處理方法

       detachEvent(事件名[帶on的事件名],處理方法）

     2.在IE9,IE10中同時支持這兩種方式

     3.在IE11 只支持addEventListener,removeEventListener 

 

封裝事件：讓元素對象同時支持現代瀏覽器和IE8以及如下的瀏覽器

     抓住二者不一樣點

     若是window.addEventListener 存在就用他綁定

     若是不存在用attachEvent

 

     /** 文檔註釋

      * @func:  兼容各個瀏覽器的DOM2事件

      * @param:  {obj}  要被綁定事件的對象

      * @param:  {eventType}  事件類型

      * @param:  {fn}  事件處理的方法

     function bindEvent(obj,eventType,fn){   //fn方法名，fn()調用

          if(window.addEventListener){

               obj.addEventListener(eventType,fn,false)

          }else{

               obj.attachEvent('on'+eventType,fn)

          }

 

事件冒泡：

     false:表明在冒泡階段執行

           ('click',fn1,false)

     true:表明在捕獲階段執行

           ('click',fn1,true)

     在函數裏面阻止冒泡

      1.第一步在函數裏面定義一個形參event

      2.調用方法 event.stopPropagation();stop泡

      function fn1(event){

        event.stopPropagation();//阻止冒泡!!!

        alert('我是目標事件!');

      }

 

事件捕獲：由父到子的傳遞過程

 

事件捕獲和事件冒泡：

     捕獲階段

     document.body.addEventListener('click',function(){

          alert('我是body,緊隨document觸發'）;

          document.body.style.background='red';

     },true);

     冒泡階段

     document.body.addEventListener('click',function(){

          alert('----');

          document.body.style.background='';

     },false};

     寫在一塊兒時，最終背景無顏色變化，應註釋冒泡階段代碼

 

計算器：

     1.加法

     sum.onclick=function(){

          var v1=Number(num1.value);  //默認獲得就是字符串類型

          var v2=Number(num2.value);

          result.value=v1+v2;

     }

     2.加減乘除運算

     result.value = eval(num1.value) 把一段字符串解析成js代碼

     3.退格

     num.value=num.value. slice(0,num.value.length-1);

 

鼠標事件

     onclick: 鼠標單擊事件  使用率90%

     ondblclick: 鼠標雙擊事件

     onmousedown: 鼠標上的按鈕被按下時

     onmouseup: 鼠標按下後，鬆開時激發的事件

 

     d.onmousedown = function () {

        console.log('鼠標被按下!!');

     };

     onmouseover: 當鼠標 移動\入到某對象範圍的上方時觸發的事件 over超過，上方

     onmousemove: 鼠標移動時觸發的事件

     onmouseout: 當鼠標移出\離開某對象範圍時觸發的事件

 

把大問題分紅小問題，去解決

鼠標控制鍵盤hover特效：

   event.target  指向當前的事件元素 event.target==M true

     var array = document.getElementsByClassName('btn');

     obj.onmouseover = function (event) {

          event.target.style.color = 'red';

     obj.onmouseout = function () {

 

鍵盤事件：

     onkeypress: 當鍵盤上的某個鍵被按下並釋放時觸發事件 

          貪吃蛇：沒反應

     onkeydown: 當鍵盤上某個按鍵被 按下時觸發的事件，cl會一在直打印

     onkeyup: 當鍵盤上某個按鍵被放開時觸發的事件，按鍵鬆開時，cl打印

          貪吃蛇用此事件

     注意：頁面內必須有被聚焦的對象

      event.keyCode 返回鍵盤碼

     document.onkeypress = function(){

 

鍵盤控制運動

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

    document.onkeyup = function (event) {

        var code = event.keyCode;

        if (code == 38) {

            //往左走

            div.style.top = (div.offsetTop-100)<0?0:div.offsetTop-100 +'px';

        } else if (code == 40) {

            div.style.top = div.offsetTop+100 +'px';

        } else if (code == 37) {

            div.style.left = (div.offsetLeft-100)<0?0:div.offsetLeft-100 +'px';

        } else if (code == 39) {

            div.style.left = div.offsetLeft+100 +'px';

        }

    };

 

document . onmousemove = function ( e ){
    mov . style . left =  e . pageX + 'px' ;
}

全局鼠標移動，放大鏡跟着移動

---

 

Event對象

     1.跟特定事件相關，且包含該事件的屬性和方法的對象

     2.能夠傳遞給事件處理程序

     3.經過傳入的參數，在函數內部能夠訪問到全部的方法和屬性

     兼容性：IE8 以及如下不傳入event對象

             用window.event 作兼容

     btn.onclick = function(event){

          event=event || window.event  //使用‘或’進行兼容

       

Event對象：事件方法

     1.stopPropagation: 阻止冒泡，就是在子元素上觸發事件，不會觸發父元素的事件

          兼容性：IE8及如下，用cancelBubble代替stopPropagation

          用法：event.cancelBubble = true;

     2.preventDefault: 阻止瀏覽器默認行爲！！！如：a標籤跳轉或者表單提交

          兼容性：IE9及如下，用returnValue屬性爲false來實現

          用法：event.returnValue=false;

     實例封裝

     1.阻止冒泡

     child.onclick = function (event) {

        event = event || window.event;//使用或進行兼容

        if (event.stopPropagation) {

            event.stopPropagation();

        } else {

            event.cancelBubble = true;

     2.阻止默認行爲

     a.onclick = function (event) {

        event = event || window.event;

        if (event.preventDefault) {

            event.preventDefault();

        } else {

            event.returnValue = false;

 

Event對象屬性：4塊

     1.type: 返回事件類型，如click

     2.target: 返回事件觸發的目標元素

          兼容性：IE8及如下用 srcElement

     btn.onclick  = function (e) {

        e = e || window.event;//取IE的event對象

        var ele = e.target || e.srcElement;//取出元素,兼容IE8 srcElement

        console.log(e.type); //click

        console.log(ele); //<button id="btn">事件屬性</button>

 

   3.鼠標事件屬性

     screenX: 當前鼠標點距離屏幕左上角的水平距離

     screenY: 當前鼠標點距離屏幕左上角的垂直距離

     clientX: 當前鼠標點距離瀏覽器左上角的水平距離

     clientY: 當前鼠標點距離瀏覽器左上角的垂直距離

     pageX: 當前鼠標點距離頁面(document/body)左上角的水平距離

     pageY: 當前鼠標點距離頁面(document/body)左上角的垂直距離

     button: 獲取鼠標 點擊那個鍵 ;非IE瀏覽器中0爲鼠標左鍵，1爲鼠標中鍵，2爲鼠標右鍵

     which: 返回Unicode碼

 

     4> 鍵盤事件屬性:

        keycode : 返回鍵盤碼

        ctrlKey: 是否按下ctrl鍵,若是按了,返回true,不然返回false

        shiftKey: 是否按下shift鍵,若是按了,返回true,不然返回false

        altKey: 是否按下alt鍵,若是按了,返回true,不然返回false

 

文檔事件

     onload: 當頁面加載完成後，觸發！！在整個頁面加載完後觸發

     onresize: 當瀏覽器窗口大小被改變時，觸發！

     onscroll: 當頁面滾動的時候觸發

     onbeforeunload: 當頁面關閉或者刷新的時候觸發

          須要配合return來使用。用event.returnValue="提示信息"解決兼容性

          老的瀏覽器會把return以後的值返回，可是部分新瀏覽器只能使用默認的提示框

        window.onscroll = function () {

            console.log('文檔滾動了!!!');

      

        window.onbeforeunload = function (event) {

            event.returnValue = '你要離我而去嗎?!';

 

返回頂部

      document.body.scrollTop能夠獲取頁面滾動的高度，同時能夠賦值，更改滾動的高度       

 

表單事件:

     onfocus：當某個元素得到焦點時觸發的事件

     onblur：當前元素失去焦點時觸發的事件

     onchange：當前元素失去焦點而且元素的內容發生改變而觸發的事件

     onreset：當表單中reset的屬性被激發時觸發的事件

     onsubmit：一個表單被提交時觸發的事件

     咱們能夠的經過form表單的name屬性,獲取整個表單!!!， action="#"提交到本地，submit纔有效果