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 ...
随机推荐
- Centos 安装java
1.下载jdk:jdk-8u181-linux-x64.tar.gz,下载地址不用我说了把.. 2.新建java文件夹 mkdir /usr/java 3.将下载的包传到此文件夹中,然后解压 cd / ...
- ReentrantLock API
java可重入锁,简单几个小案例,测试特性. 1.尝试锁 tryLock package com.cn.cfang.ReentrantLock; import java.util.concurren ...
- Docker下实战zabbix三部曲之一:极速体验
对于想学习和实践zabbix的读者来说,在真实环境搭建一套zabbix系统是件费时费力的事情,本文内容就是用docker来缩减搭建时间,目标是让读者们尽快投入zabbix系统的体验和实践: 环境信息 ...
- 带UI的小初高数学学习软件
结对编程项目总结 一.项目需求分析与功能总结 (1)用户注册功能 用户提供手机号码,点击注册将收到一个注册码,用户可使用该注册码完成注册. (2)设置密码功能 密码6-10位,必须含大小写字母和数 ...
- asp.netcore 3.0 Docker Nginx(震惊,原来docker是这样的!)
引言 Docker发布于2013年,Docker是dotCloud公司创始人在法国期间发起的一个公司内部项目,他是dotCloud多年云技术的一个革新.Docker在容器基础上进行了一步的封装,从网络 ...
- (java实现)单链表
什么是单链表 在了解单链表之前,你知道什么是链表吗?如果你不知道什么是链表,可以看看我的这篇博客<链表-LinkList> 单链表是链表的其中一种基本结构.一个最简单的结点结构如图所示,它 ...
- Mycat 配置文件server.xml
server.xml 几乎保存了所有 mycat 需要的系统配置信息. 1.system 标签: 该标签内嵌套的所有 property 标签都与系统配置有关. charset 属性: 该属性用于字符集 ...
- 【IT技术概念】WebAPI与传统的WebService有哪些不同?
在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下,你有很多的选择来构建一个HTTP Services.我分享一下我对 ...
- 【ADO.NET--MVC】初学MVC(MVC入门)(1)
最近一直在学MVC,本来今天想开始做项目了,但是一下手才发现还有好多好多都不懂,虽然想照搬别人的模板,但是还是觉得很虚,这也不懂哪也不懂.看来学习一门技术断不是那么简单,只要随便套套模板,看看别人代码 ...
- 大家久等了,改造版阿里巴巴 sentinel 控制台终于开源了
前言 最近几天,好几个小伙伴在后台询问,改造后的 sentinel-dashboard 什么时候开源.讲真,不是不想给大家放出来,是因为一些地方还没有完善好,怕误导了大家,在经过了一个星期业余时间的努 ...