Inline event handlers and anonymous functions

Asked 3/12, 2010 at 3:13 Answered 3/12, 2010 at 3:30

Solved javascript event-handling inline onload-event

I have a need to dynamically include and run a script in a page. I am using an image onload event for this:

<img src="blank.gif" onload="DoIt" />

The DoIt function looks like this (just made up this example):

this.onload=' ';this.src='image.jpg';

I have no control on the page itself (I only control the HTML string that the page will call), so I need to include the DoIt function explicitly in the markup.

I tried using an anonymous function, but it didn't work:

<img src="blank.gif" onload="function(){this.onload=' ';this.src='image.jpg';}" />

Should I just write the script inline, like this:

<img src="blank.gif" onload="this.onload=' ';this.src='image.jpg';" />

And in this case are there any limitations (e.g. script length)?

Thanks for your help!

Pyrochemical answered 3/12, 2010 at 3:13 Comment(0)

The this won't work inside the function since the function is called by the window object, therefore the this will refer to window.

If you want to wrap your code inside a function you must wrap that function, call it with the this set to the element or pass the this as a parameter:

<html>
    <body>
        <!-- call the function and set the this accordingly-->
        <img src="foo.png" onload="(function(){...}).call(this)" />

        <!-- pass the this as a parameter -->
        <img src="foo.png" onload="(function(e){....})(this)" />
    </body>
</html>

Yet this doesn't really make sense to me:

I have no control on the page itself (I only control the HTML string that the page will call),

Do you only have control over the img tags? If you can output abritary HTML, then why not just put something in a `script' tag?

Update
With a script block you could declare your function in there and then simply call it in the onload event.

<script>
    function doIt(el) {
       // code in here
       console.log(el.id); // you could do stuff depending on the id
    }
</script>

<img id="img1" src="foo.png" onload="doIt(this)" />
<img id="img2" src="foo.png" onload="doIt(this)" />

Now you need only one function for many images.

And if you need to get really fancy, you can setup your script tag to pull in jQuery or any other library.

<script src="somepathtojquery"></script>
<script>
   // do jquery stuff in herep

If you need a lot of these handlers jQuery could do the job.

Still I'm asking my self when you have full control over the HTML why don't you use a library in the first place? :)

Anjanetteanjela answered 3/12, 2010 at 3:30 Comment(3)

Sorry Ivo, I can't see the tag name in your last sentence. – Pyrochemical 3/12, 2010 at 3:41

Well, my understanding is that if I use a script tag, the code will be added to the page but not executed. The purpose of the img onload is to trigger the execution. – Pyrochemical 3/12, 2010 at 3:45

ok, got it. The img tag is still needed to trigger the execution. I don't have full control on the HTML, I just provide HTML strings to my customers (it could be multiple Web pages, and change over time). And a library may be an overkill for my simple needs. – Pyrochemical 3/12, 2010 at 3:59

Try:

<img src="blank.gif" onload="(function(el){el.onload=' ';el.src='image.jpg';})(this)" />

Finger answered 3/12, 2010 at 3:28 Comment(0)

Recommended topics

Hot tags