js onclick 传参

在JavaScript中，onclick事件用于处理用户点击元素时的交互。如果你想在onclick事件中传递参数，可以采用以下几种方法：

方法一：使用匿名函数或箭头函数

你可以创建一个匿名函数或者使用箭头函数来包装你的事件处理逻辑，并在这个函数中传递参数。

// HTML
<button id="myButton">Click me</button>

// JavaScript
document.getElementById('myButton').onclick = function(param) {
    handleClick(param);
};

function handleClick(param) {
    console.log('Clicked with parameter:', param);
}

// 或者使用箭头函数
document.getElementById('myButton').onclick = (event) => {
    handleClick('someParameter');
};

方法二：在HTML中直接传递参数

你可以在HTML元素的onclick属性中直接写入JavaScript代码，并传递参数。

<!-- HTML -->
<button onclick="handleClick('someParameter')">Click me</button>

<!-- JavaScript -->
<script>
function handleClick(param) {
    console.log('Clicked with parameter:', param);
}
</script>

方法三：使用事件对象传递参数

如果你想在事件处理函数中同时获取事件对象和自定义参数，可以使用闭包或者箭头函数。

// HTML
<button id="myButton">Click me</button>

// JavaScript
document.getElementById('myButton').onclick = function(event) {
    handleClick(event, 'someParameter');
};

function handleClick(event, param) {
    console.log('Event:', event);
    console.log('Clicked with parameter:', param);
}

方法四：使用数据属性

你还可以在HTML元素中使用data-*属性来存储参数，然后在事件处理函数中读取这些属性。

<!-- HTML -->
<button id="myButton" data-param="someParameter">Click me</button>

<!-- JavaScript -->
<script>
document.getElementById('myButton').onclick = function(event) {
    const param = event.target.getAttribute('data-param');
    handleClick(param);
};

function handleClick(param) {
    console.log('Clicked with parameter:', param);
}
</script>