监听来自 Shadow Dom 的事件答案

【问题标题】：Listen event from Shadow Dom监听来自 Shadow Dom 的事件
【发布时间】：2015-09-06 12:32:24
【问题描述】：

如何从 shadow DOM 监听 mouseover 事件。我确实尝试了下面的代码片段，但没有任何反应。模板实例是在单击按钮 Add 后生成的，我为它注册 mouseover 事件并在 mouseover 时触发此事件。

非常感谢

HTML

<body>
    <h1 class="text-center">Test import Node</h1>
    <div class="container-fluid" style=" background-color: #FAFAFA"></div>
    <div class="col-md-12" id = 'root'>
        <button type="button" class="btn btn-default go" id='_add'><i class="fa fa-pencil-square-o"></i> Add</button>
        <div id = 'textbox' style="height: 200px; width: 400px; font-size: 18px"></div>
    </div>
    <template id = 'area'>
        <div style="height : 400px; width: 300px ; background-color: red"></div>
    </template>
</body>

Javascript

$(document).ready(function() {
    var button = document.querySelector('#_add');
    button.addEventListener('click', function(){
        check();
    }, false);
});
function check(){
     // document.querySelector('#textbox').innerHTML = "Ukie";
     var content = document.querySelector('#area').content;
     content.addEventListener('mouseover', function(){
        display();
     }, false);
     var root = document.querySelector('#root');
     root.appendChild(document.importNode(content, true));
}

function display(){
    document.querySelector('#textbox').innerHTML = "Here";
}

【问题讨论】：

标签： javascript html shadow-dom

【解决方案1】：

根据 addEventListener 文档：

事件目标可以是文档中的元素、文档本身、窗口或任何其他支持事件的对象（例如 XMLHttpRequest）。

因此，当你在其上调用 addEventListener 时，元素必须存在于 DOM 中。

作为一种解决方法，您可以使用event delegation using jquery on 方法来实现相同的目的。通过稍微调整您的示例，这是一个有效的jsfiddle。

$('#root').on('mouseover', '.dyn', function(){
    display();
});

这里绑定的元素将是模板内容的父级（您确定它在绑定事件时会存在），并且您会将内容 html 的选择器作为参数传递给 .on 方法。因此，每当事件发生在子级（在这种情况下是您的模板内容）上时，它就会冒泡到父级并触发回调。

【讨论】：

"..因此，每当子级（在这种情况下是您的模板内容）上发生事件时，它将冒泡到父级并触发回调....“非常感谢您的解决方案@Abhinav。 ..很聪明。我以前没想过……：D

【解决方案2】：

您可以在 jQuery 中使用 on 函数。使用on 函数，您可以在执行代码时未在 DOM 中创建的元素上“绑定”事件。

阅读：http://api.jquery.com/on/

【讨论】：

基本上，addEventListener 和 on() 函数是一样的。但我不想在元素添加到根之前绑定函数......
我不认为你是对的，因为如果你将事件绑定到不存在的节点，它将不起作用