JavaScript DOM-事件操作

阿新 • • 發佈：2020-08-11

事件

註冊事件

給元素新增事件，為註冊事件或者繫結事件

註冊事件兩種方式

傳統方式
監聽事件方式

事件監聽

addEventListener() 事件監聽 (IE9以上)

eventTarget.addEventListener(type, listener, [useCapture])

引數type：事件型別字串，不要on 如click，mouseover
引數listener：事件處理函式，觸發的時候要做的事情
引數useCapture：可選，是一個布林值，預設false

attacheEvent() 事件監聽 (IE678支援)

evetagrget.attachEvent(eventNameWithOn, callback)

引數eventNameWithOn：事件型別字串，不要on 如click，mouseover
引數callback：事件處理函式，觸發的時候要做的事情

<body>
    <button>傳統註冊事件</button>
    <button>addEventListener  ie9以上</button>
    <button>attachEvent  ie678</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 傳統註冊事件 

        btns[0].onclick = function () {
            alert('傳統方式')
        };
        // addEventListener 新增多個不覆蓋
        btns[1].addEventListener('click', function () {
            alert('ddEventListener  ie9以上')
        });
        btns[1].addEventListener('click', function () {
            alert('ddEventListener  ie9以上---2')
        });

        //attachEvent 

        btns[2].attachEvent('click', function () {
            alert('attachEvent')
        })
    </script>
</body>

示例程式碼

刪除事件

傳統方式

btns.onclick = null

方式刪除監聽事件

eventTarget.removeEventListener(type, listener, [useCapture])

引數type：事件型別字串，不要on 如click，mouseover
引數listener：事件處理函式，觸發的時候要做的事情
引數useCapture：可選，是一個布林值，預設false

<body>
    <button>addEventListener  ie9以上</button>
    <button>attachEvent  ie678</button>
    <script>
        var btns = document.querySelectorAll('button');
        // addEventListener 新增多個不覆蓋
        btns[0].addEventListener('click', fn);
        function fn() {
            alert(222);
            this.removeEventListener('click', fn)
        }

        //attachEvent
        btns[1].attachEvent('click', fn1);
        function fn1() {
            alert(111);
            this.detachEvent('click', fn1)
        }

    </script>
</body>

示例程式碼

事件冒泡

onblur，onfocus，onmouseenter，onmouseleave 沒有冒泡

dom 事件流，在js程式碼中

只能執行捕獲或者冒泡其中的一個階段；
onclick 和 attachEvent（ie）只能得到冒泡階段；
如果addEventListener 第三個引數是 true 那麼則處於捕獲階段 document -> html -> body -> father -> son；
如果addEventListener 第三個引數是 false 或者省略那麼則處於冒泡階段 son -> father ->body -> html –> document

<div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>

        var son = document.querySelector('.son');
        // 給son 註冊點選事件
        son.addEventListener('click', function () {
            alert('son');
        }, true); // true--> 捕獲階段，flase---> 冒泡階段


        // 給father註冊單擊事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        }, true);

        // 給document 註冊單擊事件
        document.addEventListener('click', function () {
            alert('document');
        }, true)

    </script>

事件捕獲程式碼

<div class="father">
    <div class="son">son盒子</div>
</div>
<script>

    var son = document.querySelector('.son');
    // 給son 註冊點選事件
    son.addEventListener('click', function () {
        alert('son');
    }, false); // true--> 捕獲階段，flase---> 冒泡階段


    // 給father註冊單擊事件
    var father = document.querySelector('.father');
    father.addEventListener('click', function () {
        alert('father');
    }, false);

    // 給document 註冊單擊事件
    document.addEventListener('click', function () {
        alert('document');
    })

</script>

事件冒泡程式碼

事件物件

事件觸發發生時會產生事件物件，並且系統會以實參形式傳給事件處理函式

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function (event) {
            // event 就是事件物件， 形參
            event = event || window.event; // 相容性問題
                console.log(event);
        }

    </script>
</body>

示例程式碼

事件物件屬性和方法:

e.target和this區別

<body>
    <div>123</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click', function (e) {
            console.log(e.target); // 一致
            console.log(this);  // 一致
        });

        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            console.log(e.target);   // 誰觸發的就說誰， 這裡是li
            console.log(this);  // 我們給ul 綁定了事件  那麼this 就指向ul
        })
    </script>
</body>

示例程式碼

阻止預設行為

html的一種預設行為

<body>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        var a = document.querySelector('a');
        a.addEventListener('click', function (e) {
            e.preventDefault()  // dom 標準行為，組織預設提交行為
        });

        // 傳統方式阻止預設行為
        a.onclick = function (e) {
            e.preventDefault();
            return false  // 我們可以利用return false 也能阻止預設行為 沒有相容性問題
        };


        var from = document.querySelector('form');
        from.addEventListener('click', function (e) {
            e.preventDefault()
        })
    </script>

</body>

示例程式碼

阻止事件冒泡

e.stopPropagation()

<body>
    <div class="father">
        <div class="son">son兒子</div>
    </div>

    <script>
        var son = document.querySelector('.son');
        var father = document.querySelector('.father');

        son.addEventListener('click', function (e) {
            alert('son');
            e.stopPropagation();  // 阻止事件冒泡
        },false);

        father.addEventListener('click', function (e) {
            alert('father');
        }, false);

        document.addEventListener('click', function (e) {
            alert('document')
        })

    </script>

</body>

示例程式碼

事件委託

給父元素註冊事件，利用事件冒泡，當子元素的事件觸發，會冒泡到父元素，然後去控制相應的子元素。

<body>
    <ul>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
    </ul>
    <script>
       var ul = document.querySelector('ul');
       ul.addEventListener('click', function (e) {
           e.target.style.backgroundColor = 'red';  // 事件委託
       })
    </script>
</body>

示例程式碼

常用滑鼠事件

滑鼠事件物件

<script>
        document.addEventListener('click', function (e) {
            // 1. client 滑鼠在可視區的x和y座標
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 滑鼠在頁面文件的x和y座標
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 滑鼠在電腦螢幕的x和y座標
            console.log(e.screenX);
            console.log(e.screenY);
        })

    </script>

示例程式碼