Javascript 如何将函数绑定到影子DOM中的元素？

我正在使用Web组件，并尝试将

click

事件绑定到影子DOM中的元素

1。component.html包含在index.html的

中

<template id="my-element">
    <section>
        <header>
            <content select="h1"></content>
            <button></button>
        </header>
        <content select="div"></content>
    </section>
</template>

---

但那是行不通的我如何做到这一点？

我发现创建一个定制的

createEvent（'MouseeEvent'）里面的
就可以了

TL；DR


1。首先，您需要将
onclick=“
”属性添加到我们的
，并创建一个自定义事件：

<my-element>
    <h1>Headline</h1>
    <div>...</div>
</my-element>

<template id="my-element">
    <section>
        <header>
            <content select="h1"></content>
            <button onclick="callEventOnBtn()"></button>
        </header>
        <content select="div"></content>
    </section>

    <script>
        var btnEvent = document.createEvent('MouseEvent');
        btnEvent.initEvent('oncomponentbtn', true, true);
        var callEventOnBtn = function() {
            window.dispatchEvent(btnEvent);
        };
    </script>
</template>

我发现创建一个定制的
createEvent（'MouseEvent'）里面的
就可以了

TL；DR


1。首先，您需要将
onclick=“
”属性添加到我们的
，并创建一个自定义事件：

<my-element>
    <h1>Headline</h1>
    <div>...</div>
</my-element>

<template id="my-element">
    <section>
        <header>
            <content select="h1"></content>
            <button onclick="callEventOnBtn()"></button>
        </header>
        <content select="div"></content>
    </section>

    <script>
        var btnEvent = document.createEvent('MouseEvent');
        btnEvent.initEvent('oncomponentbtn', true, true);
        var callEventOnBtn = function() {
            window.dispatchEvent(btnEvent);
        };
    </script>
</template>

您应该能够在不涉及窗口对象的情况下执行此操作。下面是一个完整的示例：

<!-- Define element template -->
<template>
  <h1>Hello World</h1>
  <button id="btn">Click me</button>
</template>

<!-- Create custom element definition -->
<script>
  var tmpl = document.querySelector('template');

  var WidgetProto = Object.create(HTMLElement.prototype);

  WidgetProto.createdCallback = function() {
    var root = this.createShadowRoot();
    root.appendChild(document.importNode(tmpl.content, true));
    // Grab a reference to the button in the shadow root
    var btn = root.querySelector('#btn');
    // Handle the button's click event
    btn.addEventListener('click', this.fireBtn.bind(this));
  };

  // Dispatch a custom event when the button is clicked
  WidgetProto.fireBtn = function() {
    this.dispatchEvent(new Event('btn-clicked'));
  };

  var Widget = document.registerElement('my-widget', {
    prototype: WidgetProto
  });
</script>

<!-- Use the element -->
<my-widget></my-widget>

<!-- Listen for its click event -->
<script>
  var widget = document.querySelector('my-widget');
  widget.addEventListener('btn-clicked', function() {
    alert('the button was clicked');
  });
</script>


你好，世界
点击我
var tmpl=document.querySelector（'template'）；
var WidgetProto=Object.create（HTMLElement.prototype）；
WidgetProto.createdCallback=函数（）{
var root=this.createShadowRoot（）；
appendChild（document.importNode（tmpl.content，true））；
//获取对阴影根中按钮的引用
var btn=root.querySelector（'#btn'）；
//处理按钮的单击事件
btn.addEventListener（'click'，this.fireBtn.bind（this））；
};
//单击按钮时分派自定义事件
WidgetProto.fireBtn=函数（）{
此.dispatchEvent（新事件（'btn-clicked'））；
};
var Widget=document.registerElement（'my-Widget'{
原型：WidgetProto
});
var widget=document.querySelector（'my-widget'）；
widget.addEventListener（'btn-clicked'，function（）{
警报（“按钮被点击”）；
});

您应该能够在不涉及窗口对象的情况下执行此操作。下面是一个完整的示例：

<!-- Define element template -->
<template>
  <h1>Hello World</h1>
  <button id="btn">Click me</button>
</template>

<!-- Create custom element definition -->
<script>
  var tmpl = document.querySelector('template');

  var WidgetProto = Object.create(HTMLElement.prototype);

  WidgetProto.createdCallback = function() {
    var root = this.createShadowRoot();
    root.appendChild(document.importNode(tmpl.content, true));
    // Grab a reference to the button in the shadow root
    var btn = root.querySelector('#btn');
    // Handle the button's click event
    btn.addEventListener('click', this.fireBtn.bind(this));
  };

  // Dispatch a custom event when the button is clicked
  WidgetProto.fireBtn = function() {
    this.dispatchEvent(new Event('btn-clicked'));
  };

  var Widget = document.registerElement('my-widget', {
    prototype: WidgetProto
  });
</script>

<!-- Use the element -->
<my-widget></my-widget>

<!-- Listen for its click event -->
<script>
  var widget = document.querySelector('my-widget');
  widget.addEventListener('btn-clicked', function() {
    alert('the button was clicked');
  });
</script>


你好，世界
点击我
var tmpl=document.querySelector（'template'）；
var WidgetProto=Object.create（HTMLElement.prototype）；
WidgetProto.createdCallback=函数（）{
var root=this.createShadowRoot（）；
appendChild（document.importNode（tmpl.content，true））；
//获取对阴影根中按钮的引用
var btn=root.querySelector（'#btn'）；
//处理按钮的单击事件
btn.addEventListener（'click'，this.fireBtn.bind（this））；
};
//单击按钮时分派自定义事件
WidgetProto.fireBtn=函数（）{
此.dispatchEvent（新事件（'btn-clicked'））；
};
var Widget=document.registerElement（'my-Widget'{
原型：WidgetProto
});
var widget=document.querySelector（'my-widget'）；
widget.addEventListener（'btn-clicked'，function（）{
警报（“按钮被点击”）；
});

这太令人沮丧了。你的解决方案比我的更聪明：D@morkro你介意把这个答案标为正确吗？当然！谢谢@robdodson为我展示了一个更好的方法：）这太令人沮丧了。你的解决方案比我的更聪明：D@morkro你介意把这个答案标为正确吗？当然！感谢@robdodson为我展示了一个更好的方法：）