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( ...
随机推荐
- 【HDOJ6354】Everything Has Changed（计算几何）
题意: 给定一个平面和一个(0,0)为中心的大圆,有n个小圆保证没有两两之间相交与覆盖整个大圆的情况,求小圆覆盖后大圆的周长并 1≤m≤100, -1e3<=x[i],y[i]<=1e3, ...
- msp430项目编程36
msp430中项目---sd接口编程36 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结
- ORACLE RMAN增量备份经典理解
http://blog.itpub.net/26118480/viewspace-1793548/
- idea修改变量及其引用
idea 修改某一变量及其引用 选中变量 shift+f6(shift+fn+f6), ctrl+R的当前页面全局替换, ctrl+shift+R 项目中的全局替换
- T1230 元素查找 codevs
http://codevs.cn/problem/1230/ 题目描述 Description 给出n个正整数,然后有m个询问,每个询问一个整数,询问该整数是否在n个正整数中出现过. 输入描述 In ...
- IT部门的KPI该如何制定？
导语:信息化成本.系统开机率.网路不断线时数.系统运行速度.软件开发时间.用户问题处理反应时间.系统品质.用户满意度--哪些指标是可被管理的,能指引IT部门成为一个有价值的.为企业带来效益的部门呢? ...
- 【数据库摘要】6_Sql_Inner_Join
INNER JOIN 操作符 INNER JOIN keyword在表中存在至少一个匹配时返回行. SQL INNER JOIN 语法 SELECT column_name(s) FROM table ...
- JAVA_MyEclipse如何加载Tomcat
注意Tomcat不要放到Program Files这种有空格的路径下面!,下图所示是错误的
- 嵌入式学习笔记(综合提高篇 第一章) -- 利用串口点亮/关闭LED灯
1 前言 从踏入嵌入式行业到现在已经过去了4年多,参与开发过的产品不少,有交换机.光端机以及光纤收发器,停车场出入缴费系统,二维码扫码枪,智能指纹锁以及数字IC芯片开发等; 涉及产品中中既有 ...
- Linux变量内容的删除、代替与替换
变量内容的删除与代替 范例一:先让小写的 path 自己定义变量配置的与 PATH 内容同样 [root@www ~]# path=${PATH} [root@www ~]# echo $path / ...