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( ...
随机推荐
- 「CodePlus 2018 4 月赛」最短路
$n \leq 100000$,$m \leq 500000$的有向图,两点之间还可以以$a \ \ xor \ \ b$的代价从$a$到$b$,问$s$到$t$的最短路. 被自己蠢哭QAQ 首先两个 ...
- Maven单元测试
// SKU码:系列前3位+6位年月日+3位序号(自动生产,取数据库中当天最大的,没有就赋值位001) // 订单编号:BRD+6位年月日+5位序号 // // 退单号:BRT+6位年月日+3位序号 ...
- Oracle 实现 一个关键字 匹配多个 字段
有这么一个需求,满足只有一个输入框的条件下,支持不同数据列的搜索结果. 说白了,就是这个 输入框 既可以用来 搜索姓名,也可以搜索 年龄,地址等. 分析: 一般情况下,我们的一个输入框对应 数据库 ...
- 用canal监控binlog并实现mysql定制同步数据的功能
业务背景 写任何工具都不能脱离实际业务的背景.开始这个项目的时候是因为现有的项目中数据分布太零碎,零零散散的分布在好几个数据库中,没有统一的数据库来收集这些数据.这种情况下想做一个大而全的会员中心系统 ...
- uiimage缩放图片大小和属性UIViewContentModeScaleAspectFit
UIImageView *tmp = [[UIImageView alloc]initWithFrame:CGRectMake(5.0f, 5.0f, 40.0f, 40.0f)]; ...
- MVC Html.AntiForgeryToken() 防止CSRF攻击 - CSDN博客
原文:MVC Html.AntiForgeryToken() 防止CSRF攻击 - CSDN博客 (一)MVC Html.AntiForgeryToken() 防止CSRF攻击 MVC中的Html.A ...
- html+vlc 播放多视频
html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- jQuery开发之Ajax
1.load()方法 (1)load()方法是jQuery中最经常使用和最简单的Ajax方法,能载入远程HTML代码,并插入代码中. 它的结构为: load(url [,data] [,callbac ...
- Android studio 升级，不用下载完整版，完美更新到2.0
Android studio 2.0 公布已有一旦时间,据说,速度大大提高了.但是一直没有尝试更新,看到大家相继更新,所以迫不及待就准备更新,但是.更新之路确实异常坎坷.询问度娘,千奇百怪的问题接憧而 ...
- 从头学起-CLR的执行模型
1.将源代码编译成托管代码 公共运行时(Common Language Runtime) a.面向运行时的所有语言都可以通过异常报告错误 b.面向运行时的所有语言都可以创建线程 c.核心功能:管理内存 ...