javascript举例介绍事件委托的典型使用场景
<html>
<body>
<ul style='list-style:none;max-width:200px;border:1px solid;'>
<li>点我试试</li>
<ul>
<script>
(document.querySelector('ul')).addEventListener('click' ,function(e){
console.log('e.target')
console.log(e.target)
console.log('e.currentTarget')
console.log(e.currentTarget)
})
</script>
</body>
</html>
x
<html>
<body>
<ul style='list-style:none;max-width:200px;border:1px solid;'>
<li>点我试试</li>
<ul>
<script>
(document.querySelector('ul')).addEventListener('click' ,function(e){
console.log('e.target')
console.log(e.target)
console.log('e.currentTarget')
console.log(e.currentTarget)
})
</script>
</body>
</html>
<body>
<ul>
<li>点<span>这里</span></li>
<li>点这里</li>
</ul>
<style>
ul, li{
list-style:none;
border:1px solid;
padding:10px;
background:#ddd
}
li{
text-align:center;
margin:10px;
background:#fff
}
</style>
</body>
</html>
x
<body>
<ul>
<li>点<span>这里</span></li>
<li>点这里</li>
</ul>
<style>
ul, li{
list-style:none;
border:1px solid;
padding:10px;
background:#ddd
}
li{
text-align:center;
margin:10px;
background:#fff
}
</style>
</body>
</html>
var ul=document.querySelector('ul')
ul.addEventListener('click',function(e){
var el = e.target
//判断当前点击的元素是否为li，如果不是，执行以下的while循环
while(el.tagName !== 'LI'){
//如果点击的元素为ul，直接跳出循环
if(el === ul){
el = null
break;
}
//否则，将当前元素父元素赋给el
el=el.parentNode
}
//如果最后el不为null，则打出'ok'
if(el){
console.log('ok')
}
//否则，打出'你点击的不是li'
else console.log('你点击的不是li')
})
x
var ul=document.querySelector('ul')
ul.addEventListener('click',function(e){
var el = e.target
//判断当前点击的元素是否为li，如果不是，执行以下的while循环
while(el.tagName !== 'LI'){
//如果点击的元素为ul，直接跳出循环
if(el === ul){
el = null
break;
}
//否则，将当前元素父元素赋给el
el=el.parentNode
}
//如果最后el不为null，则打出'ok'
if(el){
console.log('ok')
}
//否则，打出'你点击的不是li'
else console.log('你点击的不是li')
})
<html>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button id=addButton>+</button>
</body>
</html>
<style>
li{
border: 1px solid;
}
</style>
<script>
addButton.onclick = function(){
var li = document.createElement('li')
li.textContent = 'new'
document.querySelector('ul').appendChild(li)
}
document.querySelector('ul').onclick = function(e){
console.log(e.target)
}
</script>
</body>
</html>
x
<html>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button id=addButton>+</button>
</body>
</html>
<style>
li{
border: 1px solid;
}
</style>
<script>
addButton.onclick = function(){
var li = document.createElement('li')
li.textContent = 'new'
document.querySelector('ul').appendChild(li)
}
document.querySelector('ul').onclick = function(e){
console.log(e.target)
}
</script>
</body>
</html>
当点击左下角的加号按钮时，会增加一个新的li，同时在点击li时，在控制台输出被点击的li的内容。这就是用事件委托实现动态监控。
javascript举例介绍事件委托的典型使用场景的更多相关文章
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- JavaScript中的事件委托（转至大佬）
转至:https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没 ...
- JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
- 简单说 JavaScript中的事件委托(下)
说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看. 解释 先来一段代码 <!doctype html> <html lang="e ...
- javascript中的事件委托
这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是 ...
- Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制
一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...
- JS 事件绑定、事件监听、事件委托详细介绍
原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...
- JavaScript事件代理和事件委托
一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的 ...
- javascript事件委托和jquery事件委托
元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...
随机推荐
- Java 设计模式系列（十八）备忘录模式(Memento)
Java 设计模式系列(十八)备忘录模式(Memento) 备忘录模式又叫做快照模式(Snapshot Pattern)或Token模式,是对象的行为模式.备忘录对象是一个用来存储另外一个对象内部状态 ...
- linux网络编程模型
1.编程模型 Linux网络编程模型是基于socket的编程模型
- Java API使用(不断更新中)
实例1 BigInteger的构造函数public BigInteger (String val, int radix)的使用 上面的构造函数,val是各种进制的字符串,比如二进制的110,八进制的7 ...
- CodeForces 688A Opponents （水题）
题意:给定 n 行数,让你找出连续最多的全是1的个数. 析:好像也没什么可说的,那就判断一下,并不断更新最大值呗. 代码如下: #include <iostream> #include & ...
- MySql MyBatis 自动生成主键返回null
<insert id="insert" parameterType="cn.zno.smse.pojo.UserScan" useGeneratedKey ...
- MarkDown语法练习笔记
MarkDown使用规则 标题Markdown 支持两种标题的语法,类 Setext 和类 atx 形式 Setext 形式:用底线的形式 Selext形式采用: 1.最高阶标题(=)2.第二阶标题( ...
- .NET基础 （12）时间的操作System.DateTime
时间的操作System.DateTime1 DateTime如何存储时间2 如何在DateTime对象和字符串对象之间进行转换3 什么是UTC时间,如何转换到UTC时间 时间的操作System.Dat ...
- oracle ebs 11i > concurrent programs –> request group –> responsibility
--concurrent programs --request group --responsibility SELECT fr.responsibility_key, fr.respon ...
- github的使用经历
首先我打开百度搜索markdown,点击这个在线编辑器,开始编写,如下图: 预览效果如下: 然后打开github的网页登录后,点击下图这个标志: 然后给给要上传的一个命名: 然后选择README 确认 ...
- Orchard 介绍
0.Introduction 下载地址 https://orchard.codeplex.com/ Orchard 是由微软公司创建,基于 ASP.NET MVC 技术的免费开源内容管理系统: 可用于 ...