在JavaScript开发中，经常需要获取触发某个事件的目标对象。让后根据目标对象进行不同的业务处理。下面展示通过JavaScript获取触发事件的事件目标对象。如下：

Js代码

1
2
3
4
5
6
7
8
9
10
window.onload = function(){  
  var obj = document.getElementById("test");  
   
  obj.onclick = function(event){  
    // W3C的event对象直接通过函数参数传递过来（arguments[0]）  
    // IE的event对象绑定到window对象上面  
    var evt = event || window.event;  
    alert(evt);   
  };  
};

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>  
  <head>  
    <title>get target</title>  
    <script type='text/javascript'>  
       window.onload = function(){  
         var obj = document.getElementById("test");  
   
         obj.onclick = function(event) {  
            // 获取事件对象  
            var evt = event || window.event;  
   
            // 获取事件触发的目标对象  
            // W3C标准（非IE）： evt.target  
            // IE：evt.srcElement  
            var src = evt.target || evt.srcElement;  
                 
            // 当点击div（非h3）标签上显示DIV，点击h3标签上显示H3  
            alert(src.tagName);   
         };  
       };  
    </script>  
  </head>  
  <body>  
    <div style='height: 200px; width: 200px; background-color: green; padding: 30px;' id="test">  
      <h3 style='background-color: red;'>点击我......</h3>  
    </div>  
   <body>  
</html>

JavaScript获取事件对象和目标对象的更多相关文章

  1. JavaScript：事件对象Event和冒泡

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...

  2. js中获取事件对象的方法小结

    原文地址:http://jingyan.baidu.com/article/d8072ac4594d6cec95cefdac.html 事件对象 的获取很简单,很久前我们就知道IE中事件对象是作为全局 ...

  3. javascript获取json对象的key名称的两种方法

    javascript获取json对象的key名称的两种方法 数据处理中,你可能接收到一个不确定内容格式的json对象,然后要把key的值提取出来.今天试过两种可以提取json key的方法,均可以正常 ...

  4. vue事件获取事件对象,vue获取事件源,vue event.currentTarget

    js的事件,如点击事件,可以直接用this获取事件对象,而jQuery可以使用$(this)来获取事件对象.vue必须借助事件的 event 对象 的 currentTarget 才能获取事件对象 v ...

  5. javascript事件：获取事件对象getEvent函数

    在javascript开发中我们会经常获取页面中的事件对象,然后来处理这些事件,例如下面的getEvent函数就是获取javascript下的页面事件对象. function getEvent(eve ...

  6. javascript获取事件源对象和产生事件的对象

    事件源对象是指event对象,其封装了与事件相关的详细信息,比如按键状态. 获取事件源对象的方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  7. JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）

    鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...

  8. JavaScript DOM事件对象的两个小练习 | 学习内容分享

    Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 本文用于记录个人学习过程 ...

  9. DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

    事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...

随机推荐

  1. 配置SpringMvc + maven 数据源!(四)

    添加依赖项 1. 添加 mybatis 库,打开 pom.xml 添加 mybatis dependency 依赖; <dependency> <groupId>org.myb ...

  2. 【问题收集·中级】关于指示器自定义图片与UUID

    博友问题: 大哥 求教一下 iOS7 能否获取到 uuid 大哥 忙不忙 iOS的加载的时候 动态旋转效果 是 图片 嘛 ? 我的回答 05:43:34hud指示器我用的是这个MBProgressHU ...

  3. 【转】UICollectionView使用介绍

    CHENYILONG Blog UICollectionView 使用介绍 技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博http://weibo.com/lu ...

  4. HDU 2544 最短路 最短路问题

    解题报告: 这题就是求两个单源点之间的最小距离,属于最短路问题,由于数据量很小,只有100,所以这题可以用弗洛伊德也可以用迪杰斯特拉,都可以过,但是用迪杰斯特拉会快一点,但用弗洛伊德的代码会稍短一点, ...

  5. Java并发——线程同步Volatile与Synchronized详解

    0. 前言 转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52370068 面试时很可能遇到这样一个问题:使用volatile修饰in ...

  6. 用代码截图去理解MVC原理

    [概述] 看了蒋金楠先生的<Asp.Net Mvc框架揭密>,这本书详细地讲解了mvc的原理,很深奥也很复杂,看了几遍才将就明白了一点.他在第一章用了一个他自己写的mvc框架作为例子,代码 ...

  7. ioctl函数详细说明（网络）

    ioctl 函数 本函数影响由fd 参数引用的一个打开的文件. #include<unistd.h> int ioctl( int fd, int request, .../* void ...

  8. mysql5.7 主从复制的正常切换【转】

    目前环境如下: master server IP:172.17.61.131 slave server IP:172.17.61.132 mysql version: mysql-5.7.21-lin ...

  9. ssh命令集锦

    [前提] ssh命令其实平时工作会比较少能够用到(因为直接用远程客户端来连接) 但是偶尔还是需要利用ssh临时的连接到某个服务器,所以当遇到的时候来总结一下 [集锦] 一.ssh以某个用户名连接到某个 ...

  10. Java abstract 关键字

    abstract是声明抽象类和抽象方法的关键字 包含抽象方法的类叫抽象类,如果一个类中包含一个或多个抽象方法,该类必须被限定为抽象的,否则编译器会报错,抽象类不可创建对象,创建抽象类的对象编译器会报错 ...