来自 Shadow Dom 的监听事件

Question

如何从阴影中监听鼠标悬停事件 DOM。我确实尝试了下面的 snipcode，但没有任何反应。单击添加按钮后生成模板实例，我为其注册鼠标悬停事件，并在鼠标悬停时触发此事件。

非常感谢

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";
}

Answer 1

您可以将 on 功能与 jQuery 一起使用。使用 on 函数，您可以 "bind" 在执行代码时未在 DOM 中创建的元素上发生事件。

读这个：http://api.jquery.com/on/

Answer 2

根据 addEventListener 文档：

The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).

因此当您对其调用 addEventListener 时，DOM 中的元素必须存在。

作为解决方法，您可以通过稍微调整示例来使用 event delegation using jquery on method to achieve the same. Here is a working jsfiddle。

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

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

来自 Shadow Dom 的监听事件

Listen event from Shadow Dom

html

javascript

shadow-dom

来自 Shadow Dom 的监听​​事件

Listen event from Shadow Dom

html

javascript

shadow-dom

来自 Shadow Dom 的监听事件