JS之事件委托实例

最新推荐文章于 2023-06-27 17:18:45 发布
最新推荐文章于 2023-06-27 17:18:45 发布
阅读量625 收藏
点赞数
分类专栏： IT--前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao_tommy/article/details/53183828
版权

通过JS的事件委托来实现五子棋实例的基本结构。该实例是模仿燕十八老师的实例做的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件委托(事件委托给上一级，通过target来辨别委托给哪个事件)</title>
<style>
	table{
		width: 400px;
		height: 400px;
		border: 0;
		border-collapse: collapse;
		background: green;

	}
	td{
		border: 1px solid gray;
	}
</style>
</head>
<body>
	<h1>事件委托(事件委托给上一级，通过target来辨别委托给哪个事件)</h1>
	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	
</body>
<script>
	var num = 0;
	document.getElementsByTagName('table')[0].onclick = function(ev){
		ev.target.style.background = num++ % 2?'black':'white';
	}

	// var tds = document.getElementsByTagName('td');
	// var i = 0;
	// while(i < tds.length){
	// 		tds[i].onclick = function(){
	// 			this.style.background = 'black';
	// 		}
	// 		i++;
	// }
	
</script>
</html>



Xiao_Tommy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中的事件委托
一个慢的博客
12-28 221
概述事件委托也叫事件代理 首先理解一下事件冒泡：事件的触发响应会从最底层目标一层层地向外到最外层（根节点）。 事件代理即是利用事件冒泡机制把里层所需要的响应事件绑定到外层。For example比如一个宿舍的同学同时快递到了，一种方法就是他们都傻傻地一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个宿舍同学；在这里，取快递就是一个事件，
JS事件委托
qq_38169981的博客
01-16 78
起因： 1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的； 2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考； 概述： 那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同...
事件冒泡事件委托经典案例.APIs --DOM事件最广泛的应用场景 ----委托事件(内含题目和答案)
vip77778888的博客
12-17 584
DOM事件委托什么是事件委托.网景,微软,事件冒泡,事件捕捉
JS 事件委托
最新发布
似水流年QC的博客
06-27 3217
JavaScript事件委托（Event delegation）又叫事件代理，是一种在父元素上监听事件，然后通过事件冒泡机制来处理子元素的事件的技术。通过事件委托，可以避免为每个子元素都绑定事件处理程序，提高性能并简化代码。事件委托的基本原理是将事件处理程序绑定在父元素上，然后通过事件冒泡捕获到子元素的事件触发。这样，无论子元素是现有的还是动态生成的，它们的事件都会被父元素捕获并处理。
JS--事件的委托(代理)--使用/教程/实例
IT利刃出鞘的博客
01-03 1368
说明 本文用示例介绍JavaScript中的事件（Event）的委托（代理）的用法。 事件委托简介 事件委托，也叫事件代理，是JavaScript中绑定事件的一种常用技巧。就是将原本需要绑定在子元素的响应事件委托给父元素或更外层元素，让外层元素担当事件监听的职务。 事件代理的原理是DOM元素的事件冒泡。
事件委托原理及案例
星河梦~的博客
12-11 1328
事件委托原理：事件冒泡 不给每个子节点单独设置事件监听器，而是把事件监听器设置在其父节点上，让其利用事件冒泡的原理影响到每一个子节点。 简而言之，就是不给子元素注册事件，给父元素注册事件，让处理代码在父元素的事件中执行。 优点：只操作一次DOM,提高了程序的性能。 <ul> <li>第一个子节点</li> <li>第二个子节点</li> <li>第三个子节点</li> <li>第四个子节点</li&
【JS基础】事件委托(事件处理)
ZhangYu_010228的博客
02-22 461
事件流，事件委托的学习心得
JavaScript之事件委托实例(附原生js和jQuery代码)
10-19
下面小编就为大家带来一篇JavaScript之事件委托实例(附原生js和jQuery代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS中的事件委托实例浅析
10-18
JavaScript中的事件委托是一种高效处理大量动态元素事件的技术，它的核心思想是将事件监听器添加到父级元素上，而不是直接添加到每个子元素。通过利用事件冒泡的特性，当子元素触发事件时，事件会向上冒泡到父元素，...
JavaScript事件委托实例分析
10-24
JavaScript事件委托是一种优化网页性能的事件处理技术，它利用了事件冒泡的原理，将事件处理器绑定到一个共同的父元素上，而不是每个子元素都单独绑定。这种方法减少了内存消耗和DOM操作，尤其是在动态添加或删除...
事件和委托知识集精华（包含DEMO）
09-26
收集的关于事件和委托的知识一些有价值DEMO和文章，非常好，
事件委托的封装.html
08-31
通过e.target获取触发事件的事件源 利用事件冒泡原理，将绑定在多个子元素身上的相同事件，绑定在页面上现存的父元素身上。
js事件委托和事件代理案例分享
12-01
什么是事件委托/事件代理 　　利用事件的冒泡传播机制（触发当前元素的某一个行为，它父级所有元素的相关行为都会被触发），如果一个容器中有很多元素都要绑定点击事件，我们没有必要一个个的绑定了，只需要给最外层容器绑定一个点击事件即可，在这个方法执行的时候，通过事件源的区分来进行不同的操作。 　　具体小案例如下：　　 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0;
委托与事件的简单例子
08-29
一个简单的委托与事件的 demo，通过timer控件不断触发，而更新时间！帮助理解委托与事件的实际运用
javascript性能优化之事件委托实例详解
10-23
主要介绍了javascript性能优化之事件委托用法,结合实例形式对比分析了JavaScript中事件委托的具体用法与优点,需要的朋友可以参考下
四、委托及事件学习笔记
weixin_42248447的博客
06-09 223
委托与事件的基本知识点。
js事件委托例子
qq_42370505的博客
10-06 466
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" id="txt" /> <button id="add">添加</button> <ul id="box"> <li>
【JAVAScript】【4】利用事件委托简化点击事件（包含箭头函数，target）
weixin_51612770的博客
05-18 1357
JAVASCript利用事件委托简化点击事件 当写多个点击事件时我总是会添加很多监听函数，但是利用事件委托后仅需添加父元素的监听函数，在利用冒泡就可以为每个子元素添加监听函数，大大简化了程序 文章目录JAVASCript利用事件委托简化点击事件前言一、事件委托二、箭头函数三、Element.target四、实例总结 前言 以下是围绕事件委托（事件代理）的一个切换案例，同时补充箭头函数和Element.target 一、事件委托 JavaScript中常用绑定事件的常用技巧，“事件委托”即是把原本需要
Javascript系列之（二）——js中的事件委托及其封装
Claire_Moon的博客
07-23 420
Js中的事件委托及其封装 今天来学习事件委托及其封装 介绍 首先我们来看一下事件委托的介绍和定义，“委托”，顾名思义就是自己不想做，委托给别人做；“事件委托”，就是自己不想做某个事件，委托给其他元素做。 定义 将多个相同子元素的相同事件，绑定给页面上现存的共同的父元素，利用事件冒泡，配合事件对象身上的事件源找到真正点击的元素 优点 节省性能； 可以给页面上暂时不存在的元素绑定事件 缺点 在事件委托...
html事件委托原理,JQuery事件委托原理与用法实例分析
06-08
JQuery事件委托的用法实例： ```html <li>Item 1 <li>Item 2 <li>Item 3 ``` ```javascript $('#list').on('click', 'li', function(event) { console.log('You clicked on item: ' + $(this).text()); }); `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值