js中的触发事件对象event.srcElement与event.target详解 - 行业资讯

<强>介绍

IE下,事件对象有srcElement属性,但是没有目标属性;

Firefox下,事件对象有目标属性,但是没有srcElement属性。但他们的作用是相当的,即:

　　<代码>

火狐下的事件。目标代码=IE下的<代码> event.srcElement

<>强解决方法

使用<代码> obj=事件。srcElement & # 63;事件。srcElement: event.target;

或<代码> var evtTarget=事件。目标| | 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> event.srcElement.firstChild.value> 　　

<代码> event.srcElement.parentElement> 　　

<代码> event.srcElement.children> event.srcElement。孩子们[0]与<代码> event.srcElement.children[1]> 　　

<强>常用如下:

, <代码> event.srcElement.parentNode.tagName;

　　　　　　& lt; div> 　　& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/父元素标签”比; 　　& lt;/div>之前　　　　

结果:DIV

第一个子标签为<代码> event.srcElement.firstChild

最后个一个是,,<代码> event.srcElement.lastChild

当然也可以用,,<代码> event.srcElement。孩子(我),<代码> event.srcElement.ChildNode[我]

2, <代码> event.srcElement.parentElement> 　　　　=1 & lt;表边界宽度=" 200 "比; 　　& lt; tr title=皌r测试“祝辞& lt; td> tr & lt;/tr> 　　& lt;/table> 　　　　

3 <代码> event.srcElement。tagName> 　　

, <代码> event.srcElement。标题> 　　

, <代码> event.srcElement.options [event.srcElement.selectedIndex] value

　　例1:

　　　　　　& lt;选择name=" selectname比; 　　& lt;选项值=" https://www.yisu.com/zixun/1- "祝辞1 & lt;/option> 　　& lt;选项值=" https://www.yisu.com/zixun/2- "祝辞2 & lt;/option> 　　& lt;选项值=" https://www.yisu.com/zixun/3- "祝辞3 & lt;/option> 　　& lt;选项值=" https://www.yisu.com/zixun/4- "祝辞4 & lt;/option> 　　& lt;选项值=" https://www.yisu.com/zixun/5- "祝辞5 & lt;/option> 　　& lt;/select>之前　　　　例2:

　　　　　　& lt; script> 　　函数(){ 　　警报(“您点击的标记是:”+ event.srcElement.tagName) 　　} 　　& lt;/script> 　　　　& lt; body> 　　点鼠标测试& lt; br>//身体　　& lt;输入值=' https://www.yisu.com/zixun/test输入/比;//输入　　& lt; a href=https://www.yisu.com/zixun/> //测试　　

测试div

//div 　　

测试p

//p 　　测试跨
//