我已经制作了一个简单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>

10-08 04:51