LoginSignup
0

More than 5 years have passed since last update.

custom event

Last updated at Posted at 2018-04-02

dispatch eventと共に発行

var _ev=new CustomEvent('eee');
 _ev.mes=count;//need the no reserve param 
 count++;
 el.dispatchEvent(_ev); 

detailが標準だが、オブジェクトに追加しても転送される。予約語を避ける。

 _ev.mes=count;//need the no reserve param 

onceも使える。

el.addEventListener('eee',function(ev){this.classList.toggle('red')},{once:true});

全部

<input></input>
<button>b</button>
<style>
 body{background-color:#111;color:#eee}
.red{background-color:red}
</style>
let el=document.querySelector('input')
,btn=document.querySelector('button')
el.addEventListener('eee',function(ev){this.classList.toggle('red')},{once:true});
el.addEventListener('eee',function(ev){this.value =ev.mes},false);
;
let count=0;
btn.onclick=function(ev){
var _ev=new CustomEvent('eee');
 _ev.mes=count;//need the no reserve param 
 count++;
 el.dispatchEvent(_ev);
}

ショート

 el.dispatchEvent(Object.assign(new CustomEvent('eee'),{mes:count}));

追記

//dont work!
el.oneee=function(ev){console.log(ev)};
el.eee=function(ev){console.log(ev)};

オリジナルeventの転送はevを丸ごとコピーするとread onlyに対する複写エラーが起きる為、必要な物のみにする。

let f=function(ev){
 let o={},needs=['keyCode','ctrlKey','metaKey','shiftKey','altKey','code','which']
 ;
  needs.forEach(d=>{ o[d]=ev[d] })
  this.dispatchEvent(Object.assign(new CustomEvent('i'),o)); // Object.assign(new C..., ev); dont work!
}
document.body.addEventListener('keydown',f,false)
document.body.addEventListener('i',function(ev){ console.log(ev) },false)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0