《转》js中event.srcElement和event.target的区别

标签: js event srcelement | 发表时间:2014-01-17 12:23 | 作者:JYY282
出处:http://www.iteye.com

原文链接; http://blog.163.com/[email protected]/blog/static/22418624201112765232486/

Javascript event.srcElement

event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。
注意获取的标记都以大写表示,如"TD","TR","A"等。所以把看过的一些抄下来,不记得的时候再来看看。

<script type="text/javascript">
    function tdclick(){
        if(event.srcElement.tagName.toLowerCase()=='td')
             alert("行:"+(event.srcElement.parentNode.rowIndex+1)+"列:"+(event.srcElement.cellIndex+1));
     }
</script>

event.srcElement从字面上可以看出来有以下关键字:事件,源     他的意思就是:当前事件的源,

我们可以调用他的各种属性 就像:document.getElementById("")这样的功能,

经常有人问 firefox 下的 event.srcElement 怎么用,在此详细说明:

IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:

firefox 下的 event.target = IE 下的 event.srcElement

解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.

以下是几种常见到的情况(IE下测试通过,如要测试firefox下的event.target可以修改并保存代码后用firefox打开测试):


 

event.srcElement.X显示一个控件的各种属性

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒<div id="div_001">

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒     <form id="form_001">

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒         <input type="button" id="button_001_id" name="button_001_Name" value=" 单击查看" class="button_001_Class" onclick="Get_srcElement(this)">

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒     </form>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒</div>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒 js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒<script>...

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒function Get_srcElement()

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒 js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒...{

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒var srcElement=""

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒srcElement = srcElement + " " +   "event.srcElement.id : " + event.srcElement.id

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒srcElement = srcElement + " " +   "event.srcElement.tagName : " + event.srcElement.tagName

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒srcElement = srcElement + " " +   "event.srcElement.type : " + event.srcElement.type

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒srcElement = srcElement + " " +   "event.srcElement.value : " + event.srcElement.value

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒srcElement = srcElement + " " +   "event.srcElement.name : " + event.srcElement.name

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒srcElement = srcElement + " " +   "event.srcElement.className : " + event.srcElement.className

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒srcElement = srcElement + " " +   "event.srcElement.parentElement.id : " + event.srcElement.parentElement.id

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒srcElement = srcElement + " " +   "event.srcElement.getattribute : " + event.srcElement.getAttribute

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒alert(srcElement)

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒}

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒</script>

 


 

event.srcElement.selectedIndex一般使用在select对像上:

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒<select name="selectname" onchange="alert(event.srcElement.options[event.srcElement.selectedIndex].value)" >

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒   <option value="001">1</option>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒   <option value="002">2</option>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒   <option value="003">3</option>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒   <option value="004">4</option>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒   <option value="005">5</option>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒</select> js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒

 


 

第一个子标签为

event.srcElement.firstChild

最后个一个是

event.srcElement.lastChild

当然也可以用

event.srcElement.children[i]

event.srcElement.ChildNode[i]

至于event.srcElement.parentElement是指在鼠标所在对象的上一个对象.

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒<div onclick="Get_srcElement()">

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒<div id="001" style="border:1px solid red;width:100%;height:500px"> <span id="node001">这是第1结点div001<span>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒   <div id="002" style="border:1px solid red;width:80%;height:300px"> <span id="node002">这是第2结点div002<span>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒     <div id="003" style="border:1px solid red;width:50%;height:200px"> <span id="node003">这是第3结点div003<span>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒     </div>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒     <div id="004" style="border:1px solid red;width:50%;height:200px"> <span id="node003">这是第3结点div004<span>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒     </div>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒   </div>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒</div>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒 js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒<script>...

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒function Get_srcElement()

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒 js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒...{

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒var srcElement=""

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒srcElement = srcElement + " " +   "event.srcElement.children[0].tagName: " + event.srcElement.children[0].tagName

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒srcElement = srcElement + " " +   "event.srcElement.firstChild.id : " + event.srcElement.firstChild.id

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒srcElement = srcElement + " " +   "event.srcElement.lastChild.id : " + event.srcElement.lastChild.id

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒alert(srcElement)

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒}

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒</script>

