var Obj = function(){\n\nObj.SenderAsParameterFunc = function(sender, param1, param2){\n\/\/ log $(sender).id;\n}\n\nObj.NoExplicitParametersFunc = function(){\n\n \/\/ EXTRACT DEFAULT SENDER\/CALLEE\n \/\/ I see in console Obj.NoExplicitParametersFunc.caller.arguments >> SEE REF1\n}\n\n Obj.NoExplicitParametersFuncWithExtraArgs = function(this, par1, par2){\n \/\/ 'this' from each loop?\n}\n\nObj.AnotherFunc = function(){\n\n var X = $('myselect');\n\n var par1 = 1;\n var par2 = 'bla';\n $.each(X.find(\"option\"), function () {\n Obj.SenderAsParameterFunc(this, par1, par2); \n \/\/ 'this' here references current object from 'each' loop\n });\n\n $.each(X.find(\"option\"), Obj.NoExplicitParametersFunc); \n \/\/ must be equvalent to first var, \n \/\/ but to extract 'inner' this we have to do more magic in NoExplicitParametersFunc...\n\n var par1 = 1;\n var par2 = 'bla';\n $.each(X.find(\"option\"), Obj.NoExplicitParametersFuncWithExtraArgs);\n }\n\n}\n<\/code><\/pre>\nSo WHAT should be written in NoExplicitParametersFunc to get access to each option as that is done in SenderAsParameterFunc with $(this)?<\/p>\n
==========<\/p>\n
OK, TO Summarize what I’ve learned: if a function goes without parameters<\/p>\n
$.each(X.find(\"option\"), Obj.NoExplicitParametersFunc);\n<\/code><\/pre>\nthen ‘this’ is passed by default and is accessible within a function.<\/p>\n
If a function has parameters<\/p>\n
$.each(X.find(\"option\"), function () { Obj.SenderAsParameterFunc(this, par1, par2); });\n<\/code><\/pre>\nthen ‘this’ MUST be included as a parameter (first?) to be accessible within the function.<\/p>\n
=============<\/p>\n
REF1:<\/p>\n
b.Event\naltKey: undefined\nattrChange: undefined\nattrName: undefined\nbubbles: true\ncancelable: false\nctrlKey: undefined\ncurrentTarget: input#inputId\ndata: undefined\ndelegateTarget: input#inputId\neventPhase: 2\nhandleObj: Object\nisDefaultPrevented: function ot(){return!1}\njQuery19105656534675508738: true\nmetaKey: false\noriginalEvent: Event\nrelatedNode: undefined\nrelatedTarget: undefined\nshiftKey: undefined\nsrcElement: input#inputId\ntarget: input#inputId\ntimeStamp: 1366622725473\ntype: \"change\"\nview: undefined\nwhich: undefined\n__proto__: Object,\n<\/code><\/pre>\ncurrentTarget, delegateTarget, srcElement, target ARE same, but what should be actually used, the most correct way? References would be appreciated!<\/p>\n
Thanks.<\/p>\n
\n- \n
TL;DR:<\/strong> In your case it doesn’t matter, but if you are in doubt use currentTarget<\/code><\/p>\nI don’t really understand your first question, but about the second one…<\/p>\n
When an event is dispatched usually this event bubbles, for example on this page:<\/p>\n
\n \n ![](\"foobar.png\")
\n \n\n<\/code><\/pre>\nIf the user clicks a img<\/code> element inside a div<\/code> it will fire the events this way<\/p>\nbody - capturing\ndiv - capturing\nimg - at target\ndiv - bubbling\nbody - bubbling\n<\/code><\/pre>\nSo you can add a listener to body<\/code> and you’ll catch the event. But to allow you to know which element was ACTUALLY clicked (the img<\/code> in this case) it provides event.target<\/code> property (srcElement<\/code> on Internet Explorer).<\/p>\ndelegateTarget<\/code> is a property added by jQuery and it provides extra info if you use event delegation. I don’t know exactly what it is but you can take a look at the documentation<\/p>\nAnd finally currentTarget<\/code> is the element you attached the event, if we added the listener to body<\/code> it’ll be body<\/code>. So the arguments on each events are<\/p>\nfire body.click with { target: img, currentTarget: body }\nfire div.click with { target: img, currentTarget: div }\nfire img.click with { target: img, currentTarget: img }\nfire div.click with { target: img, currentTarget: div }\nfire body.click with { target: img, currentTarget: body }\n<\/code><\/pre>\nDepending on what you are doing you will need one or the other property.<\/p>\n<\/li>\n
- \n
\n$.each(X.find(\"option\"), function () {\n Obj.SenderAsParameterFunc(this);\n \/\/ 'this' here references anonymous function, \n \/\/ from which it was called, so 'this' is sender\n});\n<\/code><\/pre>\n<\/blockquote>\nNo. The anonymous<\/em> function is not referenced by anything here (it is accessible as a parameter only in $.each<\/code>). The this<\/code> keyword in the callbacks of $.each<\/code> does reference the iterated items. That also does answer your question:<\/p>\nObj.NoExplicitParametersFunc = function(i, v){\n console.log(this, i, v);\n}\n<\/code><\/pre>\n\nIf a function has parameters [and is called in an anonymous function expression] then ‘this’ MUST be included as a parameter (first?) to be accessible within the function.<\/p>\n<\/blockquote>\n
Yes, as this<\/code> is unique to each function call you have to pass its value along – just like you cannot just access local variables of your caller function, you cannot access its this<\/code> value. To call the function with a specific this-value, you can use .call<\/code>:<\/p>\n$.each(X.find(\"option\"), function(i, v) {\n Obj.SenderAsParameterFunc.call(this, i, v, par1, par2);\n});\n<\/code><\/pre>\n<\/li>\n<\/ol>\nOriginally posted 2013-11-09 23:11:08. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
I need some clarification with javascript call’s metadata. Provided code below has SenderAsParameterFunc and NoExplicitParametersFunc which are being called from AnotherFunction’s each loops. var Obj = function(){ Obj.SenderAsParameterFunc = function(sender, param1, param2){ \/\/ log $(sender).id; } Obj.NoExplicitParametersFunc = function(){ \/\/ EXTRACT DEFAULT SENDER\/CALLEE \/\/ I see in console Obj.NoExplicitParametersFunc.caller.arguments >> SEE REF1 } Obj.NoExplicitParametersFuncWithExtraArgs = […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-986","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/986","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=986"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/986\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}