Böngésző független eseménykezelés keretrendszer nélkül
A Weblaboron felmerült téma okán dobtam össze a következő kis kódot, ami keretrendszer nélkül valósít meg böngésző független eseménykezelő hozzácsatolást. A feladat mindössze annyi hogy van pár elemünk, amik történetesen képek, amiknek a class
-a thumb
, és ezeket szeretnénk ha betöltés után, és ha levisszük róla az egeret, akkor 60%-os opacitással rendelkezzenek, ha rávisszük akkor 100%-kal.
(function (window, document, tag, className) {
var elems = document.getElementsByTagName(tag), // Kigyűjtjük a képeket
elemNum = elems.length, // Képek száma
i = 0,
elem,
// Böngésző 'független' opacity állítás
setOpacity = function () {
var div = document.createElement('div')[0],
a,
support;
div.style.display = 'none';
div.innerHTML = '<a href="/a" style="opacity:.55;">a</a>';
a = div.getElementsByTagName('a');
support = /^0.55$/.test(a.style.opacity); // A böngésző támogatja az opacity-t
return function (elm, value) {
var style = elm.style || '',
filter = style.filter || '',
ralpha = /alpha\([^)]*\)/g,
opacity = parseInt(value, 10);
if (!support) { // Nem támogatja az opacity-t, használunk `filter`-t
opacity = opacity + '' === 'NaN' ? '' : 'alpha(opacity=' + value + ')';
// Lecseréljük a korábbi opacity értéket, vagy hozzáadunk egy újat
style.filter = ralpha.test(filter) ?
filter.replace(ralpha, opacity) :
(filter ? filter + '\n' : '') + opacity;
}
else {
style.opacity = opacity + '' === 'NaN' ? 1 : opacity / 100;
}
};
}(),
// Generálunk egy speciális setOpacity függvényt,
// amiben meg van már adva az átlátszóság
setOpacityGen = function (opacity) {
return function (event) {
setOpacity(this, opacity);
};
},
// Böngésző független esemény hozzácsatolás (messze nem tökéletes)
addEvent = function (elm, evt, func) {
// Olyan függvényt állítunk elő amiben a this már az esemény célpontja.
var f = function (event) {
var target, // Az esemény célpontja
returnValue;
if (!event) event = window.event;
if (event.target) target = event.target;
else if (event.srcElement) target = event.srcElement;
if (target && target.nodeType == 3) target = target.parentNode;
event.preventDefault = event.preventDefault || function () {
this.returnValue = false;
};
event.stopPropagation = event.stopPropagation || function () {
this.cancelBubble = true;
};
returnValue = func.call(target, event);
if (returnValue === false) {
event.preventDefault();
event.stopPropagation();
}
return returnValue;
};
if (elm.addEventListener) {
elm.addEventListener(evt, f, false);
}
else if (elm.attachEvent) {
elm.attachEvent(('on' + evt), f);
}
else {
elm['on' + evt] = f;
}
};
// Végigszaladunk a képeken, és hozzáadjuk a képekhez az eseménykezelőket.
for (; i < elemNum; i += 1) {
elem = elems[i];
if (elem.className && className.test(elem.className)) {
addEvent(elem, 'mouseover', setOpacityGen(100));
addEvent(elem, 'mouseout', setOpacityGen(60));
addEvent(elem, 'load', setOpacityGen(60));
}
}
}(this, document, 'img', /(?:^|\s)thumb(?:$|\s)/));
A kód jQuery-vel mindössze ennyi lenne:
(function ($) {
$(function () {
$('.thumb').bind('mouseover mouseout load', function (event) {
$(this).css('opacity', event.type == 'mouseover' ? 1 : .6)
});
});
}(jQuery));