JavaScript事件属性event.target和currentTarget 属性的区别。
event.target 获取的是触发事件的标签元素
event.currentTarget 获取到的是发起事件的标签元素
一、事件属性:event.target
target事件委托的定义：本来该自己干的事，但是自己不干，交给别人来干
例子1
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main {
width: 200px;
height: 100px;
background: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("main").onclick = function(e) {
/*这里e等于window.event也可以写成event.*/
console.log(e.target); //<div id="main" class="sb js node"><span>我爱JavaScript</span></div>
console.log(e.target.id); //main 返回点击元素里存在的id属性值
console.log(e.target.tagName); //DIV
console.log(e.target.nodeName); //DIV
console.log(e.target.classList); //输出dom类列表,没有即空
console.log(e.target.className); // sb js node
console.log(e.target.innerHTML); //<span>我爱JavaScript</span>
console.log(e.target.innerText); //我爱JavaScript console.log("----------------------------------------------------") console.log(e.type); //获取事件类型：click
console.log(event.pageX+":"+event.pageY); //鼠标相对于文件的左侧和顶部边缘的位置
console.log(event.target); //获取发起事件的标签
console.log(event.currentTarget); //获取发起事件的标签
console.log(event.currentTarget.id); //获取发起事件的标签里的id属性值
console.log(event.which) //针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮 常用在keydown事件中
console.log(event.timeStamp); //事件触发与事件创建之间的时间间隔
alert("点击了id为："+event.target.id+"的"+event.target.nodeName+"标签"); // console.log(e.preventDefault()); //阻止默认事件
// console.log(e.stopPropagation()); //阻止事件冒泡到父元素
}
}
</script>
</head> <body>
<div id="main" class="js node"><span>我爱JavaScript</span></div>
</body> </html>
输出如下：
tip:给网页里ID为main的div标签绑定了一个鼠标点击事件，而在实际中，在点击了这个div内的所有子标签时，都会触发这个事件，这个过程就是“冒泡”
例子中的事件传播顺序：
- 在冒泡型事件流中，是span> div > body > html > document。
- 在捕获型事件流中，是document > html > body> div > span。
例子2：一个添加删除的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个增删demo</title>
</head>
<body>
<input type="text" id="text">
<input type="button" value="添加" id="button">
<ul>
<li>第1个<button class="btn" id="1">删除</button></li>
<li>第2个<button class="btn" id="2">删除</button></li>
<li>第3个<button class="btn" id="3">删除</button></li>
</ul>
<script>
var button = document.getElementById("button");
var text = document.getElementById("text");
var ul = document.getElementsByTagName("ul")[0];
var btnClass = document.getElementsByClassName("btn");
button.onclick = function(){
var deleteButton = document.createElement("button");
var value = text.value;
deleteButton.setAttribute("class","btn");
var deleteText = document.createTextNode("删除");
deleteButton.appendChild(deleteText);
var li = document.createElement("li");
var liText = document.createTextNode(value);
li.appendChild(liText);
li.appendChild(deleteButton);
ul.appendChild(li);
for(var i=0;i<btnClass.length;i++){
btnClass[i].onclick=function(){
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
} for(var i=0;i<btnClass.length;i++){
btnClass[i].onclick=function(){
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
</script>
</body>
</html>
效果如下：
二、currentTarget
event.currentTarget的作用是什么呢，我觉得他和this 的作用是差不多的，始终返回的是绑定事件的元素
例子1
<body>
<ul id="ul">ul
<li>li<a href="">a</a></li>
<li>li<a href="">a</a></li>
<li>li<a href="">a</a></li>
</ul>
<script>
var ul = document.getElementById("ul");
ul.onclick = function(event){
var tar = event.target;
var current = event.currentTarget; //使用target感觉也没有太大区别，具体鉴定需要多去尝试不同的demo
var tagName = tar.nodeName.toLowerCase();
console.log(tar == this);
event.preventDefault();
}
</script>
</body>
效果
资料参考：https://www.cnblogs.com/sxz2008/p/6393232.html
JavaScript事件属性event.target和currentTarget 属性的区别。的更多相关文章
- AS3中 Event 类的target和currentTarget属性
在事件处理过程中,会自动生成事件类的实例,并传给侦听器函数.通过这个参数就可以使用事件类的属性和方法.其中target与currentTarget属性是两个很相似的属性. 对于简单的事件处理过程,分清 ...
- javascript事件与event对象的属性
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- event对象中 target和currentTarget 属性的区别。
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素
- 小程序开发 event对象中 target和currentTarget 属性的区别。
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 p包含在div内 在outer上点击时,target跟currentTarget ...
- 三言两语之js事件、事件流以及target、currentTarget、this那些事
厉害了我的哥--你是如此简单我却将你给遗忘 放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不 ...
- jquery事件之event.target用法详解
1. 定义和用法: 显示哪个 DOM 元素触发了事件: $("p, button, h1, h2").click(function(event){ $("div" ...
- javascript 事件委托 event delegation
事件委托 event delegation 一.概念: 假设我们有很多个子元素,每个元素被点击时都会触发相应事件,普通的做法是给每个子元素添加一个事件监听. 而,事件委托则是给它们的父元素添加一个事件 ...
- JavaScript 事件之event.preventDefault()与event.stopPropagation()简单介绍
event.preventDefault()用法介绍: 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作). 例如,如果 type 属性是 “submit”,在事件传播的任 ...
- JavaScript事件循环(Event Loop)机制
JavaScript 是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决定 ...
随机推荐
- 记录一次oracle的坑
背景:程序正常运行中,突然技术支持人员反映数据库数据好久没有增加,于是乎各种排查问题,但是一直没有找到原因,由于代码比较久,也不是本人所写,更气的是居然用的是oracle数据库,并且是通过java代码 ...
- CTF常用软件/工具
慢慢更新 整合版: http://www.jz5u.com/Soft/Progra/tool/163275.html/ 各种在线工具以及工具整合 http://www.ctftools.com/ 逆向 ...
- WebDriver 将浏览器窗口最大化
package com.entrym.main; import java.io.File; import java.io.IOException; import org.openqa.selenium ...
- 实现一个正则表达式引擎in Python(三)
项目地址:Regex in Python 前两篇已经完成的写了一个基于NFA的正则表达式引擎了,下面要做的就是更近一步,把NFA转换为DFA,并对DFA最小化 DFA的定义 对于NFA转换为DFA的算 ...
- HTML5实现首页动态视频背景
话不多说,先看效果图: 炫酷吗?你想实现这种动态视频作为背景的首页吗?来,一起来学习,本文将带你一起实现H5动态视频背景: 首先网上找一段清晰的视频下载下来,最好是MP4格式的: 下载好了之后 ...
- RabbitMQ的六种工作模式总结
最近学习RabbitMQ的使用方式,记录下来,方便以后使用,也方便和大家共享,相互交流. RabbitMQ的六种工作模式: 1.Work queues2.Publish/subscribe3.Rout ...
- js之捕捉冒泡和事件委托
以下为转载内容 一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体 ...
- logcat粗略了解(一)
Logcat Logcat介绍:logcat是android的一个命令行工具,用于的到程序的log信息 Logcat命令格式: [adb] logcat [<option>]…[<f ...
- Spring 梳理-bean作用域
Spring定义了多种域 单例(Singleton):在整个应用中,只有一个实例 原型(Prototype):每次注入或者通过Spring应用上线文获取时,都创建一个bean实例 会话(Session ...
- c++中不需要显示指出struct
赫 21:48:16请教个问题赫 21:49:53类声明前对私有继承的结构,的struct定义是什么作用?类声明前对该类私有继承的结构,的struct定义是什么作用?赫 21:51:21stru ...