在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. 20155315 2016-2017-2 《Java程序设计》第七周学习总结

    教材学习内容总结 第12章 Lambda语法 Lambda定义 一个不用被绑定到一个标识符上,并且可能被调用的函数. 在只有Lambda表达式的情况下,参数的类型必须写出来,如果有目标类型的话,在编译 ...

  2. FPGA学习笔记. DDS

    DDS原理 直接数字式频率合成器(Direct Digital Synthesizer) 频率计算公式 Fout = FW * Fclk / 2^N Fout 输出频率, Fw 频率控制字, N 位数 ...

  3. Daemon函数的用法

    Daemon函数的用法 说明: 让一个程序后台运行. 原型: #include <unistd.h> int daemon(int nochdir, int noclose); #incl ...

  4. Gitlab的安装汉化及问题解决

    Gitlab的安装汉化及问题解决(2017/12/14目前版本为10.2.4) 一.前言 Gitlab需要安装的包太TM多了,源码安装能愁死个人,一直出错,后来发现几行命令就装的真是遇到的新大陆一样. ...

  5. ckeditor：新增时会得到上次编辑的内容

    参考网址:http://blog.sina.com.cn/s/blog_6961ba9b0102wwye.html 第一次新增时没有问题,编辑器里面内容为空,编辑数据时,也是正常,但是第二次点击新增时 ...

  6. 2011TG初赛

    一.单项选择题(共20题,每题1.5分,共计30分,每题有且仅有一个正确选项.) 1. 在二进制下,1011001+( )=1100110. A.1011 B.1101 C.1010 D.1111 B ...

  7. Smashing The Browser:From Vulnerability Discovery To Exploit学习记录

    浏览器Fuzz技术 漏洞挖掘 白盒挖掘 代码审计 自动化代码分析 黑盒挖掘 Fuzzing 两种Fuzzing技术 静态Fuzzing 基于变异的 文件.文档 多媒体 bf3 基于生成的 浏览器 重点 ...

  8. 2、Centos6 安装tomcat8.5.31

    1.下载 安装包 wget http://mirrors.aliyun.com/apache/tomcat/tomcat-8/v8.5.31/bin/apache-tomcat-8.5.31.tar. ...

  9. 【Codechef】BB-Billboards

    题解 传说中的--半标准杨表(行单调不增,列单调减) 如果N能整除M,我们把序列分成\(\frac{N}{M}\)段 然后里面要填K个1,显然我每一段必须填K个1,且可以构造出合法的序列,所以最少要填 ...

  10. Codeforces 145E Lucky Queries 线段树

    Lucky Queries 感觉是很简单的区间合并, 但是好像我写的比较麻烦. #include<bits/stdc++.h> #define LL long long #define f ...