【JavaScript】DOM之事件

時間 2019-12-07

原文原文鏈接

DOMhtml

事件

1.事件是什麼

讓JS知道程序用戶行爲，好比用戶點擊HTML頁面中的某個按鈕和用戶輸入用戶名與密碼等操做node

<script>
        var button = document.getElementById('btn');
//        獲取按鈕元素
        button.onclick = function () {
//        事件綁定
            console.log('你已點了我');
        }
    </script>

2.註冊事件
JS函數與指定事件相關聯，被綁定函數成爲事件的句柄
事件被激發時，會綁定函數會被調用瀏覽器

HTML元素的事件屬性

表示實註冊事件功能
該方式並無與HTML結構與行爲有效的分離安全

<body>
<button onclick="mylove()" id="btn">按鈕</button>
<script>
    function mylove() {
        console.log('你已點了我');
    }
</script>
</body>

DOM對象的事件屬性

將Document對象定位在THML頁面元素
並返回DOM對象體屬性，經過它實現各類註冊事件功能網絡

<body>
<button id="btn">按鈕</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = mylove;
    function mylove() {
        console.log('你已點了我');
    }
</script>
</body>

事件監聽器

以addEvantLisener()方法，調用該方法表示元素增長事件監聽器函數

body>
<button id="btn">按鈕</button>
<script>
    var btn = document.getElementById('btn');
    btn.attachEvent('onclick',function () {
        console.log('XXX');
    })
    function bind(element,eventName, functionName) {
        if (element.addEventListener) {
            element.addEventListener()
        }
    }
</script>

</body>

事件監聽器中的this

使用addEventListener()方法爲頁面註冊事件時候，this是指註冊事件元素
使用attachEent()方法爲頁面註冊事件時候，this是指Window對象，，不是註冊事件this

<script>
    var qyc =document.getElementById('qyc');
    /*qyc.addEventListener('click',function () {
        console.log(this);//this指當前綁定事件的元素
    });*/
    /*qyc.attachEvent('onclick',function () {
        console.log(this);//this指當前環境的全局對象（Window對象）
    });*/
    bind(qyc,'click',function () {
        console.log(this);//在不一樣的瀏覽器中，this會有不一樣的表示
    });
    function bind(element, eventName, functionName) {
        if (element.addEventListener) {
        } else {
            element.attachEvent('on' + eventName, function () {
                functionName.call(element)

            });
        }
    }//此爲IE8以前的版本兼容的解決方案
</script>
</body>

3.移除註冊事件

removeEventListener()方法，調用此方法表示元素移除事件聽器code

<body>
<button id="qyc">按鈕</button>
<script>
    var qyc = document.getElementById('qyc');
    function mylove() {
        console.log('XXX');
    }
    qyc.addEventListener('click',mylove);
    qyc.addEventListener('click',function () {
        console.log('YYY');
    });
    qyc.removeEventListener('click',mylove);
    function unbind(element,eventName,functionName) {
        if (element.removeEventListener) {
            element.removeEventListener(eventName, functionName);
        }else {
            element.detachEvent('on' + eventName, functionName);
        }
    }
</script>
</body>

4.Event事件對象

表示移除註冊事件在IE8以前版本的
瀏覽器不支持removeEventListener()方法htm

<body>
<button id="qyc" onclick="mylove(event)">按鈕</button>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function (event) {
        console.log(event);
    });
    qyc.attachEvent('onclick',function () {
        console.log(window.event);
    });

    function bind(element,eventName, functipnName) {
        if (element.addEventListener){
            element.addEventListener(eventName,functipnName)
        } else {
          element.attachEvent('on' + eventName, function(){
             functipnName.call(element);
          });
        }
    }
</script>

5.獲取目標

Event事件對象提供target屬性，獲取觸發當前事件的HTML元素
Event事件對象提供currentTarget屬性，獲取註冊當前事件的HTML元素對象

<style>
        ul {
           background-color: red;
        }
        #wl {
           background-color: blue;
        }
        a {
           background-color: yellow;
        }
    </style>
</head>
<body>
<ul id="yx">
    <li>單機遊戲</li>
    <li id="wl"><a href="#">網絡遊戲</a></li>
    <li>手機遊戲</li>
</ul>
<script>
    var yx = document.getElementById('yx');
    yx.addEventListener('click',function (event) {
        console.log(event.target);
//        target屬性-獲取綁定當前事件目標元素
        console.log(event.currentTarget);
//        currentTarget屬性-獲取綁定當前事件目標元素
        console.log(this);
    });
    yx.attachEvent('onclick',function (event) {
//    IE8如下瀏覽器提供srcElement屬性爲target目標元素
        var e = event || window.event;
        console.log(e.srcElement);
    });
</script>
</body>

6.阻止默認行爲

不使用默認，而是

<body>
<a href="#">連接</a>
<script>
    var aElement = document.getElementsByName('a');
    /*aElement.addEventListener('click',function(event){
        event.preventDefault();// 阻止默認行爲
    });*/
    
    aElement.onclick = function (event) {
        event.preventDefault();
        return false;

    }
    aElement.attachEvent('onclick',function (event) {
        var e = event || window.event;
        e.returnValue = false;
    })
</script>
</body>

7.獲取鼠標

pageX和pageY表示相對於頁面中
clientX和clientY表示可視區域
screenX和screenY表示在當前屏幕的

<body>
<script>
    var html = document.documentElement;
    html.addEventListener('click',function(event){
        console.log(event.pageX, event.pageY);
        // 鼠標座標值相對於當前HTML頁面
        console.log(event.clientX, event.clientY);
        // 鼠標座標值相對於當前可視區域
        console.log(event.screenX, event.screenY);
        // 鼠標座標值相對於當前屏幕的

        // 鼠標座標值只能獲取，不能設置
    });

</script>
</body>

8.事件流

<style>
        #q1 {
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
        }
        #q2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            padding: 50px;
        }
        #q3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="q1">
    <div id="q2">
        <div id="q3"></div>
    </div>
</div>
<script>
    var q1 = document.getElementById('q1');
    q1.addEventListener('click',function(){
        console.log('這是d1... ...');
    }, false);
    var q2 = document.getElementById('q2');
    q2.addEventListener('click',function(){
        console.log('這是d2... ...');
    }, false);
    var q3 = document.getElementById('q3');
    q3.addEventListener('click',function(event){
        console.log('這是q3... ...');
        event.stopPropagation();
    }, false);
</script>
</body>

9.事件委託

大量的HTML元素註冊相同事件，並事件句柄邏輯安全相同，會形成頁面速度降低，不果事件流容許這些HTML元素同父級元素註冊事件

<body>
<div id="qh">
    <button id="qyc1">按鈕</button>
    <button id="qyc2">按鈕</button>
    <button id="qyc3">按鈕</button>
</div>
<script>
    var qyc1 = document.getElementById('qyc1');
    qyc1.addEventListener('click',function(){
        console.log('這是個按鈕');
    });
    var qyc2 = document.getElementById('qyc2');
    qyc2.addEventListener('click',function(){
        console.log('這是個按鈕');
    });
    var qyc3 = document.getElementById('qyc3');
    qyc3.addEventListener('click',function(){
        console.log('這是個按鈕');
    });
    var qh = document.getElementById('qh');
//    不把事件綁定給指定元素，綁定給共同父級和祖先元素
    qh.addEventListener('click',function (event) {
        var target = event.target;//觸發事件目標元素
        if(targe.nodeName === 'BUTTON') {
           console.log('這是個按鈕');
        }
    })
</script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。