学习中，有时遇到event.target，总是不明白为什么要用target，后来学习了下，大概了解了event.target到底指什么元素了，关于event和this的内容，下回再说：

先摆结论：event.target指向事件执行时鼠标所点击（假设是click事件）区域的那个元素。如果事件绑定的元素内部有子元素，那么event.target指向这个子元素，如果没有，event.target指向事件所绑定的元素。看代码：

<html>
<head>
<title>prac</title>
<meta charset="utf-8">
<style type="text/css">
    *{margin:0;padding:0;font-size: 20px;}
    #div1{background-color: lightblue;height: 300px;}
    #p1{background-color: red;height: 100px;}
    #p2{background-color: pink;height: 100px;}
</style>
<script type="text/javascript">
function getEventTrigger(event)
  {
  x=event.target;
  alert("event.target元素的id: " + x.id+"，事件类型:"+event.type);
  }
</script>
</head>

<body >
<div id="div1" onmousedown="getEventTrigger(event)">
    <p id="p1">我是p1</p>
    <p id="p2">我是p2</p>
    父块div1剩下的部分
</div>
</body>

</html>

如上图：给父块div1绑定mousedown事件，调用函数getEventTrigger,弹出event.target元素的id:和事件类型，div1里面加了两个子元素，p1和p2,剩下的是div1没有被覆盖的部分；

效果如下：当你在p1里按下鼠标时，弹出p1的id；p2里按下鼠标时，弹出p2的id；在div1里按下鼠标时，弹出的就是div1的id；

也就验证了上面的结论：event.target指向事件执行时鼠标所点击（假设是click事件）区域的那个元素。如果事件绑定的元素内部有子元素，那么event.target指向这个子元素，如果没有，event.target指向事件所绑定的元素。

后面再附个链接和w3school的解释，感觉解释的不清楚，不过案例是用他的代码改的，嘿嘿

target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
http://www.w3school.com.cn/jsref/event_target.asp

event.target指向谁？的更多相关文章

  1. event.target 和 event.currentTarget 的区别

    event.target This property of event objects is the object the event was dispatched on. It is differe ...

  2. 小结event.target与this

    <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <t ...

  3. event.currentTarget指向事件所绑定的元素，而event.target始终指向事件发生时的元素

    event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素

  4. 【前端】event.target 和 event.currentTarget 的区别

    event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...

  5. event.srcElement与event.target的区别

    window.event.srcElement与window.event.target 都是指向触发事件的元素,它是什么就有什么样的属性 srcElement是事件初始化目标html元素对象引用,因为 ...

  6. Event.target和Event.currentTarget的区别

    <style> * { margin:0; padding:0; list-style:none; } #ul { width:400px; height:250px; margin:0 ...

  7. window.event.srcElement与window.event.target 触发事件的元素 触发事件对象的获取，window.event与时间函数参数的event是同一个 事件对象

    判断事件触发的元素:     var tag = window.event.target || window.event.srcElement;    if (tag.tagName.toLowerC ...

  8. event.currentTarget与event.target的差别介绍

    event.currentTarget与event.target的差别想大家在使用的时候不是非常在意.本文以測试代码来解说它门之间的不同.即,event.currentTarget指向事件所绑定的元素 ...

  9. window.event.srcElement与window.event.target 触发事件的元素

    IE浏览器支持window.event.srcElement , 而firefox支持window.event.target:<input type="text" onblu ...

随机推荐

  1. scala 的内部类

    class A { class B; def foo(b:A#B){} //def foo(b:B){} 后面的a1.foo(b2) 就不能通过编译 } object Main { def main( ...

  2. CALayer 2 详解 -----转自李明杰

    CALayer2-创建新的层   本文目录 一.添加一个简单的图层 二.添加一个显示图片的图层 三.为什么CALayer中使用CGColorRef和CGImageRef这2种数据类型,而不用UICol ...

  3. JSON简单介绍

    //JSON是一种数据格式//JSON比较像php里面的关联数组,它里面存的内容也是key和value成对存在的 JSON写法格式 var js = { "one":"h ...

  4. sublime简书安装配置

    sublime-text3编辑器 安装 sudo add-apt-repository ppa:webupd8team/sublime-text-3 sudo apt-get update sudo ...

  5. linux系统中查看系统位数（转载）

    查看系统多少位网上很多种说话   ### getconf WORD_BIT 错误的 这3个是对的        getconf LONG_BIT    echo $HOSTTYPE uname -a  ...

  6. js2

    1.JS的三种输出方式: alert("");console.log("");document.write(""); 2.流程控制语句: a ...

  7. PostSharp-4.3.22安装包_KeyGen发布

    PostSharp-4.3.22安装包_KeyGen发布 请低调使用. 下载相关 PostSharp-4.3.22安装包_KeyGen.part1.rar PostSharp-4.3.22安装包_Ke ...

  8. leetcode日记 Product of Array Except Self

    Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...

  9. jQuery--事件总结

    标准的绑定: bind(type,[,data],fn)==>第一个参数是事件类型 第二个可选参数作为event.data 传递给事件对象的额外数据对象 第三个参数为用来绑定的处理函数 简写绑定 ...

  10. Dapper学习笔记（3）-增、删、改、查

    一.建表 在数据库中建立如下三张表: CREATE TABLE [dbo].[T_User] ( , ) PRIMARY KEY NOT NULL, ) NOT NULL, ) NULL, ) NUL ...