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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
  • So are you simply doing what a click would do? You are attempting to run function `attributval` as if the button had been clicked? – Andrew Leach May 03 '12 at 16:08
  • yes i would like also to do that with other events like onBlur for example. –  May 03 '12 at 16:23

7 Answers7

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).

Alexander Pavlov
  • 31,598
  • 5
  • 67
  • 93
  • 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 –  May 03 '12 at 16:27
  • Absolutely, this will work for any similar on_event_ attribute. – Alexander Pavlov May 03 '12 at 16:57
0

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

var attributval = document.getElementsByTagName("a")[0].onclick;
attributval();
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
0

try

var attributval = document.getElementsByTagName("a")[0].getAttribute('onClick');
Juan Leung
  • 346
  • 4
  • 13
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();

GillesC
  • 10,647
  • 3
  • 40
  • 55
  • Not sure one should be advocating the use of `eval` -- there is almost always a better way. – Andrew Leach May 03 '12 at 16:17
  • 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. – GillesC May 03 '12 at 16:22
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.

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.

Community
  • 1
  • 1
Andrew Leach
  • 12,945
  • 1
  • 40
  • 47
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

Hubro
  • 56,214
  • 69
  • 228
  • 381