最終更新:2022-09-14 (水) 07:57:37 (584d)  

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/イベント属性

↑

DOM要素のプロパティ (DOM/Event) 

  • obj.onclick = handler;
  • イベントオブジェクトは最初の引数として渡される 
    <button id="btn1">button</button>
function foo(arg1){
   console.log(arg1);//MouseEvent {} //Firefoxで動く
}
btn1.onclick = foo
↑

削除

↑

メモ

  • モバイルでは、タップしてからイベント発生までに300msの遅延が生じる
    • シングルタップなのかダブルタップなのかを判定するため
  • touchstart
↑

関連




検索：