Показать сообщение отдельно
  #1 (permalink)  
Старый 27.04.2009, 09:50
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Ошибка при добавлении обработчика к событию
Прочитал вот эту статью: http://javascript.ru/tutorial/events/crossbrowser
И либо что-то не правильно понял либо нашел ошибку в коде. Попробую описать, как происходит.

Сначала добавляем к элементу обработчик (mousedown). В Event.add срабатывает такой код:

if (!elem.events[type]) {
     elem.events[type] = {}        
      
     elem.handle = function(event) {
          commonHandle(elem, type, event)
     }


Теперь на элементе есть свойство handle, содержащее функцию.
Далее добавляем обработчик к событию другого типа (mouseup). Т. к. тип другой, то проверка !elem.events[type] снова сработает и функция, содержащаяся в elem.handle , затрется новой функцией.

Теперь если удалять второй добавленный обработчик то в Event.remove сработает elem.removeEventListener(type, elem.handle, false) , где пара type/handle та же что и была при addEventListener, но если удалять первый добавленный обработчик, то пара будет неправильная. Т. е. первому типу (mousedown) будет соответствовать вторая добавленная в elem.handle функция, а должна быть первая. Но оно затерлась.


Попробую написать пример, в котором ошибка показывает себя.

// получаем элемент
var div1 = document.getElementById('div1');

// три обработчика
var h1 = function(e) {div1.innerHTML += '1<br />'};
var h2 = function(e) {div1.innerHTML += '2<br />'};
var h3 = function(e) {div1.innerHTML += '3<br />'};

// добавляем обработчик к событию первого типа
Event.add(div1, 'mousedown', h1);
// к событию второго типа
Event.add(div1, 'mouseup', h2);

// удаляем первый добавленный обработчик
// сейчас на mousedown ничего нет
Event.remove(div1, 'mousedown', h1);

// добавляем h3 к mousedown
Event.add(div1, 'mousedown', h3);
// h3 теперь должен срабатывать 1 раз т. к. на mousedown ничего не было
// да и вообще h3 добавляли только 1 раз
// но срабатывает 2 раза


Полный пример:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>blank</title>
	<script type="text/javascript">

Event = (function() {

  var guid = 0
    
  function fixEvent(event) {
    if ( event.isFixed ) {
      return event
    }
    event.isFixed = true 
  
    event.preventDefault = event.preventDefault || function(){this.returnValue = false}
    event.stopPropagation = event.stopPropagaton || function(){this.cancelBubble = true}
    
    if (!event.target) {
        event.target = event.srcElement
    }
  
    if (!event.relatedTarget && event.fromElement) {
        event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;
    }
  
    if ( event.pageX == null && event.clientX != null ) {
        var html = document.documentElement, body = document.body;
        event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
        event.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
    }
  
    if ( !event.which && event.button ) {
        event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
    }
  }  
  
  function commonHandle(elem, type, event) {
    fixEvent(event)
    
    handlers = elem.events[type]

	for ( var g in handlers ) {
      var handler = handlers[g]

      var ret = handler.call(elem, event)
      if ( ret === false ) {
          event.preventDefault()
          event.stopPropagation()
      }
    }
  }
  
  return {
    add: function(elem, type, handler) {
      if (elem.setInterval && ( elem != window && !elem.frameElement ) ) {
        elem = window;
      }
      
      if (!handler.guid) {
        handler.guid = ++guid
      }
      
      if (!elem.events) {
        elem.events = {}
      }      
      if (!elem.events[type]) {
        elem.events[type] = {}        
      
        elem.handle = function(event) {
          commonHandle(elem, type, event)
        }
        
        if (elem.addEventListener)
		  elem.addEventListener(type, elem.handle, false)
		else if (elem.attachEvent)
          elem.attachEvent('on' + type, elem.handle)
      }
      
      elem.events[type][handler.guid] = handler
    },
    
    remove: function(elem, type, handler) {
      var handlers = elem.events && elem.events[type]
      
      if (!handlers) return
      
      delete handlers[handler.guid]
      
      for(var any in handlers) { break; }
      if (!any) {
        if (elem.removeEventListener)
          elem.removeEventListener(type, elem.handle, false);
        else if (elem.detachEvent)
          elem.detachEvent('on' + type, elem.handle);
          
        delete elem.events[type]
      }
      
    } 
  }
}())

window.onload = function() {
	var div1 = document.getElementById('div1');
	
	var h1 = function(e) {div1.innerHTML += '1<br />'};
	var h2 = function(e) {div1.innerHTML += '2<br />'};
	var h3 = function(e) {div1.innerHTML += '3<br />'};
	
	Event.add(div1, 'mousedown', h1);
	Event.add(div1, 'mouseup', h2);
	
	Event.remove(div1, 'mousedown', h1);
	
	Event.add(div1, 'mousedown', h3);
	
};
	</script>
</head>
<body>
	<div id="div1" style="width: 200px; height: 600px; background: #cfc;"></div>
</body>
</html>
Ответить с цитированием