我可以在事件中使用DOM-2和DOM-0的组合吗？

Question

请参阅以下代码：

<span id="clickme">Cliquez-moi !</span>

<script>
    var clickme = document.getElementById('clickme');

    clickme.addEventListener('click', function(e) {
        e.target.innerHTML = 'Vous avez cliqué !';
    }, false);
</script>

这个代码是：

<span id="clickme">Cliquez-moi !</span>

<script>
    var clickme = document.getElementById('clickme');

    clickme.addEventListener('click', function(e) {
        this.innerHTML = 'Vous avez cliqué !';
    }, false);
</script>

你看到我刚才在那里做了什么吗？我没有使用正式的DOM-2 e.target，而是使用了DOM-0和.addEventListener相结合的官方的this.，你猜怎么着？它在浏览器中工作得很好，对我来说更有意义，因为我已经习惯了DOM-0。你们觉得怎么样？这是可行/正确的吗？

编辑：

当我尝试其他的东西时，比如改变这个：

<p id="result"></p>

<div id="parent1">
    Parent
    <div id="child1">child N°1</div>
    <div id="child2">child N°2</div>
</div>

<script>
    var parent1 = document.getElementById('parent1'),
        result = document.getElementById('result');

    parent1.addEventListener('mouseover', function(e) {
        result.innerHTML = "Element's ID using mouseover: " + e.target.id;
    }, false);
</script>

在此基础上：

<p id="result"></p>

<div id="parent1">
    Parent
    <div id="child1">child N°1</div>
    <div id="child2">child N°2</div>
</div>

<script>
    var parent1 = document.getElementById('parent1'),
        result = document.getElementById('result');

    parent1.addEventListener('mouseover', function(e) {
        result.innerHTML = "Element's ID using mouseover: " + this.id;
    }, false);
</script>

不管用，怎么了？

Answer 1

您所看到的不同行为与DOM版本无关。文档对象模型( Document，DOM ) 2级核心规范是对它之前的DOM规范的超集和替代。今天使用的浏览器都没有实现0级规范--事实上，我甚至不知道这到底是什么。此摘要文件链接到DOM级别1、2、3和4。

按照规格，在addEventListener()回调中，e.target和this并不总是一回事。

如果将事件处理程序附加到父元素并侦听子元素上可能发生的事件，则e.target将是发起事件的DOM元素，而this将是将事件附加到的元素。因此，如果使用气泡事件并将事件处理程序附加到父事件，则需要选择要使用的事件。

如果事件处理程序附加到发起事件的同一元素，则this和e.target将是相同的元素。