`
JYY282
  • 浏览: 24576 次
  • 性别: Icon_minigender_2
  • 来自: 无锡
社区版块
存档分类
最新评论

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

 
阅读更多

原文链接;http://blog.163.com/zjlovety@126/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>

分享到:
评论

相关推荐

    event和srcElement说明,方法,技巧

    ### event和srcElement详解 #### 一、概述 在Web开发中,事件处理是非常重要的一个环节,它使得页面能够响应用户的交互行为。`event`对象是JavaScript中的一个重要对象,用于捕获用户或浏览器的动作,例如点击按钮...

    js中的触发事件对象event.srcElement与event.target详解

    总的来说,event.srcElement和event.target在JavaScript中是非常有用的属性,可以帮助我们获取触发事件的源元素,进而对这些元素进行进一步的操作,比如获取元素的属性、修改样式等。通过它们,我们可以实现对元素更...

    event.srcElement 用法笔记e.target

    `event.srcElement` 是在JavaScript中处理DOM事件时的一个属性,主要用于获取触发事件的元素。这个属性在Internet Explorer浏览器中被广泛使用,而Firefox和其他遵循W3C标准的浏览器则使用`event.target`来达到相同...

    替代window.event.srcElement效果的可兼容性的函数

    在JavaScript编程中,特别是在处理事件时,`window.event` 是一个内置对象,它提供了与当前事件相关的各种信息,如事件的目标元素(`event.srcElement` 在IE中,`event.target` 在非IE浏览器中)。然而,`window....

    IE event.srcElement和FF event.target 功能比较

    在JavaScript事件处理中,`event.srcElement` 是 Internet Explorer 浏览器特有的属性,用于获取事件发生时的源元素,而 `event.target` 是在 Firefox、Chrome、Safari 和其他遵循 W3C 规范的浏览器中使用,作用相同...

    js事件源window.event.srcElement兼容性写法(详解)

    总结来说,JavaScript的事件源处理涉及到浏览器兼容性问题,开发者需要理解`window.event.srcElement`(IE特有)和`event.target`(W3C标准)的区别,并使用适当的兼容性解决方案来确保代码在不同浏览器下都能正常...

    JS中的THIS和WINDOW.EVENT.SRCELEMENT详解

    在JavaScript编程中,`this`关键字和`window.event.srcElement`是两个非常重要的概念,它们在事件处理和函数上下文管理中扮演着重要的角色。对于JavaScript的初学者来说,理解这两个概念是十分必要的,因为这不仅...

    window.event.srcElement 得到事件源对象

    虽然在标准的DOM事件模型中,这个属性被`event.target`所替代,但在兼容旧版IE(尤其是IE8及以下版本)的代码中,`srcElement`仍然是一个实用的属性。 `window.event` 是IE浏览器特有的全局事件对象,它包含了与...

    parentElement,srcElement的使用小结

    在JavaScript中,`parentElement` 和 `srcElement` 是与事件处理有关的两个属性,它们在处理DOM元素和事件流时非常有用。本文将详细解释这两个属性以及它们在实际应用场景中的使用。 首先,`parentElement` 是一个...

    JavaScript兼容浏览器FFIE技巧[定义].pdf

    - IE中的event.srcElement对应FF中的event.target。解决方案:`var obj = event.srcElement ? event.srcElement : event.target;` 4. **事件目标(toElement)**: - 解决方法:`var target = e.relatedTarget ||...

    javascript快捷键

    根据提供的文件信息,我们可以分析并总结出与“javascript快捷键”相关的知识点,这些知识点主要集中在如何使用JavaScript来创建和管理快捷键功能上。 ### JavaScript快捷键实现原理 在Web开发中,有时候我们需要...

    Javascript之event大全

    了解和熟练掌握JavaScript中的Event机制对于开发响应式和交互式的Web应用至关重要。通过监听和处理各种事件,开发者可以创建丰富的用户体验,如动态更新内容、响应用户输入、实现动画效果等。在实际开发中,还可以...

    HTML在IE浏览器和FF浏览器中标签的使用

    - **event.srcElement与event.target**:IE使用srcElement,FF使用target。使用`obj = event.srcElement ? event.srcElement : event.target`进行兼容。 - **event.toElement与relatedTarget**:IE有toElement,FF...

    同时兼容IE和FireFox的事件处理event代码--添加文件上传例子

    在事件处理函数中,`event`对象包含`target`属性,可以获取触发事件的元素,以及`files`属性,存储了用户选择的所有文件。例如: ```javascript document.getElementById('fileInput').addEventListener('change',...

    [JS]详尽解析window.event对象

    除了上述属性,`window.event`对象还包含其他属性,如`shiftKey`(检查Shift键状态)、`srcElement`(触发事件的元素,IE中等同于`target`)和`type`(事件类型),以及一些与鼠标和键盘交互相关的属性,如`offsetX`...

    javascript兼容性解决方法大全

    对于`event.srcElement`和`event.target`,IE和FF各有自己的实现。在IE下,可以使用`event.srcElement`获取触发事件的元素,而在FF下则是`event.target`。为实现兼容,可以使用如下代码: ```javascript var target...

Global site tag (gtag.js) - Google Analytics