最終更新:2022-09-14 (水) 07:57:37 (589d)
onclick
Top / onclick
引数の省略
window.onload=hoge window.onload=hoge() function hoge(e){ console.dir(e) }
関連
動作確認
HTML/イベント属性
- HTMLのイベント属性として使う場合は第1引数の省略によるイベントオブジェクトの代入とかはないっぽい
- https://jsfiddle.net/sqdyxhm9/1/
<h2>HTMLButtonElement.onclick</h2> <h3>base</h3> <button onclick="console.dir(typeof this)">console.dir(typeof this)</button>object<br> <button onclick="console.dir(this)">console.dir(this)</button>イベントハンドラなのでHTMLButtonElement<br> <button onclick="console.dir(event)">console.dir(event)</button>PointerEvent<br> <button onclick="console.dir(window.event)">console.dir(window.event)</button>PointerEvent<br> <h3>foo0</h3> <button onclick="foo0">foo0</button>これだと呼ばれない:<br> <button onclick="foo0()">foo0()</button>arguments(0)<br> <button onclick="foo0(dummy)">foo0(dummy)</button>dummy is not defined<br> <button onclick="foo0(event)">foo0(event)</button>arguments[0]:PointerEvents(window.eventが参照される)<br> <button onclick="foo0(window.event)">foo0(window.event)</button>arguments[0]:PointerEvents<br> <button onclick="foo0(this)">foo0(this)</button>イベントハンドラなのでHTMLButtonElement<br> <h3>foo1</h3> <button onclick="foo1">foo1</button>これだと呼ばれない<br> <button onclick="foo1()">foo1()</button>arg1はundefined<br> <button onclick="foo1(dummy)">foo1(dummy)</button>dummy is not defined<br> <button onclick="foo1(event)">foo1(event)</button>arguments[0]:PointerEvents(window.eventが参照される)<br> <button onclick="foo1(window.event)">foo1(window.event)</button>arguments[0]:PointerEvents<br> <button onclick="foo1(this)">foo1(this)</button>イベントハンドラなのでHTMLButtonElement<br> <h3>foo2</h3> <button onclick="foo2">foo2</button>これだと呼ばれない<br> <button onclick="foo2()">foo2()</button>arg1/arg2はundefined<br> <button onclick="foo2(dummy)">foo2(dummy)</button>dummy is not defined<br> <button onclick="foo2(event)">foo2(event)</button>arguments[0]:PointerEvents(window.eventが参照される)<br> <button onclick="foo2(window.event)">foo2(window.event)</button>arguments[0]:PointerEvents<br> <button onclick="foo2(this)">foo2(this)</button>イベントハンドラなのでHTMLButtonElement<br> function foo0(){ console.dir(arguments); } function foo1(arg1){ console.dir(arg1); } function foo2(arg1,arg2){ console.log("arg1:") console.dir(arg1); console.log("arg2:") console.dir(arg2); }
DOM要素のプロパティ (DOM/Event)
- https://jsfiddle.net/L3njkqgb/
- 引数を省略するとPointerEvents?が代入される
- 代入できるのは関数のみ
<button id="button1">button1</button>arguments(1):PointerEvents <button id="button2">button2</button>arg1:PointerEvents <button id="button3">button3</button>arg1:PointerEvents,arg2:undefined function foo0(){ console.dir(arguments); } function foo1(arg1){ console.dir(arg1); } function foo2(arg1,arg2){ console.log("arg1:") console.dir(arg1); console.log("arg2:") console.dir(arg2); } var btn1 = document.getElementById("button1"); var btn2 = document.getElementById("button2"); var btn3 = document.getElementById("button3"); btn1.onclick=foo0 btn2.onclick=foo1 btn3.onclick=foo2 //btn3.onclick=foo2() // foo2()がfunctionを返してたりすると実行される
JavaScript/イベントオブジェクトの取得
IE/Firefox両対応
window.onload = test function test(e){ var e = e || window.event ... }
HTML/イベント属性
- なるべく代わりにaddEventListenerを使うこと。
<button onclick="foo">button</button>→これだと呼ばれない <button onclick="foo()">button</button>→arg1はundefined <button onclick="foo('Hello world!')">button</button> function foo(arg1){ console.log(arg1);//Hello World }
- イベントオブジェクトはwindow.eventから取得できる。
- Firefoxの場合、argumentsを使うと取得できる。
<button onclick="foo(arguments[0])">button</button> function foo(arg1){ console.log(arg1); }
- https://www.softel.co.jp/blogs/tech/archives/1689
DOM要素のプロパティ (DOM/Event)
obj.onclick = handler;
- イベントオブジェクトは最初の引数として渡される
<button id="btn1">button</button> function foo(arg1){ console.log(arg1);//MouseEvent {} //Firefoxで動く } btn1.onclick = foo
削除
- nullを代入
メモ
- モバイルでは、タップしてからイベント発生までに300msの遅延が生じる
- シングルタップなのかダブルタップなのかを判定するため
- touchstart