这个vs event.scrElement [英] this vs event.scrElement
问题描述
我已经尝试了一个关于Event Listener API的测试代码，但是我有一些关于分离使用IE触发事件的元素的问题。这是我的
代码：
< html>
< head>
< style type =" text / css">
..cliccabile {background-color：#FFCCCC; cursor：pointer;}
..testo {color：＃009966;}
< / style>
< / head>
< body>
< div id =" tabella">
< table id =" DOMtable">
< tr>
< td id =" a" class =" cliccabile"> clicca qui 0< / td>
< td id =" b" class =" cliccabile">< span id =" d" class =" testo"> clicca qui
1< / span>< / td>
< / tr>
< ; / table>
< / div>
< script type =" text / javascript">
<！ - -
函数dump_props（obj，obj_name）{
var result ="" ;;
for（var i in obj）
结果+ = obj_name +"。 + i + = + obj [i] +"< br />" ;;
结果+ ="< hr />" ;;
返回结果;
}
函数fun（evt）{
if（this.className ==" cliccabile"）//浏览器标准
window.alert（" this" + this.id）;
else if（evt.srcElement.className ==" cliccabile"）// microsoft IE
window.alert（" evt.srcElement" + evt.srcElement.id）;
document.write（dump_props（this，" this"）+ dump_props（evt.srcElement，" evt.srcElement"））;
}
if（document.getElementById（" a"）。addEventListener） {//浏览器标准
document.getElementById（" a"）。addEventListener（''cli ck''，fun，false）;
document.getElementById（" ; b"）。addEventListener（''cli ck''，fun，false）;
} else if（document.getElementById（" a"）。attachEvent）{// microsoft IE
document.getElementById（" ; a"）。attachEvent（''onclick''，fun）;
document.getElementById（" b"）。attachEvent（''onclick''，fun）;
}
// - >
< / script>
< / body>
< / html>
当我使用IE点击id = b的元素时，它会转储窗口对象
由此和span对象evt.srcElement。
在这种情况下你知道一个替代方案吗？
谢谢
fusillo
Hi, i''ve tried a test code about the Event Listener API but i''ve some
problem about detaching the element firing the event with IE. Here''s my
code:
<html>
<head>
<style type="text/css">
..cliccabile {background-color: #FFCCCC; cursor:pointer;}
..testo {color: #009966;}
</style>
</head>
<body>
<div id="tabella">
<table id="DOMtable">
<tr>
<td id="a" class="cliccabile">clicca qui 0</td>
<td id="b" class="cliccabile"><span id="d" class="testo">clicca qui
1</span></td>
</tr>
</table>
</div>
<script type="text/javascript">
<!--
function dump_props(obj, obj_name) {
var result = "";
for (var i in obj)
result += obj_name + "." + i + " = " + obj[i] + "<br />";
result += "<hr />";
return result;
}
function fun(evt){
if (this.className=="cliccabile") //browser standard
window.alert("this "+this.id);
else if (evt.srcElement.className=="cliccabile") //microsoft IE
window.alert("evt.srcElement "+evt.srcElement.id);
document.write(dump_props(this,"this")+dump_props( evt.srcElement,"evt.srcElement"));
}
if (document.getElementById("a").addEventListener){ //browser standard
document.getElementById("a").addEventListener(''cli ck'',fun,false);
document.getElementById("b").addEventListener(''cli ck'',fun,false);
}else if (document.getElementById("a").attachEvent){ //microsoft IE
document.getElementById("a").attachEvent(''onclick'' ,fun);
document.getElementById("b").attachEvent(''onclick'' ,fun);
}
// -->
</script>
</body>
</html>
When I click the element with id=b using IE it dumps the window object
by this and the span object by evt.srcElement.
Do you know an alternative to this in that case?
Thanks
fusillo
推荐答案
这是我的问题的可能解决方案：
< td id =" b" ; class =" testo cliccabile"> clicca qui 1< / td>
function fun（evt）{
if（evt.srcElement&& ;
evt.srcElement.className.indexOf（" cliccabile"）> -1）// microsoft IE
window.alert（" evt.srcElement" + evt.srcElement.id）;
else if（this.className&& this.className.indexOf（" cliccabile"）> -1）
//浏览器标准
window.alert（" this" + this.id）;
document.write（dump_props（this，" this"）+ dump_props （evt.srcElement，" evt.srcElement"））;
}
Here''s a possible solution for my problem:
<td id="b" class="testo cliccabile">clicca qui 1</td>
function fun(evt){
if (evt.srcElement &&
evt.srcElement.className.indexOf("cliccabile")>-1) //microsoft IE
window.alert("evt.srcElement "+evt.srcElement.id);
else if (this.className && this.className.indexOf("cliccabile")>-1)
//browser standard
window.alert("this "+this.id);
document.write(dump_props(this,"this")+dump_props( evt.srcElement,"evt.srcElement"));
}
On 26/05/2006 02:56，fusillo写道：
[snip]
虽然我发现你发布的只是一个例子，但有一些
标记的问题，你可能不知道。
On 26/05/2006 02:56, fusillo wrote:
[snip]
Whilst I realise that what you posted is just an example, there are some
issues with the markup, of which you may not be aware.
< html>
HTML文档应该有一个文档类型声明（DOCTYPE），现在应该是严格的
。
< head>
< style type =" text / css">
.cliccabile {background-color：#FFCCCC; cursor：pointer;}
.testo {color：＃009966;}
指定前景色时，背景颜色通常应为
be与之配对（反之亦然）。此外，一旦你设置了一种颜色
组合，你应该将它们全部设置（例如链接颜色）[1]。
这绝对是一个错误假设有人使用与您相同的
默认颜色。考虑一个具有桌面主题的访问者，这是一个黑暗的光线（与通常的黑暗光照相反）。如果你设置一个苍白的
背景，覆盖它们的默认黑暗背景，但假设它们的
前景颜色是黑色的，这不是，你将拥有它
使文档无法读取。
[snip]
< div id =" tabella">
这个div元素似乎是不必要的......
< table id =" DOMtable">
....而且只有一行（或一列）的表元素总是
怀疑。表格应该用于包含表格数据，仅此而已。
[snip]
< script type =" text / javascript">
<！ -
''隐藏''脚本元素的内容多年来一直没必要。
[snip] ]
结果+ ="< hr />" ;;
你没有写XHTML，所以不要使用它的语法：< hr>不是< hr />。
同样适用于换行符。
[snip]
功能乐趣（evt）{
如果（this.className ==" cliccabile"）//浏览器标准
window.alert（" this" + this.id）;
else if（evt.srcElement.className ==" cliccabile"）// microsoft IE
window.alert（" evt.srcElement" + evt.srcElement.id）;
document.write（dump_props（this，" this"）+ dump_props（ evt.srcElement，" evt.srcElement"））;
}
if（document.getElementById（" a"）。addEventListener）{//浏览器标准
您应该使用特征检测，而不是假设支持
getElementById方法。
var a，b;
if（document.getElementById
&&（a = document.getElementById（''a''））
& ;&（b = document.getElementById（''b''）））{
if（a.addEventListener）{
/ * ... * /
} els e if（a.attachEvent）{
/ * ... * /
}
}
文件.getElementById（" a"）。addEventListener（''cli ck''，fun，false）;
document.getElementById（" b"）。addEventListener（''cli ck''，fun，false） ;
} else if（document.getElementById（" a"）。attachEvent）{// microsoft IE
document.getElementById（" a"）。attachEvent（''onclick''，fun） ;
document.getElementById（" b"）。attachEvent（''onclick''，fun）;
}
<html>
HTML documents should have a document type declaration (DOCTYPE), which
nowadays should be Strict.
<head>
<style type="text/css">
.cliccabile {background-color: #FFCCCC; cursor:pointer;}
.testo {color: #009966;}
When specifying a foreground colour, a background colour should usually
be paired with it (and vice versa). Furthermore, once you set one colour
combination, you should set them all (such as link colours)[1].
It is definitely a mistake to assume that anyone is using the same
default colours as you. Consider a visitor with a desktop theme that is
light-on-dark (as opposed to the usual dark-on-light). If you set a pale
background, overriding their default dark one, but assume that their
foreground colour will be black, which it isn''t, you will have just
rendered the document unreadable.
[snip]
<div id="tabella">
This div element would seem to be unnecessary...
<table id="DOMtable">
....and a table element with only one row (or one column) is always
suspect. A table should be used to contain tabular data, nothing more.
[snip]
<script type="text/javascript">
<!--
''Hiding'' the contents of script elements has been unnecessary for years.
[snip]
result += "<hr />";
You aren''t writing XHTML, so don''t use its syntax: <hr> not <hr/>. The
same applies to the line break.
[snip]
function fun(evt){
if (this.className=="cliccabile") //browser standard
window.alert("this "+this.id);
else if (evt.srcElement.className=="cliccabile") //microsoft IE
window.alert("evt.srcElement "+evt.srcElement.id);
document.write(dump_props(this,"this")+dump_props( evt.srcElement,"evt.srcElement"));
}
if (document.getElementById("a").addEventListener){ //browser standard
You should use feature detection, rather than assuming that the
getElementById method is supported.
var a, b;
if (document.getElementById
&& (a = document.getElementById(''a''))
&& (b = document.getElementById(''b''))) {
if (a.addEventListener) {
/* ... */
} else if (a.attachEvent) {
/* ... */
}
}
document.getElementById("a").addEventListener(''cli ck'',fun,false);
document.getElementById("b").addEventListener(''cli ck'',fun,false);
}else if (document.getElementById("a").attachEvent){ //microsoft IE
document.getElementById("a").attachEvent(''onclick'' ,fun);
document.getElementById("b").attachEvent(''onclick'' ,fun);
}
attachEvent方法因为目前在IE中实现的是破碎的（在我的
意见中）。而不是将此运算符值设置为有用的东西，即侦听器附加到的元素，它将
引用到全局对象。在这种情况下，最好将一个
引用分配给元素的onclick属性：
if（a.addEventListener）{
/ * ... * /
}否则{
a.onclick = b.onclick
=有趣;
}
[snip]
现在，您是否应该使用此运算符或目标或者
srcElement事件对象的属性取决于你真正做什么。 this运算符将始终引用
事件侦听器附加到的元素，而target / srcElement属性将
引用调度事件的元素（点击的元素是
。你必须选择哪个是最合适的。如果你选择后者，那么听众应该改写为：
函数fun（e）{
var目标;
if（（e = e || window.event）
&&（target = e.target || e.srcElement） ）{
if（target.className ==''cliccabile''）{
alert（''Target：''+ target.id）;
}
document.write（dump_props（this，''this''）
+ dump_props（target，''Event target''））; < br $>
}
}
希望有所帮助，
Mike
将代码发布到Usenet时请不要使用标签。请使用一对
的空格。
[1]如果您选择一种颜色，请选择所有颜色
< http://www.w3.org/QA/Tips/color>
-
Michael Winter
前缀主题在通过电子邮件回复之前[新闻]。
The attachEvent method as currently implemented in IE is broken (in my
opinion). Rather than setting the this operator value to something
useful, namely the element to which the listener is attached, it refers
to the global object. In this instance, it would better to assign a
reference to the listener to the onclick property of the elements:
if (a.addEventListener) {
/* ... */
} else {
a.onclick = b.onclick
= fun;
}
[snip]
Now, whether you should be using the this operator or the target or
srcElement properties of the event object depends on what you''re really
doing. The this operator will always refer to the element to which the
event listener is attached, whereas the target/srcElement property will
refer to the element that dispatched the event (the element that was
clicked). You''ll have to choose which is the most appropriate. If you
choose the latter, the listener should be rewritten to something like:
function fun(e) {
var target;
if ((e = e || window.event)
&& (target = e.target || e.srcElement)) {
if (target.className == ''cliccabile'') {
alert(''Target: '' + target.id);
}
document.write(dump_props(this, ''this'')
+ dump_props(target, ''Event target''));
}
}
Hope that helps,
Mike
Please refrain from using tabs when posting code to Usenet. Use a couple
of spaces, instead.
[1] If You Pick One Color, Pick Them All
<http://www.w3.org/QA/Tips/color>
--
Michael Winter
Prefix subject with [News] before replying by e-mail.
fusillo< fu ***** @ nospam.posi-nega.it>写道：
fusillo <fu*****@nospam.posi-nega.it> writes:
document.getElementById（" b"）。attachEvent（''onclick''，fun）;
....
当我使用IE点击id = b的元素时，它会转储窗口对象
和span对象通过evt.srcElement。
document.getElementById("b").attachEvent(''onclick'' ,fun);
....
When I click the element with id=b using IE it dumps the window object
by this and the span object by evt.srcElement.
IE attachEvent方法不会将处理程序作为目标元素的属性调用，这就是为什么 ;这"指的是全局对象。
你知道处理程序分配时的对象，所以你需要记住
。
我会使用一个辅助函数，如：
函数addEventHandler（elem，eventtype，handler）{
if（elem.addEventListener） ）{
elem.addEventListener（eventType，handler，false）;
}否则if（elem.attachEvent）{
elem.attachEvent（ on+ eventtype，function（evt）{
return handler.call（elem，evt）}）;
} else {//或者其他任何后备行为/>
elem [" on" + eventtype] = handler;
}
}
然后：
addEventHandler（document.getElementById（" a"），" click"，fun）;
addEventHandler（document.getElementById（" b"），" ;点击，有趣;
这将确保这个当执行处理程序时，属性是指正确的
对象。
您还应该知道srcElement是一个专有的IE属性，
和相应的标准属性是target。
在处理函数内部，你可以这样做：
var tgt = evt.target || evt.srcElement;
/ L
-
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML死亡颜色：< URL：http：//www.infimum.dk/HTML/rasterTriangleDOM.html>
''没有判断的信仰只会降低精神神圣。''
The IE attachEvent method does not invoke the handler as a property of
the target element, which is why "this" refers to the global object.
You know the object at the time the handler is assigned, so you
should remember it there.
I would use a helper function like:
function addEventHandler(elem, eventtype, handler) {
if (elem.addEventListener) {
elem.addEventListener(eventType, handler, false);
} else if (elem.attachEvent) {
elem.attachEvent("on"+eventtype, function(evt){
return handler.call(elem,evt)});
} else { // or whatever fallback
elem["on"+eventtype] = handler;
}
}
and then:
addEventHandler(document.getElementById("a"), "click", fun);
addEventHandler(document.getElementById("b"), "click", fun);
This would ensure that the "this" property refers to the correct
object when the handler is executed.
You should also be aware that "srcElement" is a proprietary IE property,
and the corresponding standard property is "target".
Inside the handler function, you could do:
var tgt = evt.target || evt.srcElement;
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
''Faith without judgement merely degrades the spirit divine.''
这篇关于这个vs event.scrElement的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
