Удаление событий в Mootools и синтаксис добавления событий - PullRequest
Новая
       22

Удаление событий в Mootools и синтаксис добавления событий

2 голосов
/ 24 августа 2010

Итак, я добавляю свои события таким образом: 

element.addEvent('click', function() {
    alert('foobar');
});

Однако, при попытке удалить указанное событие, этот синтаксически идентичный код (с «add» переключен на «remove») не работает.1004 * 

element.removeEvent('click', function() {
    alert('foobar');
});

Я предполагаю, что это потому, что на две определенные функции не ссылаются одинаково, поэтому событие технически не удаляется.Хорошо, поэтому я переопределяю добавление и удаление события: 

element.addEvent('click', alert('foobar'));
element.removeEvent('click', alert('foobar'));

Это прекрасно работает, за исключением того, что теперь, когда страница загружается, событие click срабатывает даже до того, как на него нажали!удалено, хотя, это здорово ......

Ответы [ 3 ]

4 голосов
/ 24 августа 2010

обновление: когда вы выполняете .addEvent('type', function(){ }) и .removeEvent('type', function(){ }), даже если функции могут иметь одинаковые «подписи», они представляют собой две отдельные анонимные функции, назначаемые на лету. функция 1 - это! == для функции 2 - следовательно, нет совпадения, когда MooTools пытается удалить ее.

чтобы иметь возможность удалить точный обработчик, o:

обработчик функций () {...} el.addEvent ('click', обработчик); // .. потом el.removeEvent ('click', обработчик);

Внутренне события на самом деле являются картой ключей к функциям в хранилище элементов. взгляните на эту скрипку, которую я сделал некоторое время назад для другого вопроса SO - http://www.jsfiddle.net/mVJDr/

он проверит, сколько событий сложено для определенного типа события на любом данном элементе (или всех событиях).

аналогично, removeEvent ищет совпадения в хранилище событий - посмотрите на http://jsfiddle.net/dimitar/wLuY3/1/., следовательно, использование именованных функций, как предложил Николаус, позволяет легко их удалять, поскольку оно обеспечивает совпадение.

также вы можете удалить события через element.removeEvents("click") для всех click событий.

Ваша страница теперь оповещается, потому что вы передаете ее как функцию, а также выполняете ее с помощью параметров 'foobar'. METHOD, за которым следует () в javascript, означает ВЫПОЛНИТЬ METHOD ПРЕДВАРИТЕЛЬНО, НЕ ПОЗЖЕ. когда вы привязываете функции к событиям, вы передаете только ссылку (имя метода).

чтобы избежать использования анонимной функции и передачи аргумента, вы можете сделать что-то вроде: 

document.id('foobar').addEvent('click', alert.bind(this, 'foo'));

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

Что касается делегирования события, это: 

parentEl.addEvents({
    "click:relay(a.linkout)": function(e, el) {

    },
    "mouseover:relay(li.menu)": function(e, el) {

    }
});

подробнее об этом здесь http://mootools.net/docs/more/Element/Element.Delegation#Element:removeEvent

имейте в виду, что он не велик / очень стабилен. отлично работает с щелчком мыши, mouseenter не должен использоваться делегированным, только при наведении курсора мыши - это означает, что IE может запускать mouseout, когда это не нужно. как я понимаю, в mootools 2.0

улучшается

edit Обновление для отображения примера связанного и несвязанного метода в шаблоне класса в mootools

http://www.jsfiddle.net/wmhgw/

var foo = new Class({
    message: "hi",
    toElement: function() {
        return this.element = new Element("a", {
            href: "http://www.google.com",
            text: "google",
            events: {
                "click": this.bar.bind(this), // bind it
                "mouseenter": this.bar // unbound -> this.element becomes this
            }
        });

    },
    bar: function(event) {
        event.stop();
        // hi when bound to class instance (this.message will exist)
        // 'undefined' otherwise.
        console.log(this.message || "undefined");
    }
});

document.id(new foo()).inject(document.body);

указатель мыши здесь не будет привязан, где this будет ссылаться на область по умолчанию (т. Е. Элемент, вызвавший событие - a href). когда привязано, вы можете получить элемент через event.target вместо этого - объект события всегда передается функции в качестве параметра.

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

1 голос
/ 24 августа 2010

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

var test = function(){ alert('test: ' + this.id); } 
$('element').addEvent('click', test);

...
$('element').removeEvent('click', test);
0 голосов
/ 20 мая 2014

addEvent : присоединяет прослушиватель событий к элементу DOM.

Пример - 

$('myElement').addEvent('click', function(){
    alert('clicked!');
});

removeEvent : работает как Element.addEvent, но вместо этого удаляет указанный прослушиватель событий.

Пример - 

var destroy = function(){ alert('Boom: ' + this.id); } // this refers to the Element.
$('myElement').addEvent('click', destroy);

//later...
$('myElement').removeEvent('click', destroy);

Это означает, что при добавлении события с помощью обработчика событий не является анонимной функцией , если вы удалите событие, чем , то оно будет удалено .

...