JavaScript的9種點(diǎn)擊方法示例代碼
更新時間：2025年04月24日 11:32:30 作者：公程獅
在JavaScript中,為按鈕添加點(diǎn)擊事件監(jiān)聽器是一個常見的操作,它允許你在用戶點(diǎn)擊按鈕時執(zhí)行特定的代碼,這篇文章主要介紹了JavaScript的9種點(diǎn)擊方法,需要的朋友可以參考下
1、直接在 HTML 元素中使用 onclick 屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Onclick 示例</title>
</head>
<body>
<button onclick="handleClick()">點(diǎn)擊我</button>
<script>
function handleClick() {
alert('你點(diǎn)擊了按鈕');
}
</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">點(diǎn)擊我</button>
<script>
function handleClick() {
alert('你點(diǎn)擊了按鈕');
}
var button = document.getElementById('myButton');
button.onclick = handleClick;
</script>
</body>
</html>3、 使用匿名函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Onclick 示例</title>
</body>
<body>
<button id="myButton">點(diǎn)擊我</button>
<script>
var button = document.getElementById('myButton');
button.onclick = function() {
alert('你點(diǎn)擊了按鈕');
};
</script>
</body>
</html>4、 傳遞參數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Onclick 示例</title>
</body>
<body>
<button id="myButton">點(diǎn)擊我</button>
<script>
function handleClick(message) {
alert(message);
}
var button = document.getElementById('myButton');
button.onclick = function() {
handleClick('你點(diǎn)擊了帶有參數(shù)的按鈕');
};
</script>
</body>
</html>5、動態(tài)添加 onclick 事件處理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="en">
<title>Onclick 示例</title>
</body>
<body>
<div id="buttonContainer"></div>
<script>
function handleClick() {
alert('你點(diǎn)擊了動態(tài)添加的按鈕');
}
var buttonContainer = document.getElementById('buttonContainer');
var button = document.createElement('button');
button.innerHTML = '點(diǎn)擊我（動態(tài)添加）';
button.onclick = handleClick;
buttonContainer.appendChild(button);
</script>
</body>
</html>6、使用 DOM Level 0 事件處理程序
<button id="myButton">點(diǎn)擊我</button>
<script>
var button = document.getElementById('myButton');
button.onclick = function() {
alert('你點(diǎn)擊了按鈕');
};
</script>7、 使用 jQuery 的 click 方法
<button id="myButton">點(diǎn)擊我</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').click(function() {
alert('你點(diǎn)擊了按鈕');
});
});
</script>8、使用 jQuery 的 on 方法
<button id="myButton">點(diǎn)擊我</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').on('click', function() {
alert('你點(diǎn)擊了按鈕');
});
});
</script>9、使用事件委托
<ul id="list">
<li>列表項(xiàng) 1</li>
<li>列表項(xiàng) 2</li>
</ul>
<script>
document.getElementById('list').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
alert('你點(diǎn)擊了列表項(xiàng)：' + event.target.textContent);
}
});
</script>總結(jié)
到此這篇關(guān)于JavaScript的9種點(diǎn)擊方法的文章就介紹到這了,更多相關(guān)js點(diǎn)擊方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄蛟焱ㄓ玫膭蛩龠\(yùn)動框架(實(shí)例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
本文主要介紹了使用js獲取隱藏元素寬高的解決方案以及代碼思路，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JS實(shí)現(xiàn)完全語義化的網(wǎng)頁選項(xiàng)卡效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)完全語義化的網(wǎng)頁選項(xiàng)卡效果代碼,可實(shí)現(xiàn)基于鼠標(biāo)滑過及點(diǎn)擊的選項(xiàng)卡切換效果,非常具有實(shí)用價值,需要的朋友可以參考下2015-09-09
thinkphp實(shí)現(xiàn)無限分類（使用遞歸）
這篇文章主要介紹了在使用遞歸的情況下thinkphp實(shí)現(xiàn)無限分類，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章以示例的方式為大家介紹下javascript 如何處理null及'null'值,需要的朋友可以參考下2014-06-06
關(guān)于JavaScript作用域你想知道的一切，本文全部告訴大家，幫助大家全面的了解JavaScript作用域，感興趣的小伙伴們可以參考一下2016-02-02
本篇文章主要是對js模擬C#中List的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要介紹了JavaScript缺少insertAfter解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
出門在外，沒有核酸證明寸步難行，此文將教你如何通過小程序制作一個工具幫你在人生地不熟的情況如何迅速找到核酸檢測點(diǎn)，實(shí)現(xiàn)核酸點(diǎn)查詢、地圖導(dǎo)航、撥號等功能，需要的朋友可以參考下2022-10-10
分享12個Webpack中常用的Loader(小結(jié))
這篇文章主要介紹了分享12個Webpack中常用的Loader(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03