Question

126

Inline event handlers and anonymous functions

rated 0 times [ 130] [ 4] / answers: 1 / hits: 38476 / 14 Years ago, fri, december 3, 2010, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lesli

Add To Favorites

Follow

Total Points: 348

Total Questions: 105

Total Answers: 119

Location: United States Minor Outlying Island

Member since Fri, Jan 6, 2023

1 Year ago

answered 14 Years ago hakeemabramh · Accepted Answer

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? :)