IE下,event对象有srcElement属性,但是没有target属性;

Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：

firefox 下的 event.target = IE 下的 event.srcElement

解决方法:使用obj = event.srcElement ? event.srcElement : event.target;

或：var evtTarget = event.target || event.srcElement;

event.srcElement.id

event.srcElement.tagname

event.srcElement.type

event.srcElement.value

event.srcElement.name

event.srcElement.classname

event.srcElement.parentelement

event.srcElement.getattribute

event.srcElement.children

event.srcElement.lastChild

event.srcElement.ChildNode

event.srcElement.selectedIndex

js将html的所有控件都看成是一个个对象，通过js的各个属性，就能对其进行操作处理，js里对象的整体结构是树形的结构。一层一层的追溯，即可获取需要的结果。

event.srcElement：表示的当前的这个事件源。

event.srcElement.parentNode：表示当前事件源的父节点。

parentNode：父节点，也就是上一层的节点。可以是任何一个标签。

event.srcElement.firstChild：当前事件的第一个节点，如果节点是input，通过event.srcElement.firstChild.value就可以获取此input的值。

event.srcElement.parentElement：是指在鼠标所在对象的上一个对象。

event.srcElement.children：当前节点下对象的个数，有多个的话就是个数组，如当前节点下有2个input的对象，要获取这两个可以用event.srcElement.children[0] 与 event.srcElement.children[1]分别获取。

常用如下：

1.event.srcElement.parentNode.tagName; 

<div>

    <input type="button" value="父元素标签" onclick="alert(event.srcElement.parentNode.tagName)">

</div>

结果：DIV

第一个子标签为 event.srcElement.firstChild

最后个一个是   event.srcElement.lastChild

当然也可以用   event.srcElement.children[i] , event.srcElement.ChildNode[i]

2.event.srcElement.parentElement是指在鼠标所在对象的上一个对象 

<table border=1 width="200">

    <tr title="tr测试"><td onclick="alert(event.srcElement.parentElement.title)">tr</td></tr>

</table>

3.event.srcElement.tagName 得到点击位置的标签名称

4.event.srcElement.title 得到当前标签title属性值

5.event.srcElement.options[event.srcElement.selectedIndex].value

例1：

<select name="selectname" onchange="alert(event.srcElement.options[event.srcElement.selectedIndex].value)" >

    <option value="1-">1</option>

    <option value="2-">2</option>

    <option value="3-">3</option>

    <option value="4-">4</option>

    <option value="5-">5</option>

</select>

例2：

<script>

function a(){

    alert("您点击的标记是：" + event.srcElement.tagName)

}

</script>

<body  onclick="a()">

         点鼠标测试<br>                  //BODY

    <input value='test input'/>    //INPUT

    <a href=#>test</a>             //A

    <div>测试div</div>             //DIV

    <p>测试p</p>                   //P

    <span>测试span</span><br />    //SPAN

    <div>

        <a href="/" onmouseover="alert(event.srcElement.parentElement.tagName);">放在我上面</a>

    </div>  //DIV

</body>

例3：

<div id="div_001">

    <form id="form_001">

       <input type="button" id="button_001_id" name="button_001_Name" value="单击查看"

          class="button_001_Class" onclick="Get_srcElement(this)">

    </form>

</div>

<script>

function Get_srcElement(){

    var srcElement="";

    srcElement += "\n" + "event.srcElement.id : " + event.srcElement.id;

    srcElement += "\n" + "event.srcElement.tagName : " + event.srcElement.tagName;

    srcElement += "\n" + "event.srcElement.type : " + event.srcElement.type;

    srcElement += "\n" + "event.srcElement.value : " + event.srcElement.value;

    srcElement += "\n" + "event.srcElement.name : " + event.srcElement.name;

    srcElement += "\n" + "event.srcElement.className : " + event.srcElement.className;

    srcElement += "\n" + "event.srcElement.parentElement.id : " + event.srcElement.parentElement.id;

    srcElement += "\n" + "event.srcElement.parentNode.id : " + event.srcElement.parentNode.id;

    srcElement += "\n" + "event.srcElement.getattribute : " + event.srcElement.getAttribute;

    alert(srcElement);

}

JS基础篇--JS的event.srcElement与event.target（触发事件对象）的更多相关文章

  1. JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...

  2. 前端面试题目汇总摘录（JS 基础篇）

    JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...

  3. js的event.srcElement与event.target（触发事件对象）

    IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...

  4. 前端总结·基础篇·JS（一）五大数据类型之字符串（String）

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(二)补充 前端总结·基础篇·JS(一)五大数据类型之字符串(String) 目录 这是& ...

  5. 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）

    目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...

  6. 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  7. 前端总结·基础篇·JS（四）异步请求及跨域方案

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  8. 前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String）

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  9. JS基础篇--sort()方法的用法，参数以及排序原理

    JS基础篇--sort()方法的用法,参数以及排序原理   sort() 方法用于对数组的元素进行排序,并返回数组.默认排序顺序是根据字符串Unicode码点.语法:arrayObject.sort( ...

随机推荐

  1. centos 7如何配置网络、网卡、ip命令

    Linux网络相关配置文件 Linux网络配置相关的文件根据不同的发行版目录名称有所不同,但大同小异,主要有似下目录或文件. (1)/etc/hostname:主要功能在于修改主机名称. (2)/et ...

  2. 解决PHP无法接收post超过1000个字段的问题

    今天在做与后台交互的的过程中,发现php对于接收的POST有一个限制,超出1000个字段之后便无法接收,项目要求在不改变PHP配置的情况下通过前端方式解决,通过分析并且网上差一些大牛的资料终于找到了解 ...

  3. Codeforces Round #267 (Div. 2) C. George and Job （dp）

    wa哭了,,t哭了,,还是看了题解... 8170436                 2014-10-11 06:41:51     njczy2010     C - George and Jo ...

  4. shell按日期自动切割nginx日志脚本

    shell按日期自动切割nginx日志脚本 参考:自学it网 http://www.zixue.it/. #nginx日志切割脚本 #author:ce #!/bin/bash #设置日志文件存放目录 ...

  5. 清除svn检出导致的所有文件的问号

    问题:将svn项目检出到桌面后,桌面的图标都有问号了,怎么消除这一大堆问号? 解决方案:(1)新建一个a.txt文件,把这行代码复制进去for /r . %%a in (.) do @if exist ...

  6. ci框架——辅助函数

    辅助函数:application/helper下面.命名要求为***_helper.php;这样在调用的时候直接$this->load->helper('***');若想给自定义的辅助函数 ...

  7. hdu3491最小割转最大流+拆点

    题意:求最小割,即求最大流即可.此题之关键为拆点(限制在点),每条边都是双向边,注意一下. 未1A原因:在拆点之后添加边的过程中,要注意,出去的是i`,进来的是i,!!所以,写addegde函数时候 ...

  8. BZOJ——1626: [Usaco2007 Dec]Building Roads 修建道路

    http://www.lydsy.com/JudgeOnline/problem.php?id=1626 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1 ...

  9. 利用jquery实现向左滚动效果及offset的使用

    昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:

  10. open-falcon的插件机制

    Plugin可以看做是对agent功能的扩充.对于业务系统的监控指标采集,最好不要做成plugin,而是把采集脚本放到业务程序发布包中,随着业务代码上线而上线,随着业务代码升级而升级,这样会比较容易管 ...