javascript をネイティブだけでも書けるようにするためのメモ。
click イベント3パターン早見表
target.addEventListener('click', myFunction)
target.onclick = function(){ ~~~ }
<button type="button" onclick="myFunction()">ボタン</button>
パターン1: target.addEventListener() を使う
多分一般的。
管理もしやすい。
サンプルコード
button じゃなくても div とか span など色んなタグに使用できるけど、
サービスを利用する人やコードを書く側の人のことを考えると、
button タグなど元からクリックできるものに対して定義した方が良いと思う。
<button id="btn" type="button">ボタン</button>
<script type="text/javascript">
(function() {
let target = document.getElementById('btn')
if (!target) {
return
}
target.addEventListener('click', (e) => {
console.log(e)
})
}())
</script>
注意: submit を扱う時は preventDefault()
form タグの子要素に submit() で送信する（ページ更新される）要素に対して、
click イベントを使用したい時は preventDefault() を使って送信しないようにする。
<form action="" method="post">
<button id="btn" type="submit">ボタン</button>
</form>
<script type="text/javascript">
(function() {
let target = document.getElementById('btn')
if (!target) {
return
}
target.addEventListener('click', (e) => {
e.preventDefault()
console.log(e)
})
}())
</script>
パターン2: target.onclick を使う
調べてて初めて知った。正直 target.addEventListener() でいいのでは、
と思う。
サンプルコード
<button id="btn" type="button">ボタン</button>
<script type="text/javascript">
(function() {
let target = document.getElementById('btn')
if (!target) {
return
}
target.onclick = (e) => {
console.log(e)
}
}())
</script>
パターン3: タグの onclick を使う
多分 html を初めて勉強していて、
javascript はまだ勉強していない人が最初に見るものでは。
使う場面は限られると思う、というかほとんど使わないと思うけど、
可読性はいいかも。
サンプルコード
<button type="button" onclick="btnClick()">ボタン</button>
<script type="text/javascript">
function btnClick() {
console.log('click')
}
</script>
注意1: 使用できないメソッド名がある
onclick="" は HTMLElement に登録されているメソッド名は使えないので注意。
下記メソッド名は使えない。
- attachInternals()
- blur()
- click()
- focus()
- hidePopover()
- showPopover()
- togglePopover()
注意2: click イベントの内容が取得できない
addEventListener() や target.onclick = function(){} であれば、
click イベントが取得できる。
function btnClick(e) {
console.log(e) // undefined
}
注意3: onclick="" の引数について
あまり使用しないと思うけど、引数入れれそうなので入れてみた。
javascript で定義した変数等は入れれないっぽい。
<button type="button" onclick="btnClick(hello)">ボタン</button>
<script type="text/javascript">
let hello = 'hello'
function btnClick(value) {
// ReferenceError: hello is not defined
// at HTMLButtonElement.onclick (xxxxx.html:xx:xx)
console.log(value)
}
</script>
id を指定した Element なら取得できる。
他にも class や name を指定してみたけど、それは取得できなかった。
<div id="hello">hello</div>
<button type="button" onclick="btnClick(hello)">ボタン</button>
<script type="text/javascript">
function btnClick(value) {
console.log(value)
}
</script>