作者:阿梓喵1995 | 来源:互联网 | 2022-03-10 21:13
这篇文章主要给大家介绍了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
第一个子标签为 event.srcElement.firstChild
最后个一个是 event.srcElement.lastChild
当然也可以用 event.srcElement.children[i]
, event.srcElement.ChildNode[i]
2、event.srcElement.parentElement
是指在鼠标所在对象的上一个对象
3、event.srcElement.tagName
得到点击位置的标签名称
4、event.srcElement.title
得到当前标签title属性值
5、event.srcElement.options[event.srcElement.selectedIndex].value
例1:
例2:
点鼠标测试
//BODY
//INPUT
test //A
测试div
//DIV
测试p
//P
测试span
//SPAN
例3:
结果如图:
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
推荐阅读
-
蜡笔小新 2024-11-20 14:27:32
-
本文介绍了如何通过调整Mozilla Firefox的高级设置来控制GIF动画的播放次数,帮助用户根据个人喜好自定义浏览体验。 ...
[详细]
蜡笔小新 2024-11-19 19:36:54
-
-
本文详细记录了腾讯ABS云平台的一次前端开发岗位面试经历,包括面试过程中遇到的JavaScript相关问题、Vue.js等框架的深入探讨以及算法挑战等内容。 ...
[详细]
蜡笔小新 2024-11-19 12:59:38
-
本文详细介绍了如何使用 CSS3 的 background-clip 和 background-origin 属性来裁剪和定位背景图片,以及如何通过 background-size 控制背景图片的尺寸。 ...
[详细]
蜡笔小新 2024-11-16 17:57:57
-
蜡笔小新 2024-11-16 16:05:59
-
如何保障视频内容的安全,不被盗链、非法下载和传播,阿里云视频点播已经有一套完善的机 ...
[详细]
蜡笔小新 2024-11-15 18:04:15
-
蜡笔小新 2024-11-14 16:26:25
-
本文将详细介绍HTML5中新增的字符集属性charset和defaultCharset,帮助开发者更好地理解和应用这些属性,以确保网页在不同环境下的正确显示。 ...
[详细]
蜡笔小新 2024-11-13 11:09:46
-
浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ...
[详细]
蜡笔小新 2024-11-11 13:34:37
-
2017年5月2日,微软在美国推出了最新的Windows 10 S操作系统,专为教育领域设计,旨在为教师和学生提供一系列高效的产品和服务。该系统的最大特点是其简洁的设计和快速的响应速度,然而在与某些应用的兼容性方面,特别是Chrome浏览器,仍存在一些问题。本文将深入分析这些兼容性问题,并探讨可能的解决方案。 ...
[详细]
蜡笔小新 2024-11-09 23:50:49
-
本文全面介绍了HTML的基础知识和Dreamweaver CS5的使用技巧。HTML(超文本标记语言)是一种用于创建网页的标准标记语言,具备严格的语法规则,能够实现比纯文本更丰富的信息展示。文章不仅涵盖了HTML的基本概念和语法结构,还详细讲解了如何利用Dreamweaver CS5进行高效、专业的网页设计与开发。通过实例操作和实用技巧,读者将能够快速掌握HTML的核心技能,并在实际项目中灵活应用。 ...
[详细]
蜡笔小新 2024-11-09 14:38:04
-
为了优化用户体验,本文探讨了如何调整下拉菜单的宽度。通过合理设置宽度,可以提升界面的美观性和易用性。文章提供了具体的代码示例,帮助开发者实现这一目标。例如,可以通过 CSS 或 JavaScript 来动态调整下拉菜单的宽度,确保其在不同设备和屏幕尺寸上都能保持良好的显示效果。 ...
[详细]
蜡笔小新 2024-11-08 18:27:10
-
通过合理利用Hackbar插件,可以显著提升网页调试的效率。本文介绍了如何获取并使用未包含收费功能的2.1.3版本,以确保在不升级到最新2.2.2版本的情况下,依然能够高效进行网页调试。此外,文章还提供了详细的使用技巧和常见问题解决方案,帮助开发者更好地掌握这一工具。 ...
[详细]
蜡笔小新 2024-11-06 15:41:47
-
本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ...
[详细]
蜡笔小新 2024-11-06 13:30:57
-
本文推荐了七款高效的编辑器与笔记工具,并详细解析了KindEditor的自动换行功能。其中,轻笔记QingBiJi是一款完全免费的记事本软件,用户可以通过其简洁的界面和强大的功能轻松记录和管理日常事务。此外,该软件还支持多平台同步,确保用户在不同设备间无缝切换。 ...
[详细]
蜡笔小新 2024-11-06 11:14:53
-