当前位置：首页 > JavaScript

js实现button类

2026-04-07 09:05:39JavaScript

实现Button类的基本结构

在JavaScript中创建一个Button类需要定义其属性、方法和事件处理逻辑。以下是一个基础的Button类实现示例：

class Button {
  constructor(text, onClick) {
    this.text = text;
    this.onClick = onClick;
    this.element = document.createElement('button');
    this.render();
    this.addEventListeners();
  }

  render() {
    this.element.textContent = this.text;
    this.element.style.padding = '8px 16px';
    this.element.style.borderRadius = '4px';
    this.element.style.cursor = 'pointer';
  }

  addEventListeners() {
    this.element.addEventListener('click', () => {
      if (typeof this.onClick === 'function') {
        this.onClick();
      }
    });
  }

  appendTo(parent) {
    if (parent instanceof HTMLElement) {
      parent.appendChild(this.element);
    }
  }
}

使用Button类

创建按钮实例并将其添加到DOM中：

const myButton = new Button('Click Me', () => {
  console.log('Button clicked!');
});

document.addEventListener('DOMContentLoaded', () => {
  myButton.appendTo(document.body);
});

扩展Button功能

可以为Button类添加更多功能，如禁用状态、样式自定义等：

js实现button类

class Button {
  constructor(text, onClick) {
    this.text = text;
    this.onClick = onClick;
    this.disabled = false;
    this.element = document.createElement('button');
    this.render();
    this.addEventListeners();
  }

  setDisabled(disabled) {
    this.disabled = disabled;
    this.element.disabled = disabled;
    this.element.style.opacity = disabled ? 0.5 : 1;
  }

  setStyle(style) {
    Object.assign(this.element.style, style);
  }
}

使用扩展功能

const styledButton = new Button('Submit', () => {
  console.log('Form submitted');
});

styledButton.setStyle({
  backgroundColor: '#4CAF50',
  color: 'white',
  border: 'none'
});

styledButton.setDisabled(true);