作者:阿梓喵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:
结果如图:
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
推荐阅读
-
为了实现跨浏览器兼容的禁用文本选择功能,可以通过在全局CSS样式中定义一个特定的类来禁止用户选中文本。具体做法是在全局样式表中添加一个名为 `.no-select` 的类,并在需要禁用文本选择的元素上应用该类。这样可以确保在不同浏览器中都能达到一致的效果。此外,还可以结合JavaScript进一步增强用户体验,例如在某些交互场景下动态启用或禁用文本选择功能。 ...
[详细]
蜡笔小新 2024-11-05 10:04:35
-
本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ...
[详细]
蜡笔小新 2024-11-04 17:57:52
-
-
HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一,因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API,使得Web应用程序能够在浏览器中高效地存储数据,从而提升了应用的性能和用户体验。相较于传统的Cookie机制,Web Storage不仅提供了更大的存储容量,还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用,全面解析HTML5 Web存储技术,帮助读者深入了解其工作原理和应用场景。 ...
[详细]
蜡笔小新 2024-10-26 20:33:04
-
定义Function类型:1functionsum(num1,num2){return
num1+num2;}2varsumfunction(num1,num2){returnn ...
[详细]
蜡笔小新 2024-10-23 18:32:08
-
开发工具WebDeveloper1.1.8https:addons.mozilla.orgen-USfirefoxaddon60以工具栏的形式对网页的(X)HTML、脚本、多媒体、 ...
[详细]
蜡笔小新 2024-10-21 22:03:56
-
文章目录以功能区分布以keycode编号顺序分布简记表使用示例:组合键获取用户按下的键javascript判断是否按回车键屏蔽按键组合健获取键和相应值的js回目录 ...
[详细]
蜡笔小新 2024-10-21 11:27:46
-
在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。 第一种方法:做一个网页解决问题(长了点) 如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自 ...
[详细]
蜡笔小新 2024-10-19 20:17:07
-
这里写目录标题一、text-shadow二、font-face三、其他text常用特性四、column一、text-shadow与box-shadow类似,这里通过 ...
[详细]
蜡笔小新 2024-10-18 12:54:03
-
在我们使用爬虫的过程中,很容易遇到反爬机制是禁用ip的,可以使用代理ip解决ip被封的问题。但是网上ip代理有很多家,到底选哪家好呢 ...
[详细]
蜡笔小新 2024-10-16 20:30:07
-
IIS启用Gzip的方法与优缺点分析是千自学中一篇关于Discuz论坛的文章简介:现代的浏览器IE6和Firefox都支持客户端Gzip,也就是说,在服务器上的网页,传输之前,先使用Gzip压缩再传输给客户端,客户端接收之后由浏览器解压显示,这样虽然稍微占用了一些服务器和客户端的C ...
[详细]
蜡笔小新 2024-10-15 18:00:47
-
先参考一下百度百科对冒泡事件流的解释:----------不喜欢读文字的同学,可以直接看下面demo,传递顺序简单明了!ht ...
[详细]
蜡笔小新 2024-10-14 19:37:55
-
基于 Bottle 框架构建的幽默应用 —— Python 实践 ...
[详细]
蜡笔小新 2024-11-05 10:10:29
-
最近重新拾起了闲置已久的树莓派,这台小巧的开发板已经沉寂了半年多。上个月闲暇时间较多,我决定将其重新启用。恰逢落网电台进行了改版,回忆起之前在树莓派论坛上看到有人用它来播放豆瓣音乐,便萌生了同样的想法。通过一番调试,终于实现了在树莓派上流畅播放落网电台音乐的功能,带来了全新的音乐享受体验。 ...
[详细]
蜡笔小新 2024-11-05 09:20:37
-
本文深入解析了Python在处理HTML过滤时的实现方法及其应用场景。通过具体实例,详细介绍了如何利用Python代码去除HTML字符串中的标签和其他无关信息,确保内容的纯净与安全。此外,文章还探讨了该技术在网页抓取、数据清洗等领域的实际应用,为开发者提供了宝贵的参考。 ...
[详细]
蜡笔小新 2024-11-05 08:23:37
-
vtkGlyph3D 是一种强大的符号化可视化工具,能够将三维数据集中的每个点用预定义的几何图形(如球体或箭头)进行表示。该工具不仅支持自定义符号的方向和缩放比例,还能够在复杂的数据场中突出显示关键特征,从而提高数据的可解释性和可视化效果。通过这种方式,用户可以更直观地理解和分析三维数据集中的重要信息。 ...
[详细]
蜡笔小新 2024-11-04 21:48:22
-