技海泛舟(个人技术研究)

  • 首页
  • 日积月累
  • 学习计划
  • 随想
  • project
  • 关于
技海泛舟
一个技术宅的博客
  1. 首页
  2. 日积月累
  3. JavaScript
  4. 正文

event对象的srcElement属性、target属性

2021年12月7日 1523点热度

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

<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> 
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 暂无
最后更新:2021年12月7日
< 上一篇
下一篇 >
归档
  • 2024 年 11 月
  • 2024 年 8 月
  • 2024 年 5 月
  • 2024 年 2 月
  • 2023 年 12 月
  • 2023 年 11 月
  • 2023 年 9 月
  • 2023 年 6 月
  • 2022 年 12 月
  • 2022 年 11 月
  • 2022 年 10 月
  • 2022 年 9 月
  • 2022 年 8 月
  • 2022 年 7 月
  • 2022 年 6 月
  • 2022 年 5 月
  • 2022 年 4 月
  • 2022 年 3 月
  • 2022 年 2 月
  • 2022 年 1 月
  • 2021 年 12 月
  • 2021 年 11 月
  • 2021 年 10 月
  • 2021 年 5 月
分类
  • Android
  • Arduino
  • cordova
  • css
  • go
  • html5
  • JavaScript
  • nodejs
  • oracle
  • project
  • system
  • uni-app
  • vscode
  • vue
  • 学习计划
  • 摘抄
  • 随想

COPYRIGHT © 技海泛舟(个人技术研究). 2021-2023. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

蜀ICP备2026065271号-1

蜀公网安备XXXXX号