/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] IE and ‘this’

I have a javascript function that gathers a list of modules the user can add to their view. After I have the list, I build a hidden table that be pulled up later to click and add modules to their view. In that function, it loops through and builds the table. That part works fine.

I’m having issues with adding the onclick event. My code for this so far:

[CODE]
if(td.addEventListener)
{
td.addEventListener(“click”, function(){addModule(this.id.replace(“newmoduletd”, “”));}, false);
}
else
{
td.attachEvent(“onclick”, function(){addModule(this.id);});
}
[/CODE]

In firefox, the first function works great. In IE, ‘this’ shows as an object (the addModule function is just an alert on the parameter, at the moment). However, this.id, this.nodeType, etc are all showing as undefined.

My goal is to pass the numerical portion embedded in the td’s id. In the loop portion before this block of code, I have a variable with the id that I can also use, but when I try passing that through, it doesn’t ‘remember’ things well. If I pass using the array directly (data[j][‘id’]), j is out of bounds by the time I use the click. If I set the value to a local variable then pass it through, it only remembers the last one set. I need to somehow loop through and get unique id values passed to each event handler call.

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@KorAug 04.2008 — why not a simple DOM 0?:
<i>
</i>td.onclick=function(){addModule(this.id)}
Copy linkTweet thisAlerts:
@EckishauthorAug 04.2008 — I had thought that using attachEvent was supposed to more standards complient. So, I was trying to use it. Using what you posted works, so I'll go with it =)

Thanks.
Copy linkTweet thisAlerts:
@KorAug 04.2008 — DOM0 is standard. But there is a main difference between [I]onclick= anonymous [/I]and [I]addEventListener/attachEvent[/I] methods. First will add the event, if the event is not present, but [I]it will replace the event[/I], if the event is already set. The second will [I]add new functions[/I] to the event, if the event is already set.

So that, the DOM0 method is a simple create+add/replace, while DOM1 is a create+add/add.

Unfortunately, IE has other event handling system. For me, I use this kinda crossbrowser approach:
<i>
</i>function AttachEvent(obj,evt,fnc,useCapture){
if (!useCapture) useCapture=false;
if (obj.addEventListener){
obj.addEventListener(evt,fnc,useCapture);
return true;
} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);
else{
MyAttachEvent(obj,evt,fnc);
obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
}
}
function MyAttachEvent(obj,evt,fnc){
if (!obj.myEvents) obj.myEvents={};
if (!obj.myEvents[evt]) obj.myEvents[evt]=[];
var evts = obj.myEvents[evt];
evts[evts.length]=fnc;
}

function MyFireEvent(obj,evt){
if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;
var evts = obj.myEvents[evt];
for (var i=0,len=evts.length;i&lt;len;i++) evts[i]();
}

Where the caller is AttachEvent. For instance:
<i>
</i>AttachEvent(window,'load',function(){alert('foo')},false);
×

Success!

Help @Eckish spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...