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