ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript でのボタン クリック イベントの処理方法についての深い理解
JavaScript でのボタン クリック イベントの処理方法についての深い理解
- yuliaオリジナル
- 2018-10-11 10:12:347017ブラウズ
JavaScript はフロントエンド開発で広く使用されていますが、JS ボタンのクリック イベントを設定する方法をご存知ですか?この記事では、JS でのクリックイベントの処理方法について説明します。興味のある方はご覧ください。
1. btn.click() メソッドを使用します
btn.click() メソッドは、プログラムを通じてボタンをクリックし、それによってボタンの onclick( ) イベントのコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="myFunction()">点我</button>
</body>
<script type="text/javascript">
function myFunction(){
alert("have a nice day ")
}
</script>
</html>レンダリング:
2 addEvenListener() メソッドを使用します。 addEventListener() このメソッドは、指定された要素にイベントを追加できます。コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">点击</button>
</body>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.addEventListener('click',function(){
alert("技术是我一生的追求");
},false)
</script>
</html>レンダリング:
btn.onclick() メソッドは、btn ボタンの onclick で指定されたメソッドを呼び出すだけで、イベントはトリガーされません。コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">click</button>
</body>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick=function(){
alert("欢迎大家来PHP中文网学习");
}
</script>
</html>エフェクト画像:
上記では主に JavaScript におけるボタンクリックイベントの 3 つの処理方法を紹介します。それぞれ異なります。どれを選択するかは、仕事のニーズと個人の習慣によって異なります。この記事が役立つことを願っています。
その他の関連チュートリアルについては、
JavaScript ビデオ チュートリアル以上がJavaScript でのボタン クリック イベントの処理方法についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。