События-мутанты

s0rr0w · April 21, 2011

Кроме событий, которые генерирует пользователь при работе со страницей, можно делать еще и свои собственные события.

Пример кода


<!DOCTYPE HTML>
<html>
 <head>
 	<title>Mutation event demo</title>
 </head>
 <body id="body">
 	<script>
 		var bodyNode = document.getElementById("body");

		bodyNode.addEventListener( "changeBG", function(){ this.style.backgroundColor = "#ccc" }, false );

		function chbg( node ) {

			var mEvent = document.createEvent( "MutationEvent" );

			mEvent.initMutationEvent ( "changeBG", true, true, document, null, null, null, 0 );

			bodyNode.dispatchEvent(mEvent);
		}

 	</script>
 	<a href="#" onclick="chbg( this ); return false;">Change body BG</a>
 </body>
</html>

Не работает в ИЕ < 9. Обойти можно, но нужно ли?

Great Rash · April 21, 2011

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

s0rr0w · April 21, 2011

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

Событийная модель приложения, как по мне, самая удачная из всех. Особенно в UI.

Допустим, есть задача: есть некий набор чекбоксов

Овощи
Фрукты
Соки
Вода

Если мы выбираем первые два пункта, то нужно предложить пользователю выбрать тару в виде ящика или пакета, или без тары. Если это вода или сок, то тетрапак, бутылка или банка.

Как обычно делают. Просто добавляют условия, что если значение опшина такое-то, то делать это, а если такое, то делать вот это.

В событийной модели все иначе. Мы навешиваем на элементы тары два обработчика, которые будут показывать и скрывать элемент. По клику на список продуктов запускаем событие определенного типа, например, показать тару для овощей или показать тару для жидкостей. Кто именно это отработает, нас уже не волнует.

В чем недостаток первой модели. С увеличением числа элементов, изменением количества тары, изменением зависимостей, придется постоянно переписывать код условий.

Плюсы первой модели. Можно быстро написать решение задачи.

Пример реализации: jQuery

В чем недостаток второй модели. Требует другого подхода к решению задач. Неподготовленному разработчику тяжелее вникнуть в решение.

Плюсы второй модели. Легко модифицировать и изменять код не нарушая основную логику работы.

Пример реализации: StateController

P.S. Думал перевести StateController на MutationEvents. Не буду, так как SC работает быстрее от 3 до 10 раз на повторных запросах.

Great Rash · April 21, 2011

Что-то я все равно не понял. changeBG - это что? Имя события?


function chbg(node) {
  var mEvent = document.createEvent("MutationEvent");
  mEvent.initMutationEvent ("changeBG", true, true, document, null, null, null, 0);
  bodyNode.dispatchEvent(mEvent);
}

Зачем сюда передавать ноду если она не используется?

Чем это лучше чем такая запись:


function changeBG(node) {
  node.style.backgroundColor = '#ccc';
}

<a href="#" onclick="changeBG(document.body); return false;">Change body BG</a>

s0rr0w · April 21, 2011

Что-то я все равно не понял. changeBG - это что? Имя события?

Имя события

Зачем сюда передавать ноду если она не используется?

Привычка

Чем это лучше чем такая запись:

Это самый простой пример. Вот посложнее


<!DOCTYPE HTML>
<html>
 <head>
 	<title>Mutation event demo</title>
 	<style>
 		.bg1 { background-color: #999; }
 		.bg2 { background-color: #e5e5e5; }
 		.bg3 { background-color: #900; }
 	</style>
 	<script>

 		function init (){

 		    var nodeList = document.getElementsByTagName( "*" );

 		    for ( var i=nodeList.length; i--; ) {
 		    	var node = nodeList.item(i);
 		    	var bg = node.getAttribute("data-bgclass");
 		    	if ( bg ) {
					node.addEventListener( "changeBG", changeBGHandler, true );
 		    	}
 		    }

		};

		function changeBGHandler() {
			this.className = this.getAttribute("data-bgclass");
		};

		function launchEvent( eventName ) {

			var mEvent = document.createEvent( "MutationEvent" );

			mEvent.initMutationEvent ( eventName, true, true, document, null, null, null, 0 );

 		    var nodeList = document.getElementsByTagName( "*" );

 		    for ( var i=nodeList.length; i--; ) {
 		    	var node = nodeList.item(i);
				node.dispatchEvent( mEvent );
 		    }

		};

 	</script>
 </head>
 <body id="body" data-bgclass="bg1" onload="init()"> 

 	Страница меняет фон

 	<div id="div1" data-bgclass="bg2">Я меняю свой фон</div>

	<ul id="ul1">
		<li>Я не меняю</li>
		<li data-bgclass="bg3">А я меняю!</li>
	</ul>

 	<a href="#" onclick="launchEvent( 'changeBG' ); return false;">Change body BG</a>

 </body>
</html>

Sign In

События-мутанты

Question

s0rr0w

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information