Przekazywanie parametrów JS

Question

Cześć krótkie pytanie czy da się przekazać parametry do callbacku w addEventListener inaczej niż wywołanie funkcji w anonimowej funkcji np:

myElement.addEventListener('click', (event) => {
  myFunction(event, obj)
})

jest jakiś krótszy zapis?

 

Answer 1

myElement.addEventListener('click', myFunction.bind(this, arg2, arg3, arg4))

Comments

event się nie przekazuje 

---

{
  let t = this,
      d = document,
      Q = 'querySelector',
      A = 'addEventListener',
      T = 'targets',
      c = (e, o) => {
        let el = e.target;
        el.matches(o[T]) && o.listener.call(el, e)
        el.matches(o[T] + ' *') && o.listener.call(el.closest(o[T]), e)
      };
  
  t.query = (s, b = d) => b[Q](s);
  t.queryAll = (s, b = d) => s === s.toString() ? [...b[Q + 'All'](s)] : s.length ? [...s] : [s];
  t.addEvent = (x, n, f, c) => queryAll(x).map(x => x[A](n, f, !!c));
  t.addDelegation = (o) => queryAll(o.parents).map(p => p[A](o.type, (e)=>{c(e, o)}));
  t.loaded = f => t[A]('load', f)
}

bez białych znaków 460 b

---

https://codepen.io/Argeento/pen/jwjabz?editors=1011

---

Do anonimowej funkcji włożyłem. 442b 

Answer 2

element.addEventListener("click", myFunction);

function myFunction (event) {

}

 

Comments

zły przykład podałem oprucz event musze jeszcze przekazać jeden parametr ktory jest obiektem

---

Skoro ten objekt jest widoczny dla anonimowej funkcji addEventListener to przecież powinien być też widoczny dla funkcji myFunction.

---

Nie do końca. Funkcje przypisałem do zmiennej. Minifikuje ręcznie kod i chodzi o to że chce aby funkcja c była w deklaracjach. Teraz to wygląda tak : 

{
  let t = this,
      d = document,
      Q = 'querySelector',
      A = 'addEventListener',
      T = 'targets';
  t.query = (s, b = d) => b[Q](s);
  t.queryAll = (s, b = d) => s === s.toString() ? [...b[Q + 'All'](s)] : s.length ? [...s] : [s];
  t.addEvent = (x, n, f, c) => queryAll(x).map(x => x[A](n, f, !!c));
  t.addDelegation = (o) => {
    let c = (e) => {
      let el = e.target;
      if (el.matches(o[T])) o.listener.call(el, e);
      if (el.matches(o[T] + ' *')) o.listener.call(el.closest(o[T]), e)
    };
    queryAll(o.parents).map(p => p[A](o.type, c))
  };
  t.loaded = f => t[A]('load', f)
}

a chce żeby było tak: 

{
  let t = this,
      d = document,
      Q = 'querySelector',
      A = 'addEventListener',
      T = 'targets',
      c = (e, o) => {
        let el = e.target;
        if (el.matches(o[T])) o.listener.call(el, e);
        if (el.matches(o[T] + ' *')) o.listener.call(el.closest(o[T]), e)
      };
  
  t.query = (s, b = d) => b[Q](s);
  t.queryAll = (s, b = d) => s === s.toString() ? [...b[Q + 'All'](s)] : s.length ? [...s] : [s];
  t.addEvent = (x, n, f, c) => queryAll(x).map(x => x[A](n, f, !!c));
  t.addDelegation = (o) => queryAll(o.parents).map(p => p[A](o.type, (e)=>{c(e, o)}));
  t.loaded = f => t[A]('load', f)
}

i chce skrocic zapis w 16 linijce

kod projektu