第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

與按鈕單擊事件的 Web 組件交互

與按鈕單擊事件的 Web 組件交互

慕斯709654 2023-04-14 16:36:21
我有一個(gè)x-icicle我可以完全控制的自定義 HTML 元素，我想讓它與 HTML 按鈕（可以在 DOM 中的任何位置）交互，例如，每次按下按鈕時(shí)我都希望執(zhí)行一些 JS在x-icicle。<button></button><x-icicle></x-icicle>class Icicle extends HTMLElement {  // ...  if (buttom_pressed) {    // something  }}customElements.define('x-icicle', Icicle);我不知道如何將按鈕事件發(fā)送到x-icicle。也許以某種方式設(shè)置回調(diào)？有什么提示嗎？
查看完整描述

2 回答

?
偶然的你

TA貢獻(xiàn)1841條經(jīng)驗(yàn) 獲得超3個(gè)贊

您可以向自定義元素類添加一個(gè)方法


class Icicle extends HTMLElement {

  connectedCallback() {

    console.log('x-icicle element initiated')

  }


  listen(el) {

    el.addEventListener('click', function() {

      console.log('Button clicked')

    })

  }

}


customElements.define('x-icicle', Icicle)


document.querySelector('x-icicle').listen(document.querySelector('button'))

<button>

  Button

</button>


<x-icicle></x-icicle>


查看完整回答
反對(duì) 回復(fù) 2023-04-14
?
紫衣仙女

TA貢獻(xiàn)1839條經(jīng)驗(yàn) 獲得超15個(gè)贊

一個(gè)解決方案是使用CustomEvent

看看下面的例子（我用了一個(gè)簡(jiǎn)單的span而不是你的自定義元素，但它會(huì)完全一樣）

const button = document.getElementById('button');

const span = document.getElementById('span');


button.addEventListener('click', evt => {

? ? span.dispatchEvent(new CustomEvent('myEvent'));

});


span.addEventListener('myEvent', evt => {

? ? span.innerHTML = 'button has been clicked';

});

<button id="button">button</button>

<span id="span"></span>


查看完整回答
反對(duì) 回復(fù) 2023-04-14
  • 2 回答
  • 0 關(guān)注
  • 166 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)