Почему вы должны передать объект event в качестве параметра?

Я учусь манипулировать событиями в JavaScript, и мне интересно: "почему вы должны передавать объект события в качестве параметра (аргумента) в функцию при использовании обработки событий?"

вот пример того, о чем я говорю:

<script type="text/javascript">
    document.getElementById('button_1').onclick = (function (event) {
        alert("The event is: " + "on" + event.type);
    });
</script>

Я написал код выше, и я понимаю, что он делает. Я просто не понимаю, как все (событие) проходит. Я думал об этом как о способе присвоения анонимной функции button_1.событие onClick обработчик. Пытается ли обработчик событий передать событие до его назначения или?... Мне трудно это понять. Если бы кто-то мог прояснить это для меня, я был бы благодарен.

[Я попытался найти его в Google, но нашел очень сложные объяснения и примеры. Только простая промежуточными объяснение поможет.]=)

большое спасибо.

9
event-handling events javascript javascript-events

5 ответов

вездесущее событие, нравится вам это или нет

событие всегда присутствует, даже если вы не предоставляете имя:

$(".foo").on("click", function(){
  alert( arguments[0].type );
});

это то же самое, что сказать:

$(".foo").on("click", function(event){
  alert( event.type );
});

объект события уже передается вашему обратному вызову (независимо от того, предоставите ли вы имя для него или нет), вы можете не использовать его, если хотите. Например, если мы смотрели на метод jQuery onClick:

$(".foo").on("click", function(){
  /* Do stuff */
});

использование Это

вы заметите, что у меня нет объекта события, на который ссылается мой обратный вызов. От меня этого не требуется. Однако, если я хочу использовать его для какой-либо цели, я должен дать ему имя:

$(".foo").on("click", function(myEvent){
  myEvent.preventDefault();
  myEvent.stopPropagation();
});

теперь, когда я предоставил себе доступ к деталям события, я могу предотвратить поведение по умолчанию, которое будет результатом события, и я также могу остановить событие от пузырящегося DOM к другим элементам.

Практический Пример

Предположим, мы хотим слушать для событий щелчка по элементу:

$("#bigSquare").on("click", function(event){
  /* Do something */
});

события щелчка происходят на элементе при щелчке самого элемента или любого из его дочерних элементов. Теперь предположим, что у этого элемента было двое детей:--10--> 

<div id="bigSquare">
  <div id="redSquare"></div>
  <div id="blueSquare"></div>
</div>

щелчок любого из них, большой квадрат, красный квадрат или синий квадрат вызовет событие "click" на большом квадрате - после того, как он вызывает событие click на любом элементе, который вы нажали первым (события пузырь вверх DOM).

мы могли бы определить, какой элемент была ли цель в любом событии click через само событие:

$("#bigSquare").on("click", function(event){
  alert( event.target.id );
});

обратите внимание, как мы получаем доступ к идентификатору цели, которая вызвала событие. Если вы нажмете на Красную площадь, когда это событие всплывет на большую площадь, мы увидим предупрежденный "redSquare". То же самое относится и к синему квадрату. Если вы нажмете на это, событие всплывет на большой квадрат, и мы увидим предупрежденный "blueSquare".

вы можете проверить это онлайн с помощью следующей демонстрации: http://jsbin.com/ejekim/edit#javascript, live

попробуйте нажать на оранжевый, красный или синий квадрат, чтобы увидеть, что насторожило.

11

вы не проходите в любом месте. Вы просто создаете функцию, которая принимает один параметр, называемый event.

когда браузер вызывает обработчики событий, он вызывает назначенные ему функции и передает event объект к нему в качестве 1-го параметра.

P. S. Вы не нужны () вокруг вашей функции.

document.getElementById('button_1').onclick = function (event) {
    alert("The event is: " + "on" + event.type);
};
4

вы не передают событие в функцию, вы называете первый параметр, переданный вашей функции event.

браузер-это тот, который будет вызывать вашу функцию и передает объект события при вызове вашей функции. Вы можете не называть этот параметр function(){} но браузер все равно собирается передать объект события, вы можете использовать его или не использовать, как считаете нужным.

4

проще говоря, объект события, передаваемый обработчику, содержит сведения о событии. Например,KeyboardEvent содержит информацию о нажатой клавише, соответствующем символе и любых удерживаемых клавишах-модификаторах (alt, shift, control, meta).

пытается ли обработчик событий передать событие до его назначения или?

обработчик-это ваша функция, поэтому это приемник event, а не прохожий.

  • обработчик событий привязан, когда вы назначаете его элементу onclick свойство (или по вызову addEventListener современный, предпочтительный метод), который до обработчика.
  • объект события передается при вызове обработчика, то есть при возникновении события.

Итак, когда пользователь нажимает на ваш #button_1, это вызывает событие" click " для запуска на кнопке, которая вызывает обработчик "click" кнопки, который передается MouseEvent.

для получения дополнительной информации прочитайте о программирование на основе событий.

0

чтобы добавить к другим ответам и комментариям, ваш код не будет работать с IE. Для возможности кросс-браузера необходимо проверить наличие первого аргумента:

<body>
  <button id="button_1">Click Me!</button>
  <script type="text/javascript" >
    document.getElementById('button_1').onclick = (
      function(event) {
        var e = event ? event : window.event;
        alert("The event is: " + "on" + e.type);
      });
  </script>
</body>
0