国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

聊聊DOM中很重要的一個知識點:事件

church / 2399人閱讀

摘要:事件事件就是瀏覽器告知程序,用戶的行為,用戶點擊了頁面中的某個按鈕或者用戶輸入用戶名或密碼等操作可以稱為事件事件的類型事件根據使用的場景不同,可以分為如下幾種依賴于設備的輸入事件鍵盤事件和鼠標事件,這些事件都是直接和設備相關的獨立于設備的輸

事件

事件就是瀏覽器告知JavaScript程序,用戶的行為,用戶點擊了HTML頁面中的某個按鈕或者用戶輸入用戶名或密碼等操作可以稱為事件

事件的類型

事件根據使用的場景不同,可以分為如下幾種:

依賴于設備的輸入事件:鍵盤事件和鼠標事件,這些事件都是直接和設備相關的

獨立于設備的輸入事件:例如click事件等,這些事件并沒有直接與設備相關

用戶界面的相關事件:用戶界面事件較高級的事件,一般多用于表單中的組件

狀態變化的相關事件:這些事件與用戶行為無關,而是網絡或瀏覽器觸發的

特定API事件:這些事件多用于特定場景的實現,例如HTML5中提供的拖放API中的事件等

與錯誤處理的相關事件

注冊事件

注冊事件,就是將JavaScript函數與指定事件相關聯,被綁定的函數成為該事件的句柄,事件被觸發時,綁定的函數會被調用
注冊事件具有以下三種方式實現:

HTML頁面元素提供的事件屬性

DOM標準規范中HTML相關對象提供的事件屬性

通過向HTML頁面中指定元素添加事件監聽器

綁定事件

HTML頁面與JavaScript相結合實現的事件綁定,缺點是沒有實現HTM與JavaScript的分離

HTML代碼:

JavaScript代碼:

var btn=document.getElementById("btn");
function myClick(){
    console.log("this is event");
}

在JavaScript綁定事件

HTML代碼

   

JavaScript代碼

var btn=document.getElementById("btn");
btn.onclick=function(){
    console.log("this is event");
}

用addEventListener(eventName,callback)

參數:
eventName:表示綁定的事件名稱,注意沒有on
callback:表示事件的處理函數(回調函數)
允許為相同元素綁定相同事件多次
html代碼

JavaScript代碼

var btn=document.getElementsByClassName("btn")[0];
btn.addEventListener("click",function(){
    console.log("this is event");
});

關于事件監聽器中的this:
當使用addEventListener()方法為某個HTML頁面元素注冊事件的時候,this就指代注冊事件的元素
當使用attachEvent()方法為某個HTML頁面元素注冊事件的時候,this指代的是window對象,而不是注冊事件的元素
由于addEventListener()方法中的this與attachEvent()方法中的this的含義不同,我們需要將監聽器的瀏覽器兼容方案進行優化

//對于IE 8以下版本的this優化
function bind(elem,event,callback){
    //判斷是否存在 addEventListener
    if(elem.addEventListener){
        elem.addEventListener(event,callback,false);
    }else{
        elem.attachEvent("on"+event,function(){
            //將this的指向修改為注冊事件的元素
            callback.call(elem);
        });
    }
}
移除注冊事件以及事件對象Event的用法

removeEventListener(eventName,functionName)方法
參數:
eventName:表示移除的事件名稱
functionName:表示事件的處理函數
必須是注冊事件的處理函數(同一個函數)

HTML代碼

    

JavaScript代碼

var btn=document.getElementById("d1");
function myClick(){
    console.log("this is event");
}
btn.addEventListener("click",myClick);
//元素.removeEventListener(事件名稱,處理函數);
btn.removeEventListener("click",myClick);

/*IE 8以下版本瀏覽器不支持removeEventListener()方法
detachEvent(eventName,functionName)
eventName:表示移除的事件名稱(必須有on)
functionName:表示事件的處理函數
必須是注冊事件時處理函數(同一個函數)*/
移除注冊事件

事件對象是作為window對象的屬性出現
事件對象:事件的處理函數中接收一個參數
Event事件對象:作為所有事件對象的父級
1.MouseEvent事件對象:表示鼠標事件
2.KeyboardEvent事件對象:表示鍵盤事件
3.TouchEvent事件對象:表示觸摸事件

IE 8以下版本瀏覽器提供的添加事件監聽器方法:事件對象是作為window對象的屬性出現:window.event

html代碼

JavaScript代碼

