JS基础篇--JS的event.srcElement与event.target（触发事件对象）
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（触发事件对象）的更多相关文章
- JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
$(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...
- 前端面试题目汇总摘录（JS 基础篇）
JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...
- js的event.srcElement与event.target（触发事件对象）
IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...
- 前端总结·基础篇·JS（一）五大数据类型之字符串（String）
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(二)补充 前端总结·基础篇·JS(一)五大数据类型之字符串(String) 目录 这是& ...
- 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）
目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...
- 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 前端总结·基础篇·JS（四）异步请求及跨域方案
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String）
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- JS基础篇--sort()方法的用法，参数以及排序原理
JS基础篇--sort()方法的用法,参数以及排序原理 sort() 方法用于对数组的元素进行排序,并返回数组.默认排序顺序是根据字符串Unicode码点.语法:arrayObject.sort( ...
随机推荐
- AXMLPrinter2.jar反编译xml文件
apk里的AndroidManifest.xml 为二进制文件,可通过AXMLPrinter2.jar包反编译出来 cmd命令行运行一下命令: java -jar AXMLPrinter2.jar A ...
- 跳蚤 BZOJ 4310
跳蚤 [问题描述] 很久很久以前,森林里住着一群跳蚤.一天,跳蚤国王得到了一个神秘的字符串,它想进行研究. 首先,他会把串分成不超过 k 个子串,然后对于每个子串 S,他会从S的所有子串中选择字典序最 ...
- 标准C程序设计七---17
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- R语言入门--画图（一）--需要注意的地方
一.注意‘\t’是‘\t’ 不是‘/t’ 写'/t'就错了 就不是换行符了 二.程序报错先检查有没有这个包
- Spring 定时器 定时访问数据库并发送邮件
我这里有两个案例的方法: 第一种:使用Spring quartz: 我这里使用的jar:spring-context-support.jar.quartz-1.6.5.jar ============ ...
- npm 安装vue-cli
TIP:win10下安装,使用管理员身份进行,否则会有权限限制. 1,安装完成node,node有自带的npm,可以直接在cmd中,找到nodeJs安装的路径下,进行命令行全局安装vue-cli.(n ...
- codeforces Gym 101572 I 有向图最小环路径
题目链接 http://codeforces.com/gym/101572 题意 一共n个文件 存在依赖关系 根据给出的依赖关系 判断是否存在循环依赖 ,不存在的话输出SHIP IT,存在的话 ...
- Oracle 实现 一个关键字 匹配多个 字段
有这么一个需求,满足只有一个输入框的条件下,支持不同数据列的搜索结果. 说白了,就是这个 输入框 既可以用来 搜索姓名,也可以搜索 年龄,地址等. 分析: 一般情况下,我们的一个输入框对应 数据库 ...
- 3.JAVA语言基础部分—Class类与反射
什么是Java反射机制? JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法:这种动态获取的以及动态调用对象的方法的功能称为 ...
- PostgreSQL SystemTap on Linux
http://digoal126.wap.blog.163.com/w2/blogDetail.do;jsessionid=3949B03DE151DA0E55D807466C5E630B.yqblo ...