委托模式的案例

叁歲伎倆 2021-09-02 03:24 235阅读 0赞

### **target定义：** ###

target 属性规定哪个 DOM 元素触发了该事件。  
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

**语法：**

e.target

e.target.nodeName 　　//获取事件触发元素标签名（li，p，div，img，button…）

[e.target.id][]　　　　　　//获取事件触发元素id

e.target.className　　//获取事件触发元素classname

e.target.innerHTML　 //获取事件触发元素的内容（li）

### **jquery:this 与 e.target区别:** ###

js中事件是会冒泡的，故this会冒泡而 e.target 不冒泡，它就是指向事件触发的dom。所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素。

### 委托模式： ###

可以解决三件事件: 1 减少事件数量 2 预言未来元素 3 防止内存泄漏

委托模式就是将原本子元素要做的事件交给父元素做

案例: （推荐）

<style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		ul {
    			list-style: none;
    		}
    		.container {
    			width: 1120px;
    			margin: 0 auto;
    		}
    		ul li {
    			height: 20px;
    			background-color: orange;
    			margin-bottom: 10px;
    			padding: 3px;
    			overflow: hidden;
    		}
    		ul li span {
    			float: right;
    			cursor: pointer;
    		}
    	</style>
    </head>
    <body>
    	<div class="container">
    		<ul id="list">
    			<li><span>×</span></li>
    			<li><span>×</span></li>
    			<li><span>×</span></li>
    			<li><span>×</span></li>
    			<li><span>×</span></li>
    			<li><span>×</span></li>
    			<li><span>×</span></li>
    		</ul>
    		<div class="btns">
    			<button id="btn">点我添加li</button>
    		</div>
    	</div>
    	<script type="text/javascript">
    	// 获取元素
    	var btn = document.getElementById("btn");
    	var ul = document.getElementById("list");
    
    	
    
    	// 委托模式： 
    	// 	可以解决三件事件: 1 减少事件数量 2 预言未来元素 3 防止内存泄漏
    
    	// 委托模式就是将原本子元素要做的事件交给父元素做
    
    	// 为ul注册点击事件
    	ul.onclick = function(e) {
    		// console.log(e);
    		// 利用触发事件的元素
    		// console.log(e.target);
    		if (e.target.nodeName.toLowerCase() == "li") {
    			// 当是li触发事件的时候，改变li元素的背景颜色
    			e.target.style.backgroundColor = "red";
    		} else if (e.target.nodeName.toLowerCase() == "span") {
    			// 移除对应的父节点
    			this.removeChild(e.target.parentNode);
    		}
    	}
    
    	// 为btn注册点击事件
    	btn.onclick = function() {
    		ul.innerHTML += "<li><span>×</span></li>"
    	}
    
    	</script>

不推荐写法

<style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		ul {
    			list-style: none;
    		}
    		.container {
    			width: 1120px;
    			margin: 0 auto;
    		}
    		ul li {
    			height: 20px;
    			background-color: orange;
    			margin-bottom: 10px;
    			padding: 3px;
    			overflow: hidden;
    		}
    		ul li span {
    			float: right;
    			cursor: pointer;
    		}
    	</style>
    </head>
    <body>
    	<div class="container">
    		<ul id="list">
    			<li><span>×</span></li>
    			<li><span>×</span></li>
    			<li><span>×</span></li>
    			<li><span>×</span></li>
    			<li><span>×</span></li>
    			<li><span>×</span></li>
    			<li><span>×</span></li>
    		</ul>
    		<div class="btns">
    			<button id="btn">点我添加li</button>
    		</div>
    	</div>
    	<script type="text/javascript">
    	// 需求:
    	// 我们要做三件事件
    	// 1 点击btn添加li元素
    	// 2 点击哪个li元素就让哪个li元素的背景色改变
    	// 3 点击span就移除对应的li元素
    
    	// 获取元素
    	var ul = document.getElementById("list");
    	var btn = document.getElementById("btn");
    	var lis = document.getElementsByTagName("li");
    	var spans = document.getElementsByTagName("span");
    
    	// 实现1
    	btn.onclick = function() {
    		// 创建li元素
    		var li = document.createElement("li");
    
    		// 给li添加事件
    		li.onclick = li_click;
    		// 创建span元素
    		var span = document.createElement("span");
    
    		span.onclick = span_click;
    		// 设置内部文本
    		span.innerHTML = "×";
    		// 追加元素
    		li.appendChild(span);
    		// 将li元素追加到ul中
    		ul.appendChild(li);
    	}
    
    	// 提取到外部
    	function li_click() {
    		// 改变li的背景颜色
    		this.style.backgroundColor = "red";
    	}
    	// 提取到外部
    	function span_click() {
    		// 移入对应的li元素
    		ul.removeChild(this.parentNode);
    	}
    	// 实现2
    	for (var i = 0; i < lis.length; i++) {
    		// 为每一个Li元素注册点击事件
    		lis[i].onclick = li_click;
    	}
    
    
    	// 实现3
    	for (var i = 0; i < spans.length; i++) {
    		// 为每一个span元素注册点击事件
    		spans[i].onclick = span_click;
    	}
    
    	// 在当前页面中有哪些地方是可以优化呢？
    	// 首先，我们要检测每一个li身上的事件是同一个吗
    	// 还要检测每一个span身上的事件是同一个吗
    
    	// 当点击span元素的时候删除的有: span元素 span元素身上的事件 li元素 li元素身上的事件
    
    	// 此时，要考虑是否会发生内存泄漏
    	// 内存泄漏： 不能重复利用的内存
    
    	</script>

