聆听Shadow Dom的活动
[英]Listen event from Shadow Dom
问题描述
How do I listen a mouseover event from shadow DOM. 
如何从阴影DOM监听mouseover事件。 I did try as snipcode below but nothing happen. 我没有尝试作为下面的snipcode，但没有任何反应。 The template instance is generated after button Add is clicked and I register mouseover event for it and hopping this event is fired when mouseover. 模板实例是在单击添加按钮后生成的，我为其注册了鼠标悬停事件，并在鼠标悬停时触发此事件。
Thank a lot 非常感谢
HTML 的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 Java脚本
$(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";
}
2 个解决方案
解决方案1
2 已采纳 2015-10-03 20:32:35
As per addEventListener docs: 根据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).
Therefore element must exist in the DOM, when you call addEventListener on it. 因此，当您在DOM上调用addEventListener时，该元素必须存在于DOM中。
As a workaround, you can use event delegation using jquery on method to achieve the same. 解决方法是，可以使用通过jquery on方法进行事件委派来实现此目的。 Here is a working jsfiddle by tweaking your sample a bit. 通过稍微调整示例，这是一个可行的jsfiddle 。
$('#root').on('mouseover', '.dyn', function(){
display();
});
Here bound element will be parent of template content(about which you are sure that it will exist while binding event) and you'll pass selector of your content html to .on method as argument. 在这里，绑定元素将是模板内容的父元素（您可以确定绑定事件在绑定时将存在该元素），并将内容html的选择器作为参数传递给.on方法。 Thus whenever event occurs on child(in this case your template content) it will bubble up to parent and callback will be triggered. 因此，无论何时在子级上发生事件（在本例中为您的模板内容），事件都会冒泡至父级并触发回调。
解决方案2
0 2015-09-06 13:06:29
You can use on function with jQuery. 您可以on jQuery中使用on函数。 With on function you can "bind" events on element which not created in the DOM when the code was executed. 使用on函数，您可以在执行代码时“绑定”未在DOM中创建的元素上的事件。
Read this: http://api.jquery.com/on/ 阅读此： http : //api.jquery.com/on/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.