js中event.srcElement和event.target的区别 - 潕葰鈈茬 - 瞬间永恒</div>

*****************************************************************************************************

<div style="border:10px red solid">

<input type="button" value="父元素标签" >

</div>

event.srcElement有关问题- -

                                      

event.srcElement的子标签 和父标签:

第一个子标签为

event.srcElement.firstChild

最后个一个是

event.srcElement.lastChild

当然也可以用

event.srcElement.children[i]

event.srcElement.ChildNode[i]

至于event.srcElement.parentElement是指在鼠标所在对象的上一个对象.

</span>

</body>

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

<input type=button value=GO title="?page=1"

<script language="JavaScript">

function f()

{

alert('index.asp'+event.srcElement.title)

location.href='index.asp'+event.srcElement.title

}

</script>

<a title="a测试" >a测试</a>

<br>

<table border=1 width="200">

<tr title="tr测试" ><td>tr</td></tr>

</table>

<table border=1 width="200">

<tr><td title="td测试" >td</td></tr>

</table>

<select >

<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>



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [js event srcelement] 推荐:

JS的event对象--知识点总结

- - CSDN博客推荐文章
Event描述:event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等. 需要注意的是:event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义. 比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义.

event.target/srcElement一点应用

- - 博客园_首页
今天工作遇到一个问题,在朋友帮助下解决了,写下来跟大家分享下. 首先说下需求,有一个文本框,文本框下面有个隐藏的div,div中有几个a标签,当点击文本框时候,div显示出来,点击div中的a标签,会将a标签的值赋到文本框中. 如图   点击文本框,下面div显示. 点击a标签时候 a标签值赋到文本框中.

什么是 Event Loop?

- - 阮一峰的网络日志
Event Loop 是一个很重要的概念,指的是计算机系统的一种运行机制. JavaScript语言就采用这种机制,来解决单线程运行带来的一些问题. Aaron Cois的 《Understanding The Node.js Event Loop》,解释什么是Event Loop,以及它与JavaScript语言的单线程模型有何关系.

80%人都理解错误的 Event Loop

- - IT瘾-dev
本文的目的在于,一次性推翻80%人构建好的关于Event Loop的知识体系和一次性的完整的理解Nodejs(13以上)和浏览器中的Event Loop. 首先进行一下基础概念的划分. mouseover(之类的事件). Web API大部分异步返回方法(XHR,fetch). 逗知识:其实setTimeout和setInterval也属于Web API.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JavaScript 运行机制详解:再谈Event Loop

- - 阮一峰的网络日志
一年前,我写了一篇 《什么是 Event Loop. 》,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts的演讲 《Help, I'm stuck in an event-loop》. 这才尴尬地发现,自己的理解是错的. 我决定重写这个题目,详细、完整、正确地描述JavaScript引擎的内部运行机制.

CQRS基本概念 | event sourcing | CQRS | axon | EdisonXu的技术分享

- -
在研究微服务的过程中,跨服务的操作处理,尤其是带有事务性需要统一commit或rollback的,是比较麻烦的. 本系列记录了我在研究这一过程中的心得体会. 本篇主要就以下几个问题进行介绍:. 什么是EventSourcing. EventSourcing和CQRS的关系. CQRS/ES怎么解决微服务的难题.

Axon Saga的使用 | event sourcing | CQRS | axon | DDD | EdisonXu的技术分享

- -
在上一篇里面,我们正式的使用了CQRS模式完成了AXON的第一个真正的例子,但是细心的朋友会发现一个问题,创建订单时并没有检查商品库存. 库存是否足够直接回导致订单状态的成功与否,在并发时可能还会出现超卖. 当库存不足时还需要回滚订单,所以这里出现了复杂的跨Aggregate事务问题. Saga就是为解决这里复杂流程而生的.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.