Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JavaScript Events / 7 сообщений из 7, страница 1 из 1
10.06.2007, 00:15
    #34586957
PhoenixNET
PhoenixNET
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript Events
Хочу сделать обработку событий отдельно от html кода.
Вместо
Код: plaintext
1.
2.
<div id="left" onmouseover="fun1();" onmouseout="fun2();"></div>
<div id="right" onmouseover="fun1();" onmouseout="fun2();"></div>
получить в html
Код: plaintext
1.
2.
<div id="left"></div>
<div id="right"></div>

Обработку событий вынести в .js файл, но так, чтобы одно событие можно было вешать на несколько элеметов (на примере - в зависимости от наведённого блока менять его бекраунд, например). Как это сделать правильно?
На windows.onload вызываю функцию, но как при этом передать и id элемента, и его событие? Что-то я совсем запутался %)

--
$50 + $100 бесплатно для игры на PartyPoker.com
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2007, 04:34
    #34586997
PhoenixNET
PhoenixNET
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript Events
Разобрался. Если кому интересно:

JavaScript
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
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';
	}

	function hideBg(e) {
		evt = e || window.event;
		tgt = evt.target || evt.srcElement;
		tmp = tgt;
		if (!tgt.id) {
			tmp = tgt.parentNode
		}		
		tmp.style.background = 'none';
	}
}
HTML
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
			<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>
Только проблема - утечка памяти в Опере. В IE вроде бы всё в порядке, ФФ вообще гладко всё отображает...

--
$50 + $100 бесплатно для игры на PartyPoker.com
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2007, 05:04
    #34586999
PhoenixNET
PhoenixNET
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript Events
Вроде залатал.
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
	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);		
		}
Функция вызывается в конце функций hideBg и showBg.
Буду рад отзывам и предложениям ;)

--
$50 + $100 бесплатно для игры на PartyPoker.com
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2007, 05:11
    #34587001
PhoenixNET
PhoenixNET
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript Events
Осталась одна визуальная проблема - в Опере курсор над li постоянно в режиме wait. Переопределение не помогло.
Утро вечера мудренее %)

--
$50 + $100 бесплатно для игры на PartyPoker.com
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2007, 17:03
    #34587295
Alex_BBB
Alex_BBB
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript Events
PhoenixNETХочу сделать обработку событий отдельно от html кода.
Вместо
Код: plaintext
1.
2.
<div id="left" onmouseover="fun1();" onmouseout="fun2();"></div>
<div id="right" onmouseover="fun1();" onmouseout="fun2();"></div>
получить в html
Код: plaintext
1.
2.
<div id="left"></div>
<div id="right"></div>

Обработку событий вынести в .js файл, но так, чтобы одно событие можно было вешать на несколько элеметов (на примере - в зависимости от наведённого блока менять его бекраунд, например). Как это сделать правильно?
На windows.onload вызываю функцию, но как при этом передать и id элемента, и его событие? Что-то я совсем запутался %)

--
$50 + $100 бесплатно для игры на PartyPoker.com

А если так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
function check() {alert('A!');}

window.onload = function () { 
	var left = document.getElementById("left");
	left.onclick=registration;

	var right = document.getElementById("right");
	left.onclick=registration;
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.06.2007, 17:05
    #34587300
Alex_BBB
Alex_BBB
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript Events
(опечатка)
Т. е. вот так:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
function check() {alert('A!');}

window.onload = function () { 
	var left = document.getElementById("left");
	left.onclick=check;

	var right = document.getElementById("right");
	left.onclick=check;
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.06.2007, 10:35
    #34587773
PhoenixNET
PhoenixNET
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript Events
Alex_BBB
Код: plaintext
1.
2.
	var right = document.getElementById("right");
	left.onclick=check;

Вероятно right.onclick?
Не совсем подходит. Мне нужно перебирать элементы <li> и в зависимости от mouseover/mouseout производить одну и ту же процедуру.
Вы предлагаете перебор по id, но их может быть 5, а может быть и 10 - не очень удобно получается.
А вот с оперой так проблема и осталась, wait cursor появляется после первого наведения на <li> и "крутится" себе всё время =) Esc не помогает...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JavaScript Events / 7 сообщений из 7, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 961ms
Закрыть
start [/forum/search_topic.php?author=Dasha+Neluba&author_mode=last_topics&do_search=1]:
 0ms
get settings:
 10ms
get forum list:
 13ms
get settings:
 10ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 175ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 48ms
get tp. blocked users:
 1ms
others: 672ms
total:  961ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]