javascript中DOM的事件分析（附程式碼）-js教程-PHP中文網

首頁

web前端

js教程

javascript中DOM的事件分析（附程式碼）

不言

Sep 04, 2018 am 10:20 AM

html javascript

事件是什麼？事件有什麼用？這篇文章將給大家分享關於javascript中DOM的事件分析，並為大家介紹了關於事件的概念以及事件的用法。

事件

1、事件是什麼

讓JS知道程式使用者行為，例如使用者點擊HTML頁面中的某個按鈕和使用者輸入使用者名稱與密碼等操作

 <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對象，，不是註冊事件

<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()方法，呼叫此方法表示元素移除事件聽器

<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()方法

<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>

登入後複製