When using Javascript, Jquery with event handler, how could it be known 'event is event'?

Question

Following codes work well. Whenever I click on an item, It opens or closes. But the event valuable has some strange behavior to a newbie.

enter image description here

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.target demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<ul>
  <li>item 1
    <ul>
      <li>sub item 1-a</li>
      <li>sub item 1-b</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>sub item 2-a</li>
      <li>sub item 2-b</li>
    </ul>
  </li>
</ul>

<script>
function handler( event ) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.children().toggle();
  }
}
$( "ul" ).click( handler ).find( "ul" ).hide();
</script>

At the first time, I think event as a variable declared from "https://code.jquery.com/jquery-10.2.js"

So I changed the name of 'event' to 'xxx', and tested.

function handler( xxx) {
  var target = $( xxx.target );
  if ( target.is( "li" ) ) {
    target.children().toggle();
  }
}
$( "ul" ).click( handler ).find( "ul" ).hide();

But It also works well and makes no error.

Finally, I changed codes like this.

function handler( xxx ) {
  var target = $( xxx.target );
  var target2 = $( ppp.target );

  if ( target.is( "li" ) ) {
    target.children().toggle();
  }
}
$( "ul" ).click( handler ).find( "ul" ).hide();

But It makes Uncaught ReferenceError: ppp is not defined. So I'm wondering how and where the event or xxx variables come from. And I also want to know how javascript interpreter translate 'xxx' as a function which has target property.

Notice, that the values of the arguments are defined when you're calling a function, not when defining a function. — Teemu
– Teemu, Commented Feb 12, 2018 at 5:28
The function is called by the Browser API when the event occurs with an argument of event. You take the argument to any variable, it will contain the native event that browser provided. — Agney
– Agney, Commented Feb 12, 2018 at 5:29
the first (and only) argument to an event handler is the event, it doesn't have to be called event, it can be called graham — Jaromanda X
– Jaromanda X, Commented Feb 12, 2018 at 5:31
The name comes from the parameter declaration in function handler( xxx ) {. And of course you can use anything you want. — Bergi
– Bergi, Commented Feb 12, 2018 at 12:21
Does the brower API have some logic like 'new - ready - waiting - running - terminate' of Operating system? — JongHyeon Yeo
– JongHyeon Yeo, Commented Feb 12, 2018 at 15:06

t.niese · Accepted Answer · 2018-02-12 12:21:03Z

1

handler is a function that you pass as callback to other function.

This handler function has the parameter event, xxx or however you define it. The handler function is then at a later point called with some argument.

// this function will accept another function as argument
// this callback will then be called after 1 second, that function is called
// using an object as first argument
function callInOneSecond(callback) {
  setTimeout(function() {
    callback({
      traget: 'something'
    })
  }, 1000);
}


// it does not matter how the first parameter is called, it will always 
// hold the first argument that is passed to it when "handler" is called.
function handler(xxx) {
  console.log('was called');
  console.dir(xxx);
}

callInOneSecond(handler);

answered Feb 12, 2018 at 12:21

t.niese

41k9 gold badges78 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JongHyeon Yeo Over a year ago

If underthing of mine is ture, In this example, 'later points' repeats over and over in 1second interval , and my example click invoke handler function!

t.niese Over a year ago

@jong-hyunYeo setTimeout is not setInterval. Apart from the fact that callInOneSecond uses a timeout to call the function, the mechanism behind it is identical to what a browser does at events, except that the function is called after a timeout and not after a certain event.

Collectives™ on Stack Overflow

When using Javascript, Jquery with event handler, how could it be known 'event is event'?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related