js中的触发事件对象event.srcElement与event.target详解


Posted in Javascript onMarch 15, 2017

介绍

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="/" rel="external nofollow" onmouseover="alert(event.srcElement.parentElement.tagName);">放在我上面</a>
         //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)
}
</script>

结果如图:

js中的触发事件对象event.srcElement与event.target详解

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery validate使用攻略 第四步
Jul 01 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
jQuery动态产生select option下拉列表
Mar 15 #Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 #Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 #Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 #Javascript
利用vue.js插入dom节点的方法
Mar 15 #Javascript
js实现彩色条纹滚动条效果
Mar 15 #Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 #Javascript
You might like
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
JavaScript 学习技巧
2010/02/17 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
python3字符串输出常见面试题总结
2020/12/01 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
2014大学生全国两会学习心得体会
2014/03/13 职场文书
优秀员工演讲稿
2014/05/19 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
怎样写离婚协议书
2014/09/10 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
务虚会发言材料
2014/12/25 职场文书
2015国庆节宣传语
2015/07/14 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
mysql中整数数据类型tinyint详解
2021/12/06 MySQL