JavaScript 事件监听addEventListener

JavaScript事件监听器

addEventListener()的工作原理是将实现EventListener的函数添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。

1、事件监听 addEventListener()

语法：ele.addEventListener(event_type , function ,布尔值(是否启用事件捕获去触发事件))
      1.第一个参数是事件的类型（比如"click"鼠标单击事件）；
      2.第二个参数是在事件发生时我们要调用的函数；
      3.最后一个参数为可选参数，不写时默认false(即事件冒泡)
【注意】事件监听中，请勿对事件类型event_type使用 “on” 前缀。比如，我们要使用 “click” 代替 “onclick”。

    <button id="btn">点我一下试试</button>
    <script>
        var btn_ele = document.getElementById("btn");
        btn_ele.addEventListener("click" , function(){
   
            alert("事件监听，你点击了按钮");
        });
    </script>

2、移除监听 removeEventListener()

语法：ele.removeEventListener(事件类型,function)

---

事件监听的主动触发 dispatchEvent()

API: dispatchEvent(event); 在对应的元素上触发一个事件

1. 创建一个新的事件对象; var e = new Event(“event_type”);
2. 触发事件 : dispatchEvent(e) ;

        btn_ele.addEventListener("click" , function(){
   
            console.log("btn_ele 事件监听主动触发")
        });
        // btn_ele.onclick();//无法触发onclick。报错btn_ele.onclick is not a function
        // 如何主动触发？
        // 自己创建一个事件对象，去触发这个事件处理函数
        var e = new Event("click");
        // btn_ele.dispatchEvent(e);
        // 如果是类似轮播图效果 可以加定时器
        setInterval(function(