DOM事件知識點

這篇文章主要是總結(jié)一些DOM事件的基礎(chǔ)知識點。

DOM事件的級別

dom事件級別.png

DOM3是鼠標 鍵盤這些事件

DOM事件模型

捕獲和冒泡
捕獲是從上到下 冒泡是從下到上

DOM事件流

分三個階段
點擊鼠標 -> 捕獲 -> 目標階段 目標對象 -> 冒泡

描述事件捕獲的具體流程

window -> document ->html標簽 ->body-> ...->目標元素

Event對象的常見應用

event.preverntDefault() 阻止默認行為
event.stopPropagation() 阻止冒泡事
event.stoplmmediatePropagation()
event.currentTarget 當前綁定的事件的對象
event.target 觸發(fā)事件的目標對象

自定義事件

var eve = new Event('custome');
            var ev = document.getElementById('div');
            ev.addEventListener('custome',function(){
                console.log('custome')
            })

            ev.dispatchEvent(eve)

一些測試代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        #ev {
            width: 300px;
            height: 100px;
            background: red;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }
    </style>
    <title>DOM事件代碼示例</title>
</head>

<body>
    <div id="ev">
        目標元素
    </div>
    <script>
        // 捕獲
        var ev = document.getElementById('ev');
        window.addEventListener('click', function () {
            console.log('window captrue')
        }, true) // false為箭頭捕獲  true為監(jiān)聽冒泡

        document.addEventListener('click', function () {
            console.log('document captrue')
        }, true)
        // html節(jié)點
        document.documentElement.addEventListener('click', function () {
            console.log('html captrue')
        }, true)
        document.body.addEventListener('click', function () {
            console.log('body captrue')
        }, true)

        ev.addEventListener('click', function () {
            console.log('ev captrue')
        }, true)

        // 冒泡
        var ev = document.getElementById('ev');
        window.addEventListener('click', function () {
            console.log('window bubbling')
        }, false) // false為箭頭捕獲  true為監(jiān)聽冒泡

        document.addEventListener('click', function () {
            console.log('document bubbling')
        }, false)
        // html節(jié)點
        document.documentElement.addEventListener('click', function () {
            console.log('html bubbling')
        }, false)
        document.body.addEventListener('click', function () {
            console.log('body bubbling')
        }, false)

        ev.addEventListener('click', function () {
            console.log('ev bubbling')
        }, false)


        // 自定義事件
        var eve = new Event('test');
        ev.addEventListener('test', function () {
            console.log('test dispatch')
        })
        // 觸發(fā)自定義事件
        ev.dispatchEvent(eve);

        var eve1 = new CustomEvent('test1', {
            detail: {
                username: "davidwalsh"
            },
            bubbles: true,
            cancelable: false
        })

        ev.addEventListener('test1',function(e){
            console.log(e);
        })

       ev.dispatchEvent(eve1)
    </script>
</body>

</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 1、DOM事件 文檔對象模型是一種與編程語言及平臺無關(guān)的API(Application programming I...
    8d2855a6c5d0閱讀 218評論 0 0
  • JavaScript 程序采用了異步事件驅(qū)動編程模型。在這種程序設(shè)計風格下,當文檔、瀏覽器、元素或與之相關(guān)的對象發(fā)...
    劼哥stone閱讀 1,274評論 3 11
  • 聲明:本文來源于http://www.webzsky.com/?p=731我只是在這里作為自己的學習筆記整理一下(...
    angryyan閱讀 7,101評論 1 6
  • 事件是一種異步編程的實現(xiàn)方式,本質(zhì)上是程序各個組成部分之間的通信。DOM支持大量的事件,本節(jié)介紹DOM的事件編程。...
    周花花啊閱讀 597評論 0 3
  • 梅花對寒冷的感覺叫做陶醉 柳樹對春風的感覺叫做品味 有一種方式可以把痛苦變做甜美 有一種路徑可以讓怨恨隱退 是海,...
    若水清溪閱讀 144評論 0 3