当前位置: 首页 > 图文教程 > 网络编程 > Javascript > event.srcElement 用法笔记e.target

Javascript
JavaScript 序列化对象实现代码
替代window.event.srcElement效果的可兼容性的函数
div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容
IE和Firefox下event事件杂谈
javascript option onclick事件ie解决方案 兼容ie,firefox
javascript demo 基本技巧
用js实现层随着内容大小动态渐变改变 推荐
JS 的应用开发初探(mootools)
JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法)
JQuery Tips(4) 一些关于提高JQuery性能的Tips
jQuery 淡入淡出、展开收缩菜单实现代码
js控制div及网页相关属性的代码
javascript 翻页测试页(动态创建标签并自动翻页)
Js获取table当前tr行的值的代码
IE 上下滚动展示模仿Marquee机制
jQuery解决iframe高度自适应代码
jQuery 连续列表实现代码
利用jQuery的$.event.fix函数统一浏览器event事件处理
Javascript和Ajax中文乱码吐血版解决方案
js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE

Javascript 中的 event.srcElement 用法笔记e.target


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 122 ::
收藏到网摘: n/a

event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。 注意获取的标记都以大写表示,如"TD","TR","A"等。所以把看过的一些抄下来,不记得的时候再来看看。
复制代码 代码如下:

<script type="text/javascript">
function tdclick(){
if(event.srcElement.tagName.toLowerCase()=='td')
alert("行:"+(event.srcElement.parentNode.rowIndex+1)+"列:"+(event.srcElement.cellIndex+1));
}
</script>

event.srcElement从字面上可以看出来有以下关键字:事件,源 他的意思就是:当前事件的源,
我们可以调用他的各种属性 就像:document.getElementById("")这样的功能,
经常有人问 firefox 下的 event.srcElement 怎么用,在此详细说明:
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:
firefox 下的 event.target = IE 下的 event.srcElement
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
以下是几种常见到的情况(IE下测试通过,如要测试firefox下的event.target可以修改并保存代码后用firefox打开测试):
event.srcElement.X显示一个控件的各种属性
复制代码 代码如下:

<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 = srcElement + " " + "event.srcElement.id : " + event.srcElement.id
srcElement = srcElement + " " + "event.srcElement.tagName : " + event.srcElement.tagName
srcElement = srcElement + " " + "event.srcElement.type : " + event.srcElement.type
srcElement = srcElement + " " + "event.srcElement.value : " + event.srcElement.value
srcElement = srcElement + " " + "event.srcElement.name : " + event.srcElement.name
srcElement = srcElement + " " + "event.srcElement.className : " + event.srcElement.className
srcElement = srcElement + " " + "event.srcElement.parentElement.id : " + event.srcElement.parentElement.id
srcElement = srcElement + " " + "event.srcElement.getattribute : " + event.srcElement.getAttribute
alert(srcElement)
}
</script>

event.srcElement.selectedIndex一般使用在select对像上:
复制代码 代码如下:

<select name="selectname" onchange="alert(event.srcElement.options[event.srcElement.selectedIndex].value)" >
<option value="001">1</option>
<option value="002">2</option>
<option value="003">3</option>
<option value="004">4</option>
<option value="005">5</option>
</select>

第一个子标签为
event.srcElement.firstChild
最后个一个是
event.srcElement.lastChild
当然也可以用
event.srcElement.children[i]
event.srcElement.ChildNode[i]
至于event.srcElement.parentElement是指在鼠标所在对象的上一个对象.
复制代码 代码如下:

<div onclick="Get_srcElement()">
<div id="001" style="border:1px solid red;width:100%;height:500px"> <span id="node001">这是第1结点div001<span>
<div id="002" style="border:1px solid red;width:80%;height:300px"> <span id="node002">这是第2结点div002<span>
<div id="003" style="border:1px solid red;width:50%;height:200px"> <span id="node003">这是第3结点div003<span>
</div>
<div id="004" style="border:1px solid red;width:50%;height:200px"> <span id="node003">这是第3结点div004<span>
</div>
</div>
</div>
<script>
function Get_srcElement()
{
var srcElement=""
srcElement = srcElement + " " + "event.srcElement.children[0].tagName: " + event.srcElement.children[0].tagName
srcElement = srcElement + " " + "event.srcElement.firstChild.id : " + event.srcElement.firstChild.id
srcElement = srcElement + " " + "event.srcElement.lastChild.id : " + event.srcElement.lastChild.id
alert(srcElement)
}
</script>
</div>
<div style="border:10px red solid">
<input type="button" value="父元素标签" >
</div>

event.srcElement有关问题- -
event.srcElement的子标签 和父标签:
第一个子标签为
event.srcElement.firstChild
最后个一个是
event.srcElement.lastChild
当然也可以用
event.srcElement.children[i]
event.srcElement.ChildNode[i]
至于event.srcElement.parentElement是指在鼠标所在对象的上一个对象.
<input type=button value=GO title="?page=1">
<script language="JavaScript">
function f()
{
alert('index.asp'+event.srcElement.title)
location.href='index.asp'+event.srcElement.title
}
</script>
<a title="a测试" >a测试</a>
<br>
<table border=1 width="200">
<tr title="tr测试" ><td>tr</td></tr>
</table>
<table border=1 width="200">
<tr><td title="td测试" >td</td></tr>
</table>
<select >
<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>
代码参考:
http://www.ruanchen.com/rticle/566.htm