Javascript---- DOM 事件委托

桃子耶耶

于 2022-08-30 15:26:27 发布

阅读量374

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_46677484/article/details/126519987

版权

事件委托(事件代理)

最适合使用事件委托的事件包括：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>

桃子耶耶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Javascript---- DOM 事件委托

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。将本应该绑定给子元素的事件代理给父元素目的:减少dom操作浏览器的重排和重绘,并且新添加的元素也是有事件的。.........
复制链接

扫一扫