Javascript---- DOM 事件委托-蒲公英云

Javascript---- DOM 事件委托

- 日理万妓 2024-04-08 12:04 272阅读 0赞

#

事件委托(事件代理)

最适合使用事件委托的事件包括：click、mousedown、mouseup、keydown 和 keypress。

事件流(描述的是从页面接收事件的顺序)

事件冒泡和事件捕获

阻止事件冒泡和事件默认行为

#

事件委托(事件代理)

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
将本应该绑定给子元素的事件代理给父元素

目的:减少dom操作浏览器的重排和重绘,并且新添加的元素也是有事件的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            // 不用事件委托 要求给所有的li标签绑定事件 点击每一个li标签背景色变成红色  
            var ul=document.getElementsByTagName('ul')[0];
            // var lis=document.getElementsByTagName('li');
            // for(let i=0;i<lis.length;i++){
            //     lis[i].onclick=function(){
            //         this.style.backgroundColor='red'
            //     }
            // }
            // 利用事件委托 利用事件冒泡
            ul.onclick=function(e){
                e.target.style.backgroundColor='red';
            }
            var newLi=document.createElement('li');
            newLi.innerHTML='我是一个新的li';
            ul.appendChild(newLi);
            // 事件委托 
        }
    </script>
</head>
<body>
    <ul>
        <li>1个li标签</li>
        <li>2个li标签</li>
        <li>3个li标签</li>
        <li>4个li标签</li>
        <li>5个li标签</li>
        <li>6个li标签</li>
    </ul>
</body>
</html>

事件委托具有如下优点：

document 对象随时可用，任何时候都可以给它添加事件处理程序（不用等待 DOMContentLoaded或 load 事件）。这意味着只要页面渲染出可点击的元素，就可以无延迟地起作用。
节省花在设置页面事件处理程序上的时间。只指定一个事件处理程序既可以节省 DOM 引用，也可以节省时间。
减少整个页面所需的内存，提升整体性能。

最适合使用事件委托的事件包括：click、mousedown、mouseup、keydown 和 keypress。

事件流(描述的是从页面接收事件的顺序)

事件冒泡和事件捕获

事件捕获—>事件处理—>事件冒泡

事件捕获:事件从外向内触发

事件冒泡:事件从内向外触发

阻止事件冒泡和事件默认行为

event.stopPropagation()

直接在对应方法中使用event.stopPropagation()便可阻止事件冒泡。

event.preventDefault()

用于阻止特定事件的默认动作。比如，链接的默认行为就是在被单击时导航到 href 属性指定的 URL或是修改表单提交的默认事件。如果想阻止这些行为，可以在 onclick 事件处理程序中取消，

<a href="http://www.baidu.com">跳转</a>
<form action="./1-HTML事件处理程序.html">
  <button id="btn">提交按钮</button>
</form>
<script>
  var a = document.getElementsByTagName('a')[0];
  var btn = document.getElementById('btn');
  a.onclick = function (event) {
    // alert(1);
    // 阻止事件默认行为
    event.preventDefault();
  }
  btn.onclick = function (event) {
    // 阻止事件默认行为
    event.preventDefault();
  }
</script>