Javascript 事件監聽

時間 2019-11-20

原文原文鏈接

1.addEventListener() 基本用法

語法：node.addEventListener(事件名稱,回調函數,是否使用事件捕獲傳遞)
注意：使用匿名的回調函數後面會沒法移除html

<script>
    var ul = document.querySelector('#ul')
    ul.addEventListener('click',function(){
        console.log('點擊了ul')
    })
</script>

第三個參數：
這個參數用來描述是否使用事件捕獲傳遞，默認爲false
事件傳遞方式就兩種，一種是冒泡（徹底由內到外），另外一種是捕獲（由外到內），即默認爲冒泡傳遞node

實例：3個dom元素都綁定了點擊事件瀏覽器

<ul id="ul" onclick="test('ul')">
    <li id="li">
        <p onclick="test('p')">11111</p>
    </li>
</ul>

<script>
    function test(msg){
        console.log(msg)
    }
    var li = document.querySelector('#li')
    li.addEventListener('click',function(){
        console.log('點擊了li')
    },false) // 默認false 冒泡傳遞
</script>

此時點擊li標籤，控制檯依次打印dom

p
點擊了li
ul

這個例子先觸發了最內層的p元素的點擊事件，接着纔是li元素，最後纔是ul元素，也就是從內到外傳遞，即冒泡傳遞函數

可是若是修改成捕獲傳遞code

<script>
    function test(msg){
        console.log(msg)
    }
    var li = document.querySelector('#li')
    li.addEventListener('click',function(){
        console.log('點擊了li')
    },true) // 修改成true 捕獲傳遞
</script>

此時點擊li標籤，控制檯依次打印htm

點擊了li
p
ul

這個例子先是觸發了當前的li元素的點擊事件，再由內到外傳遞事件事件

2.removeEventListener() 移除事件監聽

removeEventListener() 方法用於移除由 addEventListener()方法添加的事件句柄。ip

移除事件監聽除了要指定相應的元素，事件名稱外，還須要知道對應的回調函數。
若是添加事件監聽時回調函數是匿名的，則沒法移除rem

// 向 <div> 元素添加事件句柄
document.getElementById("myDIV").addEventListener("click", myFunction);

// 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("click", myFunction);

3.addEventListener() 兼容性

注意： Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，，Opera 7.0 及 Opera 更早版本也不支持。可是，對於這些不支持該函數的瀏覽器，你能夠使用 attachEvent() 方法來添加事件句柄。

能夠經過封裝函數來解決兼容性問題

function addEvent(obj,type,func){
    if (obj.addEventListener) {
        obj.addEventListener(type, func,false);
    } else {
        obj.attachEvent("on"+type, func);
    }
}

function  removeEvent(obj,type,func){
    if (obj.removeEventListener) {
        obj.removeEventListener(type, func,false);
    } else {
        obj.detachEvent("on"+type, func);
    }
}

4.on + 事件名稱

咱們還能夠使用屬性賦值的形式添加事件監聽

<p onclick="test('p')">11111</p>

或者

document.querySelector('p').onclick=function(){
}

能夠經過檢測屬性值的方式來知道這個元素是否有綁定了事件監聽

<p onclick="test('p')">11111</p>
<p>22222</p>

<script>
    function test(msg){
        console.log(msg)
    }
    var nodes = document.querySelectorAll('p')
    for(var i=0;i<nodes.length;i++){
        if(nodes[i].onclick !== null){
            console.log('此元素經過onclick進行了事件監聽')
        }else{
            console.log('此元素沒有onclick事件監聽')
        }
    }
</script>

運行結果：

此元素經過onclick進行了事件監聽
此元素沒有onclick事件監聽

on + 事件名稱使用的是冒泡傳遞

<body>
    <ul onclick="test('ul')">
        <li onclick="test('li')">
            <p onclick="test('p')">1111</p>
        </li>
    </ul>
</body>
</html>
<script>
    function test(msg){
        console.log(msg)
    }
</script>

點擊這個區域，依次打印（事件由內到外傳遞）

p
li
ul

5.不一樣之處

以屬性賦值的形式添加事件監聽會被後面的值覆蓋

<script>
    var div = document.querySelector('div')
    div.onclick=function(){
        alert('hello world')
    }
    div.onclick=function(){
        alert('被我替換了')
    }
</script>

點擊div元素彈出 '被我替換了'
你還能夠給onclick賦值爲null，這樣就至關於移除了事件監聽

addEventListener()添加監聽不會被覆蓋

<script>
    var div = document.querySelector('div')
    div.addEventListener('click',function(){
        console.log('hello world')
    })
    div.addEventListener('click',function(){
        alert('hello world')
    })
</script>

點擊div元素除了彈窗外，控制檯也會打印 'hello world'

6.事件觸發

事件觸發有兩種方法，一種是用戶的行爲觸發了事件回調，例如用戶點擊了按鈕。另外一種是使用js代碼直接調用事件監聽的回調

<script>
    var ul = document.querySelector("ul")
    ul.onclick = function(){
        console.log("onclick")
    }
    ul.addEventListener("click",function(){
        console.log("onclick addEventListener")
    })
   //使用js代碼直接調用事件監聽的回調
    ul.click()
</script>

運行後控制檯輸出：

onclick
addEventListener

相關標籤/搜索

每日一句

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