当前位置：首页 > JavaScript

js实现button类

2026-03-15 15:41:55JavaScript

使用原生JavaScript创建Button类

通过原生JavaScript可以创建一个Button类，封装按钮的属性和行为。以下是一个基础实现示例：

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

  render() {
    this.element.textContent = this.text;
    this.element.addEventListener('click', this.onClick);
    return this.element;
  }

  setText(newText) {
    this.text = newText;
    this.element.textContent = newText;
  }

  disable() {
    this.element.disabled = true;
  }

  enable() {
    this.element.disabled = false;
  }
}

使用示例

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

document.body.appendChild(myButton.render());

添加样式支持

可以扩展Button类以支持自定义样式：

class StyledButton extends Button {
  constructor(text, onClick, styles = {}) {
    super(text, onClick);
    this.styles = styles;
  }

  applyStyles() {
    Object.keys(this.styles).forEach(property => {
      this.element.style[property] = this.styles[property];
    });
  }

  render() {
    super.render();
    this.applyStyles();
    return this.element;
  }
}

使用示例

const styledBtn = new StyledButton(
  'Styled Button',
  () => alert('Hello'),
  {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px'
  }
);

document.body.appendChild(styledBtn.render());

添加事件管理

改进事件处理，允许添加多个事件监听器：

js实现button类

class AdvancedButton extends Button {
  constructor(text) {
    super(text);
    this.eventListeners = [];
  }

  addEventListener(type, handler) {
    this.eventListeners.push({ type, handler });
    this.element.addEventListener(type, handler);
  }

  removeAllEventListeners() {
    this.eventListeners.forEach(({ type, handler }) => {
      this.element.removeEventListener(type, handler);
    });
    this.eventListeners = [];
  }
}

使用示例

const advButton = new AdvancedButton('Advanced');
advButton.addEventListener('click', () => console.log('First click'));
advButton.addEventListener('click', () => console.log('Second click'));
document.body.appendChild(advButton.render());