js的9种点击方法
·
1、直接在 HTML 元素中使用 onclick 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Onclick 示例</title>
</head>
<body>
<button onclick="handleClick()">点击我</button>
<script>
function handleClick() {
alert('你点击了按钮');
}
</script>
</body>
</html>2、通过 DOM 操作在 JavaScript 中添加 onclick 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Onclick 示例</title>
</body>
<body>
<button id="myButton">点击我</button>
<script>
function handleClick() {
alert('你点击了按钮');
}
var button = document.getElementById('myButton');
button.onclick = handleClick;
</script>
</body>
</html>3、 使用匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Onclick 示例</title>
</body>
<body>
<button id="myButton">点击我</button>
<script>
var button = document.getElementById('myButton');
button.onclick = function() {
alert('你点击了按钮');
};
</script>
</body>
</html>4、 传递参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Onclick 示例</title>
</body>
<body>
<button id="myButton">点击我</button>
<script>
function handleClick(message) {
alert(message);
}
var button = document.getElementById('myButton');
button.onclick = function() {
handleClick('你点击了带有参数的按钮');
};
</script>
</body>
</html>5、动态添加 onclick 事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="en">
<title>Onclick 示例</title>
</body>
<body>
<div id="buttonContainer"></div>
<script>
function handleClick() {
alert('你点击了动态添加的按钮');
}
var buttonContainer = document.getElementById('buttonContainer');
var button = document.createElement('button');
button.innerHTML = '点击我（动态添加）';
button.onclick = handleClick;
buttonContainer.appendChild(button);
</script>
</body>
</html>6、使用 DOM Level 0 事件处理程序
<button id="myButton">点击我</button>
<script>
var button = document.getElementById('myButton');
button.onclick = function() {
alert('你点击了按钮');
};
</script>7、 使用 jQuery 的 click 方法
<button id="myButton">点击我</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').click(function() {
alert('你点击了按钮');
});
});
</script> 8、使用 jQuery 的 on 方法
<button id="myButton">点击我</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').on('click', function() {
alert('你点击了按钮');
});
});
</script>9、使用事件委托
<ul id="list">
<li>列表项 1</li>
<li>列表项 2</li>
</ul>
<script>
document.getElementById('list').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
alert('你点击了列表项：' + event.target.textContent);
}
});
</script>
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)