Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> window.onload events, как правильно организовать? 
:(
    Опции темы
pho3nix
Дата 13.6.2007, 10:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 3
Регистрация: 13.6.2007

Репутация: нет
Всего: нет
Хочу сделать обработку событий отдельно от html кода.
Вместо:
Код

<div id="left" onmouseover="fun1();" onmouseout="fun2();"></div>
<div id="right" onmouseover="fun1();" onmouseout="fun2();"></div>

получить:
Код

<div id="left"></div>
<div id="right"></div>

а обработку событий вынести в js-файл.

Сделал следующим образом:
Код

window.onload = function () { 
    check();
}

function check() {
    var el = document.getElementsByTagName('li');
    for (i=0;i<el.length;i++) {
        el[i].onmouseover = showBg;
        el[i].onmouseout = hideBg;
    }

    function showBg(e) {
        evt = e || window.event;
        tgt = evt.target || evt.srcElement;
        tmp = tgt;
        if (!tgt.id) {
            tmp = tgt.parentNode;
        }
        tmp.style.backgroundImage = 'url(images/menu_bg.jpg)';
        tmp.style.backgroundPosition = 'right bottom';
        tmp.style.backgroundRepeat = 'no-repeat';
                cleanup(tmp);
    }

    function hideBg(e) {
        evt = e || window.event;
        tgt = evt.target || evt.srcElement;
        tmp = tgt;
        if (!tgt.id) {
            tmp = tgt.parentNode
        }        
        tmp.style.background = 'none';
                cleanup(tmp);
    }

    function cleanup(tmp) {
        if (tmp.removeEventListener)
        {
            tmp.removeEventListener('onmouseout', hideBg, false);
            tmp.removeEventListener('onmouseover', showBg, false);
        }
        else 
        {
            tmp.detachEvent('onmouseout', hideBg);
            tmp.detachEvent('onmouseover', showBg);        
        }
}


Код

            <ul>
                <li id="l1"><img src="images/in_yan.jpg" alt="Главная" /><a href="#">Главная</a></li>
                <li id="l2"><img src="images/in_yan.jpg" alt="Главная" /><a href="#">Главная</a></li>
                <li id="l3"><img src="images/in_yan.jpg" alt="Главная" /><a href="#">Главная</a></li>
                <li id="l4"><img src="images/in_yan.jpg" alt="Главная" /><a href="#">Главная</a></li>
                <li id="l5"><img src="images/in_yan.jpg" alt="Главная" /><a href="#">Главная</a></li>
            </ul>

В принципе работает, утечки памяти не наблюдается ни в одном из трёх браузеров. Но почему-то код мне кажется немного индусским. И в Opera 9 после первого наведения на li-элемент курсор впадает в вечный wait, не обращая внимания на переопределение стиля или клавишу Esc.
Направьте на путь истинный ;)
PM MAIL   Вверх
vasac
Дата 13.6.2007, 11:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1060
Регистрация: 4.5.2006

Репутация: 13
Всего: 36
Объясните, зачем вы после срабатывания обработчика удаляете все обработчики?
Почему установив по старинке el.onmouseover = '...', удаляете через removeEventListener.
Так же в removeEventListener имена событий указываются без "on"


--------------------
Блог ГО | Таблица символов юникода
PM WWW   Вверх
lexxICON
Дата 13.6.2007, 12:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 28
Регистрация: 27.1.2007

Репутация: 2
Всего: 2
pho3nix, вот вариант
Код

<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
   <style type="text/css">
       .showBg { 
           background: url(images/menu_bg.jpg) right bottom no-repeat;
       }
   </style>
   <script type="text/javascript">

    document.onmouseover = function () { 
    
        var f = arguments.callee, e = arguments[0] || window.event, t = e.target || e.srcElement;
        
        if (f.last && t !== f.last) { 
            f.last.className = "";
            f.last = null;
        }
        
        if (t.nodeName === "LI") { 
            t.className = "showBg";
            f.last = t;
        } else if (t.parentNode.nodeName === "LI") { 
            t.parentNode.className = "showBg";
            f.last = t.parentNode;
        }
    }
   </script>
  </head>
  <body >
    <ul>
        <li><img src="images/in_yan.jpg" alt="Главная" /><a href="#">Главная</a></li>
        <li><img src="images/in_yan.jpg" alt="Главная" /><a href="#">Главная</a></li>
        <li><img src="images/in_yan.jpg" alt="Главная" /><a href="#">Главная</a></li>
        <li><img src="images/in_yan.jpg" alt="Главная" /><a href="#">Главная</a></li>
        <li><img src="images/in_yan.jpg" alt="Главная" /><a href="#">Главная</a></li>
    </ul>
  </body>
 </html>
PM   Вверх
pho3nix
Дата 13.6.2007, 12:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 3
Регистрация: 13.6.2007

Репутация: нет
Всего: нет
Цитата(vasac @ 13.6.2007,  11:42)
Объясните, зачем вы после срабатывания обработчика удаляете все обработчики?
Почему установив по старинке el.onmouseover = '...', удаляете через removeEventListener.

Без удаления событий шла утечка памяти. Повозил мышкой по меню - сотню килобайт накрутил. Другого способа в голову не пришло/в гугле не нашёл.
Буду весьма благодарен за совет или за ссылку на правильную организацию моей задачи.
Цитата

Так же в removeEventListener имена событий указываются без "on"

Тем не менее, такая конструкция отключает утечку памяти.
PM MAIL   Вверх
vasac
Дата 13.6.2007, 16:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1060
Регистрация: 4.5.2006

Репутация: 13
Всего: 36
Там не должно быть утечек памяти?
Вы уверены, что это не просто некоторое повышение деятельности системы в ответ на ваш провод мышкой?
В случае десяти проводов по меню 1М исчезает?


--------------------
Блог ГО | Таблица символов юникода
PM WWW   Вверх
pho3nix
Дата 13.6.2007, 17:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 3
Регистрация: 13.6.2007

Репутация: нет
Всего: нет
Цитата(vasac @ 13.6.2007,  16:33)
Там не должно быть утечек памяти?
Вы уверены, что это не просто некоторое повышение деятельности системы в ответ на ваш провод мышкой?
В случае десяти проводов по меню 1М исчезает?

На повышение деятельности системы не похоже, т.к. водил не один десяток раз. 1М не набирал, но 2-4 сотни килобайт набиралось. На сколько я заметил, основное повышение использования оперативной памяти происходило во время переходом курсором мыши от <a> к <li> и обратно. 
В принципе это не критично, но смотря глобальными мерками - нужно стремиться к идеальности ;)
Только почему в моём примере так брыкается Опера?

lexxICON, спасибо, дома попробую.
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0624 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.