Jump to content
nhuyvan1106

Event! Event! Here we go again(Help needed :( )

Recommended Posts

<!DOCTYPE html><html><head><script>function myFunction(e){ alert(e.target);}</script></head><body onclick="myFunction(event)"><p>Click on a paragraph. An alert box will alert the element that triggered the event.</p><p><strong>Note:</strong> The target property returns the element that triggered the event, and not necessarily the eventlistener's element.</p></body></html>

Hi guys, I am really struggling with this right now, please help. As you can see the above, I don't really understand these lines of code <body onclick="myFunction(event)">, and

function myFunction(e)

{alert(e.target);}

 

what do "event" and "e" do, I know they are parameters which I can use whatever I like, my question is, why do I need "event" and "e" parameters here, and why are they so important?

 

Second question, this line <body onclick="myFunction(event)">, I don't really know what the difference between <body onclick="myFunction(event)"> and <body onclick = myFunction>(without parenthesis and quotes). Thanks a bunch guys.

Share this post


Link to post
Share on other sites

When an event triggers, javascript automatically defines 2 variables in the scope (between the quotes in the HTML attribute)

  • this: refers the the DOMelement that the event has fired from
  • event: connects to the event object that is current running

The event object has all sorts of info relevant the the event currently being fired. for example it has info on the exact coordinates that the mouse was when you fire the onclick event. In the onkeypress, onkeydown, and onkeyup events, it would have the info describing exactly which keys were pressed.

 

event.target basically refers the the element that fired the event, just like the this reference. In most cases this and event.target will both point to the exact same thing.

<!DOCTYPE html><html><head><script type="text/javascript">function pass(val){  alert("I have been called via a function.n It was a "+  val.tagName + " that triggered this function.");  alert("oh and it's id was:"+val.id);}</script ></head><body><button id="myButton" onclick="alert(this.id)">Click me!</button><!-- should make a popup saying "myButton"--><button id="middleman" onclick="alert(event.target.id)">Me too!</button><!-- should make a popup saying "middleman"--><button id="pattycake" onclick="pass(this)">Me three!</button><!-- should make a couple popups with some info on this button     However, this popup is delegated to another function--> </body></html>

Here is an example of me doing the same thing 3 different ways. Notice the id I've set for each button... as I refer to each one inside the alerts.

 

In my function the argument I use is val. I simply decided to use val instead of e just on a whim. Inside my pass function I say that the this keyword which was passed into it in the 3rd button shall now be known as val. And that's all that is going on in your myFunction. Someone is simply calling the event object just e while it is being used inside that function. e is commonly used to refer to events in many scripts, even though it is not a reserved word.

 

I should say that its also used a lot in exception handling with try/catch blocks. In which case, e would refer to the passed exception.

  • Like 1

Share this post


Link to post
Share on other sites

It also matters whether you use inline javascript calls or an assigned event handler...

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Events</title><script>window.onload = init;function init(){document.getElementById('button2').onclick = fbtn2;}function fbtn2(evt){alert('event='+ evt +' this.id='+ this.id);}function fbtn1(elem,evt){alert('event='+ evt +' elem.id='+ elem.id);}</script ></head><body><button id="button1" onclick="fbtn1(this,event)">Button1</button><button id="button2">Button2</button></body></html>
  • Like 1

Share this post


Link to post
Share on other sites
<!DOCTYPE html><html><head><script>function myFunction(e){ alert(e.target.id);}</script></head><body><p  id = "myBody" onclick="myFunction()">Click on a paragraph. An alert box will alert the element that triggered the event.</p><p><strong>Note:</strong> The target property returns the element that triggered the event, and not necessarily the eventlistener's element.</p></body></html>

I attempted to do this as you can see, but the handler won't do anything, what am I still missing here guys? Thank you

Share this post


Link to post
Share on other sites
<!DOCTYPE html><html><head><title>tab</title><script>function myFunction(e){ alert(e.target.id);}</script></head><body onclick="myFunction(event)"><p id="myPara1">Click on a paragraph. An alert box will alert the element that triggered the event.</p><p id="myPara2">Click on a paragraph. An alert box will alert the element that triggered the event.</p><p id="myPara3"><strong>Note:</strong> The target property returns the element that triggered the event, and not necessarily the eventlistener's element.</p></body></html>
  • Like 1

Share this post


Link to post
Share on other sites
<!DOCTYPE html><html><head><title>tab</title><script>function myFunction(e){ alert(e.target.id);}</script></head><body onclick="myFunction(event)"><p id="myPara1">Click on a paragraph. An alert box will alert the element that triggered the event.</p><p id="myPara2">Click on a paragraph. An alert box will alert the element that triggered the event.</p><p id="myPara3"><strong>Note:</strong> The target property returns the element that triggered the event, and not necessarily the eventlistener's element.</p></body></html>

Man, I am so slow at this for some reason(probably I am too stupid), why does it make a difference after you added the "event" parameter?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...