Mootools: события в конструкторе элементов

Question

Я создаю новый элемент в Mootools, у которого есть события, таким образом:

var div = new Element('div', {
id: 'dynamic',
'class': 'injected',
styles: {
    color: '#f55'
},
html: 'Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He\'s got style, a groovy style, and a car that just won\'t stop. When the going gets tough, he\'s really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He\'s got style, a groovy style, and a car that just won\'t stop. When the going gets tough, he\'s really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy.',
events: {
    click: function(event) {
        alert('clicked');
    },
    mouseenter: function(event) {
        var self = $('dynamic');
        self.setStyle('color', '#090');
    },
    mouseleave: function(event) {
        var self = $('dynamic');
        self.setStyle('color', '#f55');
    }
}
});

div.inject(document.body);

Это плохая техника, чтобы получить div с self = $ ('dynamic') в каждом событии?Я пытался

mouseenter: function(event) {
        this.setStyle('color', '#090');
    }.bind(this)

думать, что «это» будет относиться к элементу, который я строил.Но вместо этого оно относится к глобальному окну.

Правильно ли я поступаю?

Спасибо!

Answer 1

вы можете использовать event.target

events: {
    mouseenter: function(event) {
        event.target.setStyle('color', '#090');
    },
    mouseleave: function(event) {
        event.target.setStyle('color', '#f55');
    }
}

Answer 2

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

наличие селектора self = selectorbyid также не очень хорошо, если вы часто повторяете его и заботитесь о производительности.

самый быстрый способ сделать это - сослаться на event.target, который будет div - илиразбить конструктор элемента на две части и добавить события, когда div - это объект, и вы можете связать его.

Недостаток использования event.target - это если вы программно хотите вызвать его по div.fireEvent("click"), что не удастсякак событие не будет передано.но вы можете сделать div.fireEvent("click", { target: div }); и обойти это

, конечно, так как div - это уже имеющаяся переменная, вы можете просто сделать:

mouseenter: function(event) {           
    div.setStyle('color', '#090');
},
mouseleave: function(event) {
    div.setStyle('color', '#f55');
}