js中（event）事件對象

時間 2020-03-13

標籤 event 事件對象欄目 JavaScript 简体版

原文原文鏈接

事件對象

• 什麼是事件對象？html

• 就是當你觸發了一個事件之後，對該事件的一些描述信息瀏覽器

• 例如：函數

° 你觸發一個點擊事件的時候，你點在哪一個位置了，座標是多少性能

° 你觸發一個鍵盤事件的時候，你按的是哪一個按鈕this

• 每個事件都會有一個對應的對象來描述這些信息，咱們就把這個對象叫作事件對象spa

• 瀏覽器給了咱們一個黑盒子，叫作 window.event ，就是對事件信息的全部描述code

• 這個玩意很好用，可是通常來講，好用的東西就會有兼容性問題，在 IE低版本里面這個東西好用，可是在高版本IE 和 Chrome 裏面很差使了htm

• 咱們就得用另外一種方式來獲取事件對象，在每個事件處理函數的行參位置，默認第一個就是事件對象對象

    var box = document.querySelector('.box')
    console.log(box)
    box.onclick = function fn1(e){
        //window.event.X軸座標點信息 根據頁面來顯示的
        console.log(e.x)
    }

• 綜上所述，咱們之後在每個事件裏面，想獲取事件對象的時候，都用兼容寫法blog

box.onclick = function (e) {
    //兼容寫法
    e = e || window.event
}

offsetX 和 offsetY

• 是相對於你點擊的元素的邊框內側開始計算有邊框的話會出現負值

    var box = document.querySelector('.box')
    box.onclick = function (e) {
        //兼容寫法
        console.log(e.offsetX)

    }

clientX 和 clientY

• 是相對於瀏覽器窗口來計算的，從瀏覽器可視區域左上角開始,便是以瀏覽器滑動條此刻的滑動到的位置爲參考點,隨滑動條移動而變化

    var box = document.querySelector('.box')
    box.onclick = function (e) {
        //根據你瀏覽器的窗口來計算的，Y軸不包含導航地址欄和標籤欄這些
        console.log(e.clientY)

    }

•很少說上圖此時Y軸的值會隨着我滾動而發生改變

pageX 和 pageY

•是相對於整個頁面的座標點，無論有沒有滾動，都是相對於頁面拿到的座標點從頁面左上角開始,便是以頁面爲參考點,不隨滑動條移動而變化

    var box = document.querySelector('.box')
    box.onclick = function (e) {
        //根據你瀏覽器的窗口來計算的，Y軸不包含導航地址欄和標籤欄這些
        console.log(e.pageY)
        console.log(e.pageX)
    }

上圖

常見的事件

• 大體分爲幾類，瀏覽器事件 / 鼠標事件 / 鍵盤事件 / 表單事件 / 觸摸事件

事件監聽

• addEventListener : 非 IE 7 8 下使用

• 語法：元素.addEventListener('事件類型'，事件處理函數，冒泡仍是捕獲)

    var box = document.querySelector('.box')
    box.addEventListener('click', function () {
        console.log('我是第一個事件')
    },false)
    box.addEventListener('click', function () {
        console.log('我是第二個事件')
    },false)

° 當你點擊 div 的時候，兩個函數都會執行，而且會按照你註冊的順序執行

° 先打印我是第一個事件再打印我是第二個事件

° 注意：事件類型的時候不要寫 on，點擊事件就是 click，不是 onclick

• attachEvent ：IE 7 8 下使用

• 語法：元素.attachEvent('事件類型'，事件處理函數)

    box.attachEvent('onclick', function () {
        console.log('我是第二個事件')
    })
    box.attachEvent('onclick', function () {
        console.log('我是第二個事件')
    })

° 當你點擊 div 的時候，兩個函數都會執行，而且會按照你註冊的倒序執行

° 先打印我是第二個事件再打印我是第一個事件

° 注意：這個須要些on方法

事件的傳播

• 事件傳播也稱爲事件流，指的是事件的流向，事件的執行順序。好比在一個大盒子裏有一個小盒子，都給他們綁定點擊事件。點擊小盒子大盒子的事件也會被觸發

• 這個就叫事件的傳播

° 當元素觸發一個事件的時候，其父元素也會觸發相同的事件，父元素的父元素也會觸發相同的事件

