Вопрос по events, event-handling, javascript – Почему вы должны передать объект события в качестве параметра?

9

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

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

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

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

[I tried searching it on Google but found very complex explanations and examples. Only a simple-to-intermediate explanation would help.] =)

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

Ваш Ответ

5   ответов
4

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

Когда браузер вызывает обработчики событий, он вызывает назначенную ему функцию (функции) и передаетevent возразить на это как 1-й параметр.

Постскриптум Вы не нуждаетесь в() вокруг вашей функции.

document.getElementById('button_1').onclick = function (event) {
    alert("The event is: " + "on" + event.type);
};
Error: User Rate Limit Exceeded W3Geek
Error: User Rate Limit Exceededevent.type.
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>
Error: User Rate Limit ExceededeventError: User Rate Limit Exceeded
0

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

Does the event handler try to pass in an event before i,t gets assigned or?

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

The event handler is bound when you assign it to the element's onclick property (or by calling addEventListener, the modern, preferred method), which is before the handler is invoked. The Event object is passed when the handler is invoked, which is when the event fires.

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

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

11
The Ever-Present Event, Whether You Like it or Not

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

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

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

The event object is already being passed to your callback (независимо от того, предоставите ли вы имя или нет), вы можете не использовать его, если хотите. Например, если мы обратились к методу jQuery onClick:

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

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

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

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

Practical Example

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

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

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

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

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

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

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

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

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

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

Error: User Rate Limit ExceededrespondsError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded W3Geek
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededwindowError: User Rate Limit Exceeded<html>Error: User Rate Limit Exceeded<body>Error: User Rate Limit Exceeded<html>Error: User Rate Limit ExceededdocumentError: User Rate Limit ExceededwindowError: User Rate Limit Exceedede-university.wisdomjobs.com/userfiles/image/JavaScript/…
Error: User Rate Limit Exceeded
4

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

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

Error: User Rate Limit Exceeded W3Geek
Error: User Rate Limit Exceededevent.typeError: User Rate Limit Exceededarguments[0]Error: User Rate Limit ExceededeventError: User Rate Limit Exceeded
Error: User Rate Limit ExceededtypeError: User Rate Limit ExceededeventError: User Rate Limit ExceededeventError: User Rate Limit Exceeded

Похожие вопросы