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> <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详解
-
js中的触发事件对象event.srcElement与event.target详解
-
详解JavaScript中js对象与JSON格式字符串的相互转换
-
JS与Node.js中的事件循环详解
-
js的自定义dataset对象 ,js操作css, js中事件的添加与删除
-
详解JavaScript中js对象与JSON格式字符串的相互转换
-
原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX
-
js的自定义dataset对象 ,js操作css, js中事件的添加与删除
-
js中事件的处理与浏览器对象示例介绍_javascript技巧
-
JS与Node.js中的事件循环详解