В пятой главе этой серии мы прыгнули в грязный мир слушателей событий. В этом эпизоде мы только намочили ноги; однако сегодня мы сделаем еще один шаг вперед, внедрив гораздо более эффективное решение. По пути мы изучим множество новых методов.
Полный скринкаст
Наш окончательный код
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
var addEvent = (function( window, document ) {
if ( document.addEventListener ) {
return function( elem, type, cb ) {
if ( (elem && !elem.length) || elem === window ) {
elem.addEventListener(type, cb, false );
}
else if ( elem && elem.length ) {
var len = elem.length;
for ( var i = 0; i < len; i++ ) {
addEvent( elem[i], type, cb );
}
}
};
}
else if ( document.attachEvent ) {
return function ( elem, type, cb ) {
if ( (elem && !elem.length) || elem === window ) {
elem.attachEvent( ‘on’ + type, function() { return cb.call(elem, window.event) } );
}
else if ( elem.length ) {
var len = elem.length;
for ( var i = 0; i < len; i++ ) {
addEvent( elem[i], type, cb );
}
}
};
}
})( this, document );
// Example Usage
var lis = document.getElementsByTagName(‘li’);
addEvent( window, ‘click’, function() {
this.style.border = ‘1px solid red’;
});
|
Обратите внимание, что этот код немного пересмотрен, основываясь на некоторых отличных отзывах в разделе комментариев.