e.target与事件委托简例(原生和jQuery的区别)
target定义(英译:目标,目的):
target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
语法:
event.target
event.target.nodeName //获取事件触发元素标签name(li,p...)
event.target.id //获取事件触发元素id
event.target.className //获取事件触发元素classname
event.target.innerHTML //获取事件触发元素的内容(li)
等。。。
jquery:this 与 e.target区别
this会冒泡。e.target不冒泡就是指向事件触发的dom。(这里说的this会冒泡,就是指的是会将目标函数点击的事件不自身处理,将事件委托到他的父元素节点上。例如下面的例子,e.target指的是目标函数)
HTML部分
<ul>
<li><b>Click me!</b></li>
<li class="li">You can also <b>Click me!</b></li>
</ul>
JS部分
$('li').click(function(e){ //点击的是<b>标签的时候
console.log($(e.target)); // 返回值指的是<b>
console.log($(this)); //返回值值的是<li>
})
正确的事件委托使用方法
$('ul').click(function(e){
if(e.target.className==='li'){//点击元素下面的class为li的元素
console.log($(e.target))
}
});
e.target与事件委托简例(原生和jQuery的区别)的更多相关文章
- e.target与事件委托简例
target定义: target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素.文档或窗口. 语法: event.target event.target.nodeName // ...
- JavaScript之事件委托(附原生js和jQuery代码)
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...
- 事件委托小demo(原生版)
<style type="text/css"> body, div, span { margin:; padding:; font-family: "\5FA ...
- javascript事件委托,事件代理,元素绑定多个事件之练习篇
<ul id="parent-list"> <li id="post-1">item1</li> <li id=&qu ...
- JS中的事件委托(事件代理)
一步一步来说说事件委托(或者有的资料叫事件代理) js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上. 事件代理就是,本来加在子元素身上的事件,加在了其父级身上. 那就产生了问题:父级那么多子 ...
- 原生js事件委托(事件代理)方法扩展
原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...
- js事件委托target
**看一看,瞧一瞧!** 话说要谈事件委托和target.那我们首先来看看什么是事件.话说什么是事件呢?一般的解释是比较重大.对一定的人群会产生一定影响的事情.而在JavaScript中就不是这样了, ...
- e.target与e.currentTarget的区别,事件冒泡与事件捕获 ,事件委托
e.target与e.currentTarget的区别:https://www.jianshu.com/p/1dd668ccc97a 事件冒泡与事件捕获 :https://www.jianshu.co ...
- 第九课-1 事件的状态Event 对象 ,事件,元素,节点的关系,事件委托currentTarget与target的区别
<ul> <li>1itme1</li> <li>2itme2</li> <li>3itme3</li> <l ...
随机推荐
- Apache Hadoop集群安装(NameNode HA + YARN HA + SPARK + 机架感知)
1.主机规划 序号 主机名 IP地址 角色 1 nn-1 192.168.9.21 NameNode.mr-jobhistory.zookeeper.JournalNode 2 nn-2 192.16 ...
- pt-table-sync 配合pt-table-checksum 修复主从不一致
pt-table-sync 配合pt-table-checksum 修复主从不一致. 先执行下面这条语句,打印出要执行的命令,确认无误后再将 --print 改为 --execute 执行.注意 ...
- SpringBoot之简单入门
一,spring boot 是什么? spring boot的官网是这样说的: Spring Boot makes it easy to create stand-alone, production- ...
- TensorFlow2.0(二):数学运算
1 基本运算:加(+).减(-).点乘(*).除(/).地板除法(//).取余(%) 基本运算中所有实例都以下面的张量a.b为例进行: >>> a = tf.random.unifo ...
- 两个变量交换数字 不用第三个变量的情况下 int a = 5,b = 6
今天可是涨见识额 记录一下 第一种方法: a=a+bb=a-ba=a-b 第二种: b= a+(a=b)*0 一句话搞定
- 要不要学习Git(分布式版本控制系统)
做技术的人,要不要学一学Git呢? 提出这个问题,是因为很多小伙伴还不会使用Git. 对于任何新一代的技术工具,它在业界普及都有一个过程,Git的阻碍是:学习成本.工具迭代的成本. SVN诞生于200 ...
- 关于CDH集群spark的三种安装方式简述
一.spark的命令行模式 1.第一种进入方式:执行 pyspark进入,执行exit()退出 注意报错信息:java.lang.IllegalArgumentException: Required ...
- FreeSql 导航属性的联级保存功能
写在前面 FreeSql 一个款 .net 平台下支持 .net framework 4.5+..net core 2.1+ 的开源 ORM.单元测试超过3100+,正在不断吸引新的开发者,生命不息开 ...
- linux&shell学习系列
1.VMware安装Centos7虚拟机 2.Linux之vim详解 3.linux后台运行的几种方式 4.linux权限管理 5.linux之用户和用户组管理详解 6.grep文本搜索工具详解 7. ...
- python-电脑结构、网络基础、单位转换
目录 一.计算机五大部件 二.程序运行的过程 三.ARP协议 四.单位转换 一.计算机五大部件 电脑之父——冯·诺伊曼提出了计算机的五大部件:输入设备.输出设备.存储器.运算器和控制器. 我们把键盘和 ...