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的区别)的更多相关文章

  1. e.target与事件委托简例

    target定义: target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素.文档或窗口. 语法: event.target event.target.nodeName  // ...

  2. JavaScript之事件委托(附原生js和jQuery代码)

    事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...

  3. 事件委托小demo(原生版)

    <style type="text/css"> body, div, span { margin:; padding:; font-family: "\5FA ...

  4. javascript事件委托,事件代理,元素绑定多个事件之练习篇

    <ul id="parent-list"> <li id="post-1">item1</li> <li id=&qu ...

  5. JS中的事件委托(事件代理)

    一步一步来说说事件委托(或者有的资料叫事件代理) js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上. 事件代理就是,本来加在子元素身上的事件,加在了其父级身上. 那就产生了问题:父级那么多子 ...

  6. 原生js事件委托(事件代理)方法扩展

    原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...

  7. js事件委托target

    **看一看,瞧一瞧!** 话说要谈事件委托和target.那我们首先来看看什么是事件.话说什么是事件呢?一般的解释是比较重大.对一定的人群会产生一定影响的事情.而在JavaScript中就不是这样了, ...

  8. e.target与e.currentTarget的区别,事件冒泡与事件捕获 ,事件委托

    e.target与e.currentTarget的区别:https://www.jianshu.com/p/1dd668ccc97a 事件冒泡与事件捕获 :https://www.jianshu.co ...

  9. 第九课-1 事件的状态Event 对象 ,事件,元素,节点的关系,事件委托currentTarget与target的区别

    <ul> <li>1itme1</li> <li>2itme2</li> <li>3itme3</li> <l ...

随机推荐

  1. 基于RMAN搭建DataGuard,使用Broker管理DataGuard

    一.环境准备 1.数据库软件准备 (1).在主节点,安装单机数据库软件并创建数据库. (2).在备库, 安装单机数据库软件, 但是不创建数据库. 2.操作系统配置 在/etc/hosts下面配置主机名 ...

  2. Hadoop 之 深入探索MapReduce

    1.MapReduce基础概念 答:MapReduce作业时一种大规模数据的并行计算的便程模型.我们可以将HDFS中存储的海量数据,通过MapReduce作业进行计算,得到目标数据. 2.MapRed ...

  3. DefaultSerializer requires a Serializable payload but received an object of type [model.Admin]

    一.问题描述:   在用redis做二级缓存时,出现如下异常   DefaultSerializer requires a Serializable payload but received an o ...

  4. JAVASE知识点总结(三)

    第十六章:抽象类和接口 一.抽象方法:在方法面前加了abstract(为了解决,子类必须要覆盖此方法,在定义的时候不要方法体). 特点:1.抽象方法没有方法体. 2.抽象方法必须放在抽象类(类前面加上 ...

  5. Android Studio [Toast]

    ToastActivity.java package com.xdw.a122; import android.support.v7.app.AppCompatActivity; import and ...

  6. PyCharm中创建项目时,在所创建的python虚拟环境下的pip失效

    在这篇博文里,我简单地叙述了我在使用PyCharm创建一个flask项目时遇到的问题,以及我解决这个问题的过程.其中比较值得注意的点有:①PyCharm创建新项目时的解释器配置②Python虚拟环境的 ...

  7. 百万it资源百度网盘链接分享

    自己大量时间整理的优质资源,容量达3000多G,有需要的朋友可以微我,资源截图:  面试资料: 书籍类: 视频类: 以上只是部分资源,想要资源的亲请加微信咨询. 欢迎加微信咨询,请备注资源: 独乐乐不 ...

  8. Flask基础(15)-->模板代码的复用【宏(Macro)、继承(Block)、包含(include)】

    宏 对宏(macro)的理解: 把它看作 Jinja2 中的一个函数,它会返回一个模板或者 HTML 字符串 为了避免反复地编写同样的模板代码,出现代码冗余,可以把他们写成函数以进行重用 需要在多处重 ...

  9. python pytesseract——3步识别验证码的识别入门

    验证码识别是个大工程,但入门开始只要3步.需要用到的库PIL.pytesserac,没有的话pip安装.还有一个是tesseract-ocr 下载地址:https://sourceforge.net/ ...

  10. Hyper-V安装CentOS 8问题

    CentOS 8 已经发布很长时间了,作为一直折腾Linux虚拟机的一员怎么少的了我. 环境&准备工作 系统:Win 10 pro 19H1 虚拟机:Hyper-V ISO:CentOS 8 ...