Question

我制作了一个简单HTML页面的JavaScript标签视图。我已经通过节点使用JavaScript为标头标签添加了onClick函数。 onClick函数执行一个名为 showTab 的函数，将 this 作为参数传递。我了解此是 [对象窗口] 。

标题标签onClick函数的设置如下所示：

node.onclick = function() { showTab(this); };

showTab功能如下：

function showTab(e) 
{ 
    var node = (e && e.target) || (window.event && window.event.srcElement); 
    alert(node.innerHTML); 
}

一切正常，当我点击其中一个标题时，会出现一个带有innerHTML的警告。

但是，我确实使用了谷歌的一些帮助来实现这一目标。我想帮助理解这一行的确切含义：

var node = (e && e.target) || (window.event && window.event.srcElement);

我做了自己的研究，发现它可以被认为是C＃中的发送者。

但我想彻底了解它是如何工作的以及它是指什么以及它如何知道哪个节点正在调用showTab函数，因为有3个标题标记执行相同的功能，都没有id。

Answer 1

啊，处理事件和浏览器的乐趣。

三叉戟引擎（基于该引擎的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>

Answer 2

这一行：

var node = (e && e.target) || (window.event && window.event.srcElement);

等同于这个逻辑：

var node;
if (e && e.target) {
    node = e.target;
} else if (window.event && window.event.srcElement) {
    node = window.event.srcElement;
} else {
    node = undefined;
}

此代码的目的是处理旧版本的IE不将事件结构传递给事件处理程序的事实。相反，它存储在全局变量window.event中，事件目标也存储在事件的差异属性中。

这样做会更常见（我认为更具可读性）：

function showTab(e) { 
    // get the event data structure into e
    e = e || window.event;

    // get the source of the event
    var node = e.target || e.srcElement;
    alert(node.innerHTML); 
}

实际上，任何体面的大小项目都应该使用库函数来抽象事件处理程序中的差异，这样这个特定于浏览器的代码只需要在项目中占一个位置，或者使用像jQuery这样的预构建库。事情这是一个跨浏览器的事件处理程序：

// refined add event cross browser
function addEvent(elem, event, fn) {
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }

    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return(ret);
    }

    function attachHandler() {
        // older versions of IE
        // set the this pointer same as addEventListener when fn is called
        // make sure the event is passed to the fn also so that works the same too
        // normalize the target of the event
        window.event.target = window.event.srcElement;
        var ret = fn.call(elem, window.event);   
        if (ret === false) {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
        }
        return(ret);
    }

    if (elem.addEventListener) {
        elem.addEventListener(event, listenHandler, false);
    } else {
        elem.attachEvent("on" + event, attachHandler);
    }
}

Answer 3

它正在获取被点击的dom元素，无论是符合标准的浏览器的e.target还是window.event.srcElement（可能是e.srcElement而不是更新的IE）

请参阅：http://www.quirksmode.org/js/events_properties.html

JavaScript代码说明：（e＆amp;＆amp; e.target）|| （window.event＆amp;＆amp; window.event.srcElement）

3 个答案: