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

Javascript
javascript 新浪背投广告实现代码
javascript 选择文件夹对话框(web)
JS 自动完成 AutoComplete(Ajax 查询)
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
jQuery 插件开发 其实很简单
最简单的jQuery程序 入门者学习
javascript 读取xml,写入xml 实现代码
JQuery 实现的页面滚动时浮动窗口控件
javascript 动态加载 css 方法总结
javascript 表格左右收缩
jqurey 学习笔记 传智博客佟老师附详细注释
javascript dom 操作详解 js加强
JS 动态添加列表框项效果代码
Javascript 事件流和事件绑定
Google Map Api和GOOGLE Search Api整合实现代码
9个javascript语法高亮插件 推荐
Prototype String对象 学习
javascript ImgBox透明遮罩层背景图片展示
javascript FAQ函数(提问+回复)
jQuery TextBox自动完成条

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 206 ::
收藏到网摘: 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