nhuyvan1106 Posted May 18, 2014 Share Posted May 18, 2014 <!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. Link to comment Share on other sites More sharing options...
Hadien Posted May 19, 2014 Share Posted May 19, 2014 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. 1 Link to comment Share on other sites More sharing options...
davej Posted May 19, 2014 Share Posted May 19, 2014 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> 1 Link to comment Share on other sites More sharing options...
nhuyvan1106 Posted May 20, 2014 Author Share Posted May 20, 2014 <!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 Link to comment Share on other sites More sharing options...
davej Posted May 20, 2014 Share Posted May 20, 2014 <!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> 1 Link to comment Share on other sites More sharing options...
nhuyvan1106 Posted May 20, 2014 Author Share Posted May 20, 2014 <!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? Link to comment Share on other sites More sharing options...
davej Posted May 20, 2014 Share Posted May 20, 2014 That's just the way it works. Link to comment Share on other sites More sharing options...
nhuyvan1106 Posted May 20, 2014 Author Share Posted May 20, 2014 Ah, ah, after hours of fiddling with this, finally got this figured out , hard work always pays off as always feeling so amazing, thanks a bunch guys. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now