es6 onclick

<button onclick="handleClick()">Click Me</button>

<script>
function handleClick() {
    alert('Button was clicked!');
}
</script>

<button id="myButton">Click Me</button>

<script>
document.getElementById('myButton').onclick = () => {
    console.log('Button clicked using ES6 arrow function!');
};
</script>

const button = document.createElement('button');
button.textContent = 'Click Me';
document.body.appendChild(button);

button.addEventListener('click', () => {
    alert('Dynamic event listener with ES6!');
});

class ButtonHandler {
    constructor() {
        this.button = document.getElementById('myButton');
        this.button.onclick = () => this.handleClick(); // 使用箭头函数
    }

    handleClick() {
        console.log('Clicked!', this); // this 正确指向 ButtonHandler 实例
    }
}

new ButtonHandler();

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

button.addEventListener('click', () => {
    console.log('First listener');
});

button.addEventListener('click', () => {
    console.log('Second listener');
});