Question

如何从shadow DOM中侦听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";
}

Answer 1

根据addEventListener docs：

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

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

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

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

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

Answer 2

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

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

听Shadow Dom的活动

2 个答案: