JavaScript的9種點(diǎn)擊方法示例代碼
更新時(shí)間：2025年04月24日 11:32:30 作者：公程獅
在JavaScript中,為按鈕添加點(diǎn)擊事件監(jiān)聽器是一個(gè)常見的操作,它允許你在用戶點(diǎn)擊按鈕時(shí)執(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、動(dòng)態(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)擊了動(dòng)態(tài)添加的按鈕');
}
var buttonContainer = document.getElementById('buttonContainer');
var button = document.createElement('button');
button.innerHTML = '點(diǎn)擊我（動(dòng)態(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)文章
打造通用的勻速運(yùn)動(dòng)框架(實(shí)例講解)
下面小編就為大家?guī)硪黄蛟焱ㄓ玫膭蛩龠\(yùn)動(dòng)框架(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
本文主要介紹了使用js獲取隱藏元素寬高的解決方案以及代碼思路，具有很好的參考價(jià)值，下面跟著小編一起來看下吧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í)用價(jià)值,需要的朋友可以參考下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í)價(jià)值,需要的朋友可以參考下2020-07-07
出門在外，沒有核酸證明寸步難行，此文將教你如何通過小程序制作一個(gè)工具幫你在人生地不熟的情況如何迅速找到核酸檢測點(diǎn)，實(shí)現(xiàn)核酸點(diǎn)查詢、地圖導(dǎo)航、撥號等功能，需要的朋友可以參考下2022-10-10
分享12個(gè)Webpack中常用的Loader(小結(jié))
這篇文章主要介紹了分享12個(gè)Webpack中常用的Loader(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03