° 也就是說，頁面上任何一個元素觸發事件，都會一層一層最終致使 window 的相同事件觸發，前提是各層級元素得有註冊相同的事件，否則不會觸發

• 在事件傳播的過程當中，有一些注意的點：

　　1. 只會傳播同類事件

　　2.只會從點擊元素開始按照 html 的結構逐層向上元素的事件會被觸發

　　3.內部元素無論有沒有該事件，只要上層元素有該事件，那麼上層元素的事件就會被觸發

冒泡和捕獲

• 冒泡

　　° 就是從事件目標的事件處理函數開始，依次向外，直到 window 的事件處理函數觸發

　　° 也就是從下向上的執行事件處理函數

• 捕獲

　　° 就是從 window 的事件處理函數開始，依次向內，只要事件目標的事件處理函數執行

　　° 也就是從上向下的執行事件處理函數

阻止事件傳播

• 若是想只觸發當前點擊對象的事件，不想讓外層的事件觸發，可使用不冒泡e.cancelBubble=true或不傳播 e.stopPropagation()

    var box = document.querySelector('.box')
    var atr = document.querySelector('.atr')
    box.onclick = function (e) {
        e.stopPropagation() // 不傳播
        console.log('我被點擊了box')
    }
    atr.onclick = function (e) {
        e.cancelBubble=true //不冒泡
        console.log('我被點擊了atr')
    }

事件委託

• 就是把我要作的事情委託給別人來作

• 由於咱們的冒泡機制，點擊子元素的時候，也會同步觸發父元素的相同事件，因此咱們就能夠把子元素的事件委託給父元素來作

• 點擊子元素的時候，無論子元素有沒有點擊事件，只要父元素有點擊事件，那麼就能夠觸發父元素的點擊事件

    var box = document.querySelector('.box')
    var atr = document.querySelector('.atr')
    
    atr.onclick = function (e) {
        console.log('我被點擊了atr')
    }

target

• target 這個屬性是事件對象裏面的屬性，表示你點擊的目標

• 當你觸發點擊事件的時候，你點擊在哪一個元素上，target 就是哪一個元素

• 這個 target 也不兼容，在 IE 下要使用 srcElement

    var box = document.querySelector('.box')
    var atr = document.querySelector('.atr')
    
    atr.onclick = function (e) {
        var e = e || window.event //event兼容寫法
        var target = e.target || e.srcElement //target兼容寫法
        console.log(target)
    }

委託

• 這個時候，當咱們點擊 box裏面的元素的時候，也能夠觸發 box 的點事件

• 而且在事件內不，咱們也能夠拿到你點擊的究竟是哪一個對象

• 這個時候，咱們就能夠把 li 的事件委託給 box 父級來作

    var box = document.querySelector('.box')
    var atr = document.querySelector('.atr')
    
    atr.onclick = function (e) {
        var e = e || window.event //event兼容寫法
        var target = e.target || e.srcElement //target兼容寫法
        if(target.className=='atr'){
            //這裏面就找到須要操做的元素
            console.log(111)
        }
    }

最後咱們想下，爲啥使用事件委託？

1.提升性能和效率

2. 減小事件註冊，節省內存佔用

3. 將來元素無需再次註冊事件

4.後面添加的元素也會有事件

默認行爲

• 默認行爲，就是不用咱們註冊，它本身就存在的事情

　　° 好比咱們點擊鼠標右鍵的時候，會自動彈出一個菜單

　　° 好比咱們點擊 a 標籤的時候，咱們不須要註冊點擊事件，他本身就會跳轉頁面

• 這些不須要咱們註冊就能實現的事情，咱們叫作默認事件

阻止默認行爲

• 有的時候，咱們不但願瀏覽器執行默認事件

　　º 好比我給 a 標籤綁定了一個點擊事件，我點擊你的時候但願你能告訴我你的地址是什麼，而不是直接跳轉連接

　　º 那麼咱們就要把 a 標籤原先的默認事件阻止，不讓他執行默認事件

• 咱們有兩個方法來阻止默認事件

　　º e.preventDefault() : 非 IE 使用

　　° e.returnValue = false ：IE 使用

• 咱們阻止默認事件的時候也要寫一個兼容的寫法

    var oA = document.querySelector('a')
    a.addEventListener('click', function (e) {
        e = e || window.event
        console.log(this.href)
        //下面這個是兼容寫法
        e.preventDefault ? e.preventDefault() : e.returnValue = false
    })