интересно поведения addEventListener
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 нахожу все по англ ((( |
Разобрался как он работает ! если в 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();
|
caetus, прикольно, не знал о таком :)
|
Цитата:
<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>
|
Цитата:
|
| Часовой пояс GMT +3, время: 11:37. |