JavaScript『イベントハンドラー』

(const img=document.getElementById('img'); img.onabort=()=>alert('load aborted');)

const img=document.getElementById('img'); img.onabort=()=>alert('load aborted');

(const input=document.querySelector('input'); input.onfocus=()=>input.style.background='pink';)

const input=document.querySelector('input'); input.onfocus=()=>input.style.background='pink';

(input.onblur=()=>input.style.background='gray';)

input.onblur=()=>input.style.background='gray';

(input.onkeydown=()=>input.style.background='yellow';)

input.onkeydown=()=>input.style.background='yellow';

(input.onkeyup=()=>input.style.background='lime';)

input.onkeyup=()=>input.style.background='lime';

(const area=document.getElementById('area'); area.oninput=()=>area.style.color='red';)

const area=document.getElementById('area'); area.oninput=()=>area.style.color='red';

(area.onchange=()=>area.style.color='red';)

area.onchange=()=>area.style.color='red';

(const btn=document.getElementById('btn'); btn.onclick=()=>alert('clicked');)

const btn=document.getElementById('btn'); btn.onclick=()=>alert('clicked');

(btn.ondblclick=()=>alert('dblclicked');)

btn.ondblclick=()=>alert('dblclicked');

(const body=document.getElementById('body'); body.onerror=()=>alert('error');)

const body=document.getElementById('body'); body.onerror=()=>alert('error');

(const form=document.querySelector('form'); form.onsubmit=()=>window.confirm('onsubmit');)

const form=document.querySelector('form'); form.onsubmit=()=>window.confirm('onsubmit');

(form.onreset=()=>window.confirm('onreset');)

form.onreset=()=>window.confirm('onreset');

(const box=document.getElementById('box'); box.onmouseover=()=>box.innerHTML+='+over';)

const box=document.getElementById('box'); box.onmouseover=()=>box.innerHTML+='+over';

(box.onmousemove=()=>box.innerHTML+='+move';)

box.onmousemove=()=>box.innerHTML+='+move';

(box.onmousedown=()=>box.innerHTML+='+down';)

box.onmousedown=()=>box.innerHTML+='+down';

(box.onmouseup=()=>box.innerHTML+='+up';)

box.onmouseup=()=>box.innerHTML+='+up';

(box.onmouseout=()=>box.innerHTML+='+out';)

box.onmouseout=()=>box.innerHTML+='+out';

(window.onload=()=>alert('hello');)

window.onload=()=>alert('hello');

(window.onresize=()=>console.log('resize');)

window.onresize=()=>console.log('resize');

(window.onscroll=()=>console.log('scroll');)

window.onscroll=()=>console.log('scroll');