Форум

caetus · #1 (**permalink**) 12.06.2015, 00:01

var o = {
age: 22,
fn: function (e) {
	console.log(this) 
// сейчас this ссылается элемент DOM! 
	console.log(e.target)
}
}
document.getElementById('div').addEventListener('click', o.fn, false);


var o = {
age: 22,
handleEvent: function (e) {
//но только меняем названия метода и происходит магия !
	console.log(this.age)
	console.log(e.target)
}
}
document.getElementById('div').addEventListener('click', o, false);

Кто не удивился объясните что там происходит , а то только одни догадки.
о handleEvent нахожу все по англ (((

caetus · #2 (**permalink**) 12.06.2015, 00:33

Разобрался как он работает ! если в addEventListener вместо функции передать object то он начинает искать метод handleEvent. С помощью handleEvent можно легко навешивать кучу событий на 1 элемент .
Пример взят с http://www.thecssninja.com/javascript/handleevent

var obj  =  {
    init: function() {
        document.getElementById("btn").addEventListener("click", this, false);
        document.getElementById("btn").addEventListener("touchstart", this, false);
    },
    handleEvent: function(e) {
        switch(e.type) {
            case "click":
                this.button();
                break;
            case "touchstart":
                this.button();
                break;
        }
    },
    dude: "holla",
    button: function() {
        alert(this.dude);
    }
};

obj.init();

Decode · #3 (**permalink**) 12.06.2015, 00:59

caetus, прикольно, не знал о таком

vkontaktikapi · #4 (**permalink**) 12.06.2015, 01:11

Сообщение от caetus

объясните что там происходит

Примерно это(lite - версия)

<html>
<head>
</head>
<body>

<div id="div1">div with function handler</div>
<div id="div2">div with object handler</div>

<script>



HTMLDivElement.prototype.addEventListener2=function(event, handler){
  if(typeof handler==="function") this["on"+event]=handler
  if(typeof handler==="object") this["on"+event]=function(){handler.handleEvent.call(handler)}
}




handler={
 age: 22,
 handleEvent: function(){alert(this.age)}
}

div1.age=100
div1.addEventListener2("click", handler.handleEvent)
div2.addEventListener2("click", handler)





</script>

</body>
</html>

vkontaktikapi · #5 (**permalink**) 12.06.2015, 01:18

Сообщение от caetus

можно легко навешивать кучу событий на 1 элемент

Ты хотел сказать кучу обработчиков (судя по примеру). Это и так можно делать, и с addEventListener, и без него.

Форум

Справочник

Discord чат

Курсы javascript