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 ...
随机推荐
- NestedInteger Java
''' class NestedInteger { private List list; private Integer integer; public NestedInteger(List<N ...
- js控制滚动条在内容更新超出时自动滚到底部
//滚动条在内容更新时自动滚到底部var message = document.getElementById('message');message.scrollTop = message.scroll ...
- APP稳定性测试
APP稳定性测试-monkey测试 第一篇-App稳定性测试-Monkey(基本操作) 准备工作 1.首先下载好adb工具 2.使用数据线连接电脑,打开usb调试 3.使用win+R打开运行, ...
- App的功能测试要点
一 UI测试 (1)界面(菜单.窗口.按钮)布局.风格是否满足客户要求,文字和图片组合是否美观,操作是否友好. (2)清晰.简洁.美观.响应.一致 (3)图形测试.内容测试.导航测试 (图形包括 ...
- 安装pytest-allure-adaptor后,运行报错:AttributeError: module 'pytest' has no attribute 'allure'
原因:因为pytest-allure-adaptor库基本被python3放弃了,运行很不友好,反正我运行就是报错 解决方法: 先卸载:pip uninstall pytest-allure-ad ...
- JavaScipt第四天笔记
JS笔记 1.以后遇到用构造函数创建对象就用NEW 2.用构造函数创建对象语法: var obj1 = new Object();//创建一个空对象 var obj2 = new Object({ n ...
- Maven 梳理 - 使用Maven构建多模块项目
多模块实际案例 project |--business (核心业务) |--business-api |--business-service |--business-message |--busine ...
- redis-自动补全
自动补全实现方式有两种: 第一种:数据量非常小时,程序从redis中获取数据后,在程序中排序:redis只作为数据存储用: 第二种:数据量较大时,直接在redis中排序,并返回自动补全的数据. 第三种 ...
- Java 多线程练习
题目:某公司组织年会,会议入场时有两个入口,在入场时每位员工都能获取一张双色球彩票,假设公司有100个员工,利用多线程模拟年会入场过程, 并分别统计每个入口入场的人数,以及每个员工拿到的彩票的号码.线 ...
- 在 ASP.NET Core 项目中使用 AutoMapper 进行实体映射
一.前言 在实际项目开发过程中,我们使用到的各种 ORM 组件都可以很便捷的将我们获取到的数据绑定到对应的 List<T> 集合中,因为我们最终想要在页面上展示的数据与数据库实体类之间可能 ...