Встроенные обработчики событий и анонимные функции

Мне нужно динамически включать и запускать скрипт на странице. Я использую для этого событие загрузки изображения:

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

Функция DoIt выглядит следующим образом (только что составил этот пример):

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

У меня нет контроля над самой страницей (я контролирую только строку HTML, которую будет вызывать страница), поэтому мне нужно явно включить функцию DoIt в разметку.

Я попытался использовать анонимную функцию, но это не сработало:

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

Должен ли я просто написать встроенный скрипт, например:

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

И в этом случае есть ли ограничения (например, длина скрипта)?

Спасибо за вашу помощь!


javascript event-handling inline onload-event
person Christophe    schedule 03.12.2010    source источник

Ответы (2)


arrow_upward
20
arrow_downward

this не будет работать внутри функции, поскольку функция вызывается объектом window, поэтому this будет ссылаться на window.

Если вы хотите обернуть свой код внутри функции, вы должны обернуть эту функцию, вызвать ее с this, установленным для элемента, или передать this в качестве параметра:

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

И все же это не имеет для меня никакого смысла:

Я не контролирую саму страницу (я контролирую только строку HTML, которую будет вызывать страница),

У вас есть контроль только над тегами img? Если вы можете выводить произвольный HTML, то почему бы просто не поместить что-нибудь в тег `script'?

Обновление
С помощью блока скрипта вы можете объявить в нем свою функцию, а затем просто вызвать ее в событии onload.

<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)" />

Теперь вам нужна только одна функция для многих изображений.

А если вам нужно что-то особенное, вы можете настроить свой тег script для загрузки jQuery или любой другой библиотеки.

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

Если вам нужно много таких обработчиков, jQuery может справиться с этой задачей.

Тем не менее, я спрашиваю себя, когда у вас есть полный контроль над HTML, почему бы вам вообще не использовать библиотеку? :)

person Ivo Wetzel    schedule 03.12.2010
comment
Извините, Иво, я не вижу название тега в вашем последнем предложении. - person Christophe; 03.12.2010
comment
Насколько я понимаю, если я использую тег script, код будет добавлен на страницу, но не будет выполнен. Целью img onload является запуск выполнения. - person Christophe; 03.12.2010
comment
хорошо понял. Тег img по-прежнему необходим для запуска выполнения. У меня нет полного контроля над HTML, я просто предоставляю своим клиентам HTML-строки (это могут быть несколько веб-страниц, которые со временем меняются). И библиотека может быть излишним для моих простых нужд. - person Christophe; 03.12.2010

arrow_upward
8
arrow_downward

Пытаться:

<img src="blank.gif" onload="(function(el){el.onload=' ';el.src='image.jpg';})(this)" />
person David Tang    schedule 03.12.2010
comment
Простой пример. +1 - person DarkNeuron; 18.08.2016