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. DOM之事件(二)

    今天详细讲解JavaScript中的常用事件类型和功能. 一 鼠标事件 1,  click:点击事件 等同于mousedown+mouseup,不管这两个事件间隔多久,都会触发一次click事件. 2 ...

  2. Mysql学习笔记整理之索引

    索引的概念: 索引是一个分散存储的数据结构(检索)对数据库表中一列或多列的值进行排序 为什么要用索引? 索引能极大的减少存储引擎需要扫描的数据量 索引可以把随机IO变成顺序IO 索引可以帮助我们进行分 ...

  3. Java 客户端服务器范例

    最近在面试,虽然学习了一些新的框架,但是可能问类似于客户端服务器模型,然后根据其设计,所以就根据面试内容梳理一下客户端服务器模型. 客户端基本思路: 1.创建Socket实例,设置端口和IP地址等 2 ...

  4. 暑期——第九周总结(1,林子雨老师关于hdfs eclipse案例报错问题【已解决】)

    所花时间:7天 代码行:1000(Java)+500(Python)+300(C++) 博客量:1篇 了解到知识点 : 一: 解决"Class org.apache.hadoop.hdfs. ...

  5. 工厂模式(整理自李建忠<C++设计模式>视频)

    整理自李建忠<C++设计模式>视频 一.导入:"对象创建"模式和工厂模式 工厂模式只是该模式下的一种. 二.举例说明 有这样一个场景:需要在MainForm中设计一个按 ...

  6. Kafka系列一之架构介绍和安装

    Kafka架构介绍和安装 写在前面 还是那句话,当你学习一个新的东西之前,你总得知道这个东西是什么?这个东西可以用来做什么?然后你才会去学习它,使用它.简单来说,kafka既是一个消息队列,如今,它也 ...

  7. opencv目标检测之canny算法

    canny canny的目标有3个 低错误率 检测出的边缘都是真正的边缘 定位良好 边缘上的像素点与真正的边缘上的像素点距离应该最小 最小响应 边缘只能标识一次,噪声不应该标注为边缘 canny分几步 ...

  8. shell管道与重定向

    输出重定向 $ ls -l > lsoutput 这条命令将ls命令执行后的结果输入出到lsoutput文件中. 在linux shell中使用符号 > ,< 来完成输入输出的重定向 ...

  9. javaweb技术入门

    JavaWeb巩固和进阶 1.如何配置外部应用? 方法一: server.xml 在<Host>中添加如下配置 <Context path="/xxx" docB ...

  10. 免费申请 HTTPS 证书,开启全站 HTTPS

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 HTTP 报文以明文形式传输,如果你的网站只支持 HTTP 协议,那么就有可能遭受到安 ...