event.srcElement 用法笔记e.target


Posted in Javascript onDecember 18, 2009

注意获取的标记都以大写表示,如"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>
代码参考:
https://3water.com/article/566.htm
Javascript 相关文章推荐
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
Javascript document.referrer判断访客来源网址
May 15 #Javascript
Javascript 中介者模式实例
Dec 16 #Javascript
js textarea自动增高并隐藏滚动条
Dec 16 #Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 #Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 #Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 #Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 #Javascript
You might like
杏林同学录(一)
2006/10/09 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python中PIL安装简单教程
2016/04/21 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
python生成圆形图片的方法
2020/03/25 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
浅析Python 条件控制语句
2020/07/15 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
基督教婚礼主持词
2014/03/14 职场文书
学生会竞聘书范文
2014/03/31 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
2015年教师节慰问信
2015/03/23 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书