js实现监听事件的几种方式与事件冒泡/事件捕获

目录

html内联样式

调用addEventListener() 方法 

向原元素添加事件句柄

向同一个元素中添加多个事件句柄

事件对象

事件冒泡或事件捕获

移除事件监听添加事件监听

html内联样式

<button class="myBtn" onclick="myFunction()">点击</button>

<script>
     function myFunction(){
            alert('hello');
        }
</script>

调用addEventListener() 方法 

 <button class="myBtn">点击</button>
    <p class="demo"></p>
<script>
  document.querySelector('.myBtn').addEventListener('click',displayDate);

        function displayDate(){
            document.querySelector('.demo').innerHTML = Date();
        }
</script>

向原元素添加事件句柄

 <button class="myBtn">点击</button>
    <p class="demo"></p>
<script>
  document.querySelector('.myBtn').addEventListener('click',function(){
            alert('hello javaScript');
        });
</script>

向同一个元素中添加多个事件句柄

 <button class="myBtn">点击</button>
    <p class="demo"></p>

    <script>

  let btn = document.querySelector('.myBtn');

        btn.addEventListener('click',firstFunction);
        btn.addEventListener('click',secondFunction);
        function firstFunction(){
            alert('hello javaScript');
        }
        function secondFunction(){
            alert('函数已执行');
        }
</script>

事件对象

 <button class="myBtn">点击</button>
 <p class="demo"></p>

<script>
    let btn = document.querSelector('.myBtn');

    btn.onclick = function (event) {
        alert('函数执行了')        
      }
</script>

事件冒泡或事件捕获

将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

当鼠标点击或触发dom事件时，浏览器会从根节点开始从内到外进行事件传播，点击子元素，会先触发子元素。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

可以理解为，当鼠标点击或触发dom事件时，浏览器会从根节点开始从外到内进行事件传播，点击子元素，会先触发父元素。

addEventListener(event, function, useCapture);

event表示监听事件，如click，mouseout等不加on的事件

function表示事件触发后调用的函数，可以是外部定义的函数，也可以是匿名函数。

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

移除事件监听添加事件监听

datachEvent(event,function)