我已经制作了一个简单HTML页面的JavaScript选项卡视图。
我通过节点通过JavaScript添加了用于标题标签的onClick函数。
onClick函数执行称为showTab的函数,并将其作为参数传递。
我知道这是[对象窗口]。
标头标记的onClick函数设置如下所示:
node.onclick = function() { showTab(this); };
showTab函数如下:
function showTab(e)
{
var node = (e && e.target) || (window.event && window.event.srcElement);
alert(node.innerHTML);
}
一切正常,当我单击标题之一时,将显示带有innerHTML的警报。
但是,我确实使用了Google的一点帮助来实现这一目标。我想帮助您确切地了解这行的含义:
var node = (e && e.target) || (window.event && window.event.srcElement);
我做了自己的研究,发现它可以等同于C#中的发送者。
但是我想彻底了解它的工作原理,它指的是什么,以及它如何知道哪个节点正在调用showTab函数,因为有3个标头标记执行相同的功能,而所有标记都没有id。
最佳答案
啊,处理事件和浏览器的乐趣。
Trident引擎(Internet Explorer和其他基于该引擎的浏览器)处理事件的方式与大多数其他浏览器(全部?)不同。
<html>
<head>
<title>Test</title>
</head>
<body>
<button id="test_button">Click me</button>
<script>
// UGLY, UGLY, UGLY... don't really use this
var button = document.getElementById("test_button");
if (window.attachEvent) {
button.attachEvent("onclick", showTab);
} else {
button.addEventListener("click", showTab);
}
function showTab(e)
{
// Most browsers pass the event as 'e'
// Microsoft puts the event in window.event
// Either way, event will now point to the object we want.
var event = e || window.event;
// Once again, the different browsers handle the `target` property differently.
// Target should now point to the right event.
var target = event.target || event.srcElement;
alert(target.innerHTML);
}
</script>
</body>