var btn=document.getElementById("btn");
//第一種方法:元素.addEventListener(事件名,function(事件對象Event){});
btn.addEventListener("click",function(event){
    //獲取目標元素
    var btn=event.target;
    //阻止默認行為
    event.preventDefault();
})

//第二鐘方法:元素名.onclick=function(事件對象Event)
btn.onclick=function(event){
//關于IE 8的阻止默認行為的方法與其他瀏覽器不同
     var e=event || window.event;
     //IE 8以下的阻止默認行為
     e.returnValue=false;
}
獲取鼠標坐標值

以下只能獲取,不能設置

pageX,pageY:鼠標坐標值相對于當前HTML頁面

clientX,clientY:鼠標坐標值相對于當前可視窗口

screenX,screenY:鼠標坐標值相對于當前屏幕的

CSS代碼

//為了測試鼠標坐標值,直接把body的高度設置2000像素
body{height:2000px}

JavaScript代碼

var html=document.documentElement;
html.addEventListener("click",function(event){
    //鼠標坐標值相對于當前HTML頁面
    console.log(event.pageX,event.pageY);
    //鼠標坐標值相對于當前可視區域
    console.log(event.clientX,event.clientY);
    //鼠標坐標值相對于當前屏幕的
    console.log(event.screenX,event.screenY);
});
鼠標事件

click事件:表示鼠標點擊事件(鼠標左鍵)
mousedown事件:表示鼠標按鍵被按下事件
mouseup事件:表示鼠標按鍵被釋放事件
event事件對象提供了button屬性
作用:用于表示鼠標按鍵
值:0 - 表示鼠標左鍵

1 - 表示鼠標滾輪
2 - 表示鼠標右鍵
鍵盤事件

keydown事件:表示鍵盤按鍵被按下
keyup事件:表示鍵盤按鍵被釋放
keypress事件:表示鍵盤按鍵按一下

event事件對象
code:獲取當前按鍵的名稱
key:獲取當前按鍵的名稱
keyCode:獲取當前按鍵對應的Unicode碼

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97343.html

相關文章

  • 深入React識點整理(一)

    摘要:以我自己的理解,函數式編程就是以函數為中心,將大段過程拆成一個個函數,組合嵌套使用。越來越多的跡象表明,函數式編程已經不再是學術界的最愛,開始大踏步地在業界投入實用。也許繼面向對象編程之后,函數式編程會成為下一個編程的主流范式。 使用React也滿一年了,從剛剛會使用到逐漸探究其底層實現,以便學習幾招奇技淫巧從而在自己的代碼中使用,寫出高效的代碼。下面整理一些知識點,算是React看書...

    Gilbertat 評論0 收藏0
  • 前端練級攻略(第二部分)

    摘要:是文檔的一種表示結構。這些任務大部分都是基于它。這個實踐的重點是把你在前端練級攻略第部分中學到的一些東西和結合起來。一旦你進入框架部分,你將更好地理解并使用它們。到目前為止,你一直在使用進行操作。它是在前端系統像今天這樣復雜之前編寫的。 本文是 前端練級攻略 第二部分,第一部分請看下面: 前端練級攻略(第一部分) 在第二部分,我們將重點學習 JavaScript 作為一種獨立的語言,如...

    BWrong 評論0 收藏0
  • 泡杯茶,我們坐下聊聊Javascript事件

    摘要:是怎么執行的一開始先簡單聊了聊基本的數據結構,它和我們現在說的事件環有什么關系么當然有,首先要明確的一點是,代碼的執行全都在棧里,不論是同步代碼還是異步代碼,這個一定要清楚。 棧和隊列 在計算機內存中存取數據,基本的數據結構分為棧和隊列。 棧(Stack)是一種后進先出的數據結構,注意,有時候也管棧叫做堆棧,但是堆又是另一種復雜的數據結構,它和棧完全是兩碼事。棧的特點是操作只在一端進行...

    douzifly 評論0 收藏0
  • vue總結系列--組件化

    摘要:觸發事件可以攜帶數據,這些數據被用于傳遞給綁定了事件的其它組件的回調函數上,進而被傳遞給其它組件。父組件可以在回調函數里做任何事情,頗有靈活性。一般情況下,父組件會在回調函數中更新自己的狀態數據。 上一篇博文梳理了vue的數據驅動和響應式相關的特性,這一篇博文就來梳理vue的一個很重要的特性,組件化。自定義組件之于vue,其意義不亞于函數之于C,java之類的編程語言。函數是計算機科學...

    cuieney 評論0 收藏0

發表評論

0條評論

church

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<