Javascript---- DOM 事件委托

- 日理万妓 2024-04-08 12:04 111阅读 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>

事件委托具有如下优点：

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

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

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

#### 事件冒泡和事件捕获 ####

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

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

![aa64840f1f984f0d91a605f3297b7ff3.png][]

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

![bc784b009c3345caa70463f22d2948d5.png][]

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

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>

[aa64840f1f984f0d91a605f3297b7ff3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/530abe3bd15249be917e7402dc1905bb.png
[bc784b009c3345caa70463f22d2948d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c8c91e14515b4df08a56593a65b11d30.png