使用原生js绑定两个onclick事件

在JavaScript中，你可以通过以下两种方式绑定onclick事件：

1. HTML中直接绑定

在HTML元素中直接使用onclick属性来绑定事件。这种方法虽然简单，但不推荐用于大型项目，因为它违反了结构与行为分离的原则。

<button id="btn1" onclick="handleClick1()">点击我1</button>
<button id="btn2" onclick="handleClick2()">点击我2</button>

<script>
function handleClick1() {
    console.log('你点击了按钮1');
}

function handleClick2() {
    console.log('你点击了按钮2');
}
</script>

2. 使用JavaScript绑定

在JavaScript代码中，通过addEventListener方法来绑定事件。这种方法更加灵活，且符合现代前端开发的最佳实践。

<button id="btn1">点击我1</button>
<button id="btn2">点击我2</button>

<script>
document.getElementById('btn1').addEventListener('click', function() {
    console.log('你点击了按钮1');
});

document.getElementById('btn2').addEventListener('click', function() {
    console.log('你点击了按钮2');
});
</script>

在上面的示例中，我们首先通过document.getElementById方法获取到两个按钮元素，然后使用addEventListener方法为每个按钮绑定了一个点击事件处理函数。当用户点击按钮时，对应的处理函数会被执行，并在控制台中输出相应的消息。