Ugrás a tartalomra

Böngésző független eseménykezelés keretrendszer nélkül

Címkék:

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));

Frissülés

Hozzáadtam az eseménykezeléshez a preventDefault és stopPropagation kezelését.
--
Poetro