发表新帖
发表新帖

Why do you have to pass the event object as a parameter?

后端 未结
关注
5 1437
没有蜡笔的小新
没有蜡笔的小新 2020-12-28 10:37

I\'m learning how to manipulate events in JavaScript and I\'m wondering \"why do you have to pass the event object as a parameter (argument) into a function when using event

相关标签:
5条回答
  • 礼貌的吻别
    2020-12-28 10:52

    Simply put, the Event object passed to a handler contains details about the event. For example, a KeyboardEvent contain info about the key pressed, the corresponding character, and any modifier keys (alt, shift, control, meta) that were held down.

    Does the event handler try to pass in an event before it gets assigned or?

    The handler is your function, so it's the receiver of event, not the passer.

    • 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.

    So, when a user clicks on your #button_1, this causes a "click" event to fire on the button, which invokes the button's "click" handler, which is passed a MouseEvent.

    For more information, read about event-driven programming.

    0 讨论(0)
  • 执念已碎
    2020-12-28 10:56

    You aren't passing an event into the function, you are naming the first parameter passed to your function event.

    The browser is the one that is going to call your function and it passes an event object when it calls your function. You can choose not to name that parameter function(){} but the browser is still going to pass the event object in, you can use it or not use it as you see fit.

    0 讨论(0)
  • 走了就别回头了
    2020-12-28 10:57

    To add to the others answers and comments, your code will not work with IE. For cross-browser capability, you need to test the existence of the first argument:

    <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 讨论(0)
  • 旧巷少年郎
    2020-12-28 10:59

    You are not passing the event parameter anywhere. You are just making a function that takes one parameter, called event.

    When the browser calls the event handlers, it calls the function(s) assigned to it, and passes the event object to it as the 1st parameter.

    P.S. You don't need the () around your function.

    document.getElementById('button_1').onclick = function (event) {
    alert("The event is: " + "on" + event.type);
};
    0 讨论(0)
  • 礼貌的吻别
    2020-12-28 11:01

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

    The event is always present, even when you don't provide a name:

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

    That is the same as saying this:

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

    The event object is already being passed to your callback (whether your provide a name for it or not), you can choose to not use it if you like. For instance, if we looked to a jQuery onClick method:

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

    Making Use of It

    You'll note that I have no event object referenced in my callback. I'm not required to. However, if I want to use it, for whatever purpose, I should give it a name:

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

    Now that I have granted myself access to the event details, I can prevent the default behavior that would result from the event, and I can also stop the event from bubbling up the DOM to other elements.

    Practical Example

    Suppose we wanted to listen for click events on an element:

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

    Click events happen on an element when you click the element itself, or any of its children. Now suppose this element had two children:

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

    Clicking any of these, the big square, the red square, or the blue square will cause the "click" event on the big square - after it causes the click event on whichever element you clicked first (events bubble up the DOM).

    We could determine which element was the target in any click event via the event itself:

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

    Note here how we're accessing the ID of the target that raised the event. If you click on the red square, when that event bubbles up to the big square, we will see alerted "redSquare". The same goes for the blue square. If you click that, the event will bubble up to the big square and we will see alerted "blueSquare".

    You can test this online via the following demo: http://jsbin.com/ejekim/edit#javascript,live

    Try clicking the orange, red, or blue square to see what is alerted.

    0 讨论(0)
 看不清?
提交回复
热议问题