[e.target.id]: http://event.target.id

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关委托及观察者模式

委托（`delegate`）是一种特殊的类型（`class`），它可以被认为是一个可以拥有函数引用的类，它的声明规定了它能够持有的函数引用的函数形式，同时它可以存储多个函数引用

梦里梦外;/ 2024年03月17日 17:36/ 0 赞/ 47 阅读

相关 java设计模式之——委托模式

委托模式是软件设计模式中的一项基本技巧。在委托模式中，有两个对象参与处理同一个请求，接受请求的对象将请求委托给另一个对象来处理。委托模式是一项基本技巧，许多其他的模式，如状态模

你的名字/ 2022年08月26日 08:35/ 0 赞/ 113 阅读

相关委托和匿名委托的比较

[点击打开链接][Link 1] 感觉匿名委托使用起来更简洁一点，不用在定义一个专用的委托函数来传递方法，也更可以更好的理解委托。比较一下： ![复制代

女爷i/ 2022年08月07日 12:47/ 0 赞/ 184 阅读

相关委托设计模式

首先区别下代理模式和委托模式的区别： proxy :译为代理，被代理方（B）与代理方（A）的接口完全一致。主要使用场景（语义）应该是：为简化编程（或无法操

Bertha 。/ 2022年06月15日 04:08/ 0 赞/ 129 阅读

相关 php核心学习-设计模式的学习-委托模式

委托者模式 > 为其它对象提供一种代理以控制对这个对象的访问简单的理解如下图所示: ![这里写图片描述][SouthEast] 下面我们导入一个场景来学习委托者

古城微笑少年丶/ 2022年06月10日 10:22/ 0 赞/ 127 阅读

相关纯js事件委托模式，委托父元素

1.点击前 ![这里写图片描述][SouthEast] 2.点击后 ![这里写图片描述][SouthEast 1] 内容代码： <!DOCTYPE h

女爷i/ 2022年06月01日 05:07/ 0 赞/ 214 阅读

相关设计模式－观察者模式与委托

目录观察者模式：委托： -------------------- 观察者模式：使用场景：一：当一个对象的改变需要同时改变其他对象的时候。而且它不知道具体

秒速五厘米/ 2022年02月03日 14:29/ 0 赞/ 164 阅读

相关父类委托模式

classLoader中采用了父类委托模式，类加载器有三种：bootstrap classloader（爷爷）、Extclassloader（父亲）、APPclassloade

骑猪看日落/ 2021年12月08日 23:55/ 0 赞/ 154 阅读

相关委托模式的案例

target定义： target 属性规定哪个 DOM 元素触发了该事件。 target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗

叁歲伎倆/ 2021年09月02日 03:24/ 0 赞/ 236 阅读

相关 JavaScript设计模式(二十六)【委托模式】

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

冷不防/ 2021年07月04日 14:33/ 0 赞/ 345 阅读