[Day06] - 新拟物风按钮(四) - 事件处理

昨天文末时 , 请 邦友 设定的 3 项属性不知道各位做出来了吗 ?

如果没有 , 可以到 neuomorphic-button-05.js 这里来参考作法

如果 邦友 有其他作法 , 欢迎大家到昨天的留言区 , 留言分享您的作法

事件分析

基础的 HTML 按钮上有一个 onclick 事件 , 用来设定点击後 , 要触发哪一个函式

我们做的 neuomorphic-button 也是一个按钮 , 当然我们需要有一个点击事件 , 让引用元件的人 , 能注册点击後的处理函式

下面 , 我们就将点击事件 , 追加到 neuomorphic-button 元件上吧 !

常用的点击事件

开始实作之前 , 我们来确认一下 , 在页面中工程师常用那些手法设定 "click" 事件呢 ?

<button> 的 onclick 属性

<button onclick="clickHandler()" />

EventTarget.addEventListener()

button.addEventListener('click', clickHandler )

也就是今天完成时 , 上方的 2 种事件都可以在 neuomorphic-button 元件上使用

实作开始

将昨天的进度取出

class NeuomorphicButton extends HTMLElement {

  constructor() {

    super();

    const fontAwesomeStyle = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">`

    // neumorphism 产生器 : https://neumorphism.io/#e0e0e0
    const styleStr = `[neumorphism 按钮样式]`;

    const icon = this.getAttribute('icon') || 'fas fa-wifi'
    const size = this.getAttribute('size') || 70
    const color = this.getAttribute('color') || '#6a9bd8'
    const bgColor = this.getAttribute('bg-color') || '#ebf5fc'

    const htmlStr = `
        <label>
          <input type="checkbox" name="">
          <div class="icon-box" style="width: ${size}px;height: ${size}px;background-color:${bgColor}">
              <i class="${icon}" style="font-size: ${size * 0.6}px;color:${color}"></i>
          </div>
        </label>
    `

    this.attachShadow({mode: 'open'}).innerHTML = fontAwesomeStyle + styleStr + htmlStr
  }
}

window.customElements.define('neuomorphic-button', NeuomorphicButton);

在 checkbox 加上 addEventListener 监听 checkbox 的变化

const checkbox = label.querySelector('input[type="checkbox"]')
checkbox.addEventListener('change', function (e) {

  console.log('checkbox 被点到')
});

产生一个新的 Event 并将其 dispatch 到元素上

const self = this

const checkbox = label.querySelector('input[type="checkbox"]')
checkbox.addEventListener('change', function (e) {

  // detail 就是 CustomEvent 内的参数
  const clickEvent = new CustomEvent('check', {composed: true, detail: {check: this.checked}});
  self.dispatchEvent(clickEvent)
});

之後我们注册 addEventListener('check' 到元素上 , 我们就可以看到事件的触发

// 注册范例 
document.querySelector('neuomorphic-button').addEventListener('check', e => console.log('注册 & 监听 check 事件 !!!', e.detail.check))

Pink Tree EventTarget.addEventListener() 的部分已解决 , 接下来处理 <button oncheck="checkHandler(e)" /> 的部分

处理 oncheck 属性

const self = this
+ const oncheck = this.getAttribute('oncheck')

const checkbox = label.querySelector('input[type="checkbox"]')
checkbox.addEventListener('change', function (e) {

      ...之前的设定
      
+      eval(oncheck)
    });

之後我们注册 oncheck="check(e)" 到元素上 , 我们就可以看到事件的触发

// 注册范例 
<neuomorphic-button icon="fas fa-lightbulb" oncheck="check(e)"></neuomorphic-button>

<script>
  function check(e) {
    console.log('oncheck 事件触发 !!!', e)
  }
</script>