2

I'm trying to execute JavaScript functions that are called when a event (for example onClick event) is performed on a web page with JavaScript code. I'm getting the function from the event like this :

var attributval = document.getElementsByTagName("a").getAttribute('onClick');

and I'm trying to execute this object (which a JavaScript function in fact) as a function (suppose we have <a onClick = alert('whatever');> on this example, I tried:

var attributval = document.getElementsByTagName("a").getAttribute('onClick');
attributval() = function(){attributval};
attributval();

but it didn't work.

Improve this question
2
  • So are you simply doing what a click would do? You are attempting to run function attributval as if the button had been clicked? Commented May 3, 2012 at 16:08
  • yes i would like also to do that with other events like onBlur for example. Commented May 3, 2012 at 16:23

7 Answers 7

Reset to default
5

A DOM attribute is not the same as a JavaScript property (even though they can have the same name onclick). You should use

var attributval = document.getElementsByTagName("a")[0].onclick;

to retrieve a function (or null) from the JS object (as opposed to getAttribute(), which will most likely return a toString() for the property).

Now, attributval() = is illegal syntax, as attributval() is not an l-value (you cannot assign to it).

attributval(); will work but without the second line (which is illegal JavaScript) it will invoke the original A element onclick handler (if one is defined) or throw an exception (if the onclick handler is null).

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

2 Comments

Absolutely what i was looking for it worked , but can i expand this solution to other events like onBlur or onScroll instead of onClick ?thank you so much
Absolutely, this will work for any similar on_event_ attribute.
0

Skip trying to create a function around the function. Just call it:

var attributval = document.getElementsByTagName("a")[0].onclick;
attributval();
Improve this answer

Comments

0

try

var attributval = document.getElementsByTagName("a")[0].getAttribute('onClick');
Improve this answer

Comments

0

By using get attribute you are returning a string so your only way is to use eval(onclickString) or var fn = new Function(onClickString); fn();

Improve this answer

2 Comments

Not sure one should be advocating the use of eval -- there is almost always a better way.
Apart from eval and new Function() if you are collecting a string there is, unfortunately, not much better way. But yeah there is security issue here. however accessing the onclick event handler can generate issues as well if other handler where attach to it and triggering it would trigger every event handlers attach to it. Which is probably not an issue in his case I am sure, best way is to not use onclick attribute anyway :) never understood the need to access event attributes.
0

attributval is simply a string, correct? If you trust this code, execute it with eval(attributval) -- however any reference to this won't work.

What you probably want is to manually trigger an event. jQuery makes that easy.

Improve this answer

Comments

0

If you want to do more than a click, then Chris McDonald's answer at Is it possible to trigger a link's (or any element's) click event through JavaScript? seems to fit the bill, although you might need to heed the third comment.

Improve this answer

Comments

0

I thought I'd add a short answer on how to work with events using jQuery, since it seems relevant.

// Select the link using it's ID field (assuming it has one)
var myLink = $('a#myLink')

// Add a click event to the link
myLink.on('click', function(e) {
    console.log("I've been clicked!");
});

// Trigger the click event manually. This would result in the above
// function being run. Interestingly, this will not cause the browser
// to follow the link like a real click would
myLink.trigger('click');

// Remove the click event (this removes ALL click events)
myLink.off('click');

// Add a click event to the link that only runs once, then removes itself
myLink.one('click', function() {
    alert("I'll only bother you once!");
});

// Add a click event that you can identify from other click events.
// This means that you can trigger it or remove it without bothering other
// click events
myLink.on('click.myClick', function() {
    alert("This click event has been identified as 'myClick'");
});

// Now you can trigger it without triggering other click events
myLink.trigger('click.myClick');

// And remove it, also with no harm coming to other click events
myLink.off('click.myClick');

Hope this helps

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.