addEventListener մեթոդը

addEventListener մեթոդը թույլ է տալիս նշանակել տարրի վրա իրադարձությունների մշակիչներ: Դրա միջոցով կարելի է նշել, օրինակ, թե ինչ անել կոճակի վրա կտտացնելիս կամ ինչ անել տեքստային դաշտում տեքստ մուտքագրելիս: Առաջին պարամետրում նշում ենք փոխանցվող իրադարձության տեսակը, երկրորդում՝ ֆունկցիան, որը կգործարկվի առաջին պարամետրում նշված իրադարձությունից հետո: Երրորդ ոչ պարտադիր պարամետրում փոխանցում ենք օբյեկտի բնութագրերը (once, capture, passive) կամ useCapture պարամետրը:

Շարահյուսություն

javascriptտարր.addEventListener('իրադարձության տեսակ', ֆունկցիա, [օբյեկտի բնութագրերը]);
կամ
տարր.addEventListener('իրադարձության տեսակ', ֆունկցիա, [useCapture]);

Օրինակ

Եկեք անենք, որ կոճակի վրա կտտացնելիս ցուցադրվի հաղորդագրություն.

html<input type="button" id="button" value="կտտացրու ինձ">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click', function() {
  alert('հաղորդագրություն');
});

Результат:

Օրինակ

Եկեք գրենք կոդ, որպեսզի Ինփութում ֆոկուսը կորցնելիս ցուցադրվի հաղորդագրություն այդ ինփութի տեքստով.

html<input id="input" value="տեքստ">

javascriptlet input = document.querySelector('#input');

input.addEventListener('blur', function() {
  alert(this.value);
});

Результат:

Օրինակ

Եկեք անենք, որ կոճակի վրա կտտացնելիս հաղորդագրությունը ցուցադրվի միայն մեկ անգամ: Դրա համար կօգտվենք երկրորդ պարամետրից.

html<input type="button" id="button" value="կտտացրու ինձ">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function() {
    console.log('հաղորդագրություն');
  },
  {
    once: true
  }
);

Օրինակ

passive պարամետրը արգելում է կանչել event.preventDefault մեթոդը իրադարձությունը մշակելիս: Եկեք նախորդ օրինակին կիրառենք event.preventDefault մեթոդը, ինչպես նաև նշենք passive պարամետրում true արժեքը.

html<input type="button" id="button" value="կտտացրու ինձ">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('Ոչ մի հաղորդագրություն');
  },
  {
    passive: true
  }
);

Կոդը կատարելուց հետո մենք կտեսնենք հետևյալ հաղորդագրությունները.

javascript'Ոչ մի հաղորդագրություն';
'Unable to preventDefault inside passive event listener invocation.'

Օրինակ

useCapture պարամետրը true արժեքով ցույց է տալիս իրադարձությունների всплытие ներքին տարրից դեպի արտաքին, իսկ false արժեքով՝ արտաքինից դեպի ներքին տարր: useCapture պարամետրը փոխանցելիս դրա անունը բաց է թողնվում և գրվում է պարզապես true կամ false: Եկեք տեսնենք, թե ինչպես են всплывают իրադարձությունները ծնող և երեխա տարրերում դրանց վրա կտտացնելիս.

html<div id="parent">Ծնող
  <p id="child">Երեխա</p>
</div>

css#parent{
  width: 60px;
  padding: 10px;
  border: 1px solid red;
  text-align: center;
}
#child{
  width: 60px;
  marging-right: 40px;
  border: 1px solid blue;
  text-align: center;
}

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
  () => alert('parent'), 
  true
);
child.addEventListener('click',
  () => alert('child'), 
  true
);

Результат:

Տես նաև