[카테고리:] JavaScript

마우스 이벤트 중 마우스 휠 이벤트는 아직까지도 각각의 웹 브라우저에서 다른 형태로 제공되고 있습니다. 아래는 HTML Element에 대한 휠 이벤트를 할당하는 코드입니다.

// for IE, Chrome, Opera
this._div.addEventListener('mousewheel', this._mouseWheel);

// for FireFox
this._div.addEventListener('DOMMouseScroll', this._mouseWheel, false);

IE와 크롬, 오페라에서는 mousewheel이라는 이벤트 이름으로 제공하고 파이어폭스에서는 DOMMouseScroll이라는 이벤트 이름으로 제공됩니다. 이 휠 이벤트를 처리하는 함수의 예(위의 예제의 경우 this._mouseWheel 함수)는 다음과 같습니다.

_mouseWheel: function(e) {
    var delta = 0;

    /* For IE */
    if (!e) e = window.event;
            
    if (e.wheelDelta) delta = e.wheelDelta / 120; /* IE/Chrome/Opera */
    else if (e.detail) delta = -e.detail/3; /* Mozilla case */

    e.preventDefault();
}

휠 이벤트에서 휠에 대한 정도를 얻는 속성도 다릅니다. 파이어폭스에서는 detail이고 그 외에서는 wheelDelta입니다.

UTF-8은 ASCII 코드값은 1바이트로, 유럽권 문자는 2바이트로, 아시아권 문자는 3바이트로 구성함으로써 전세계 모든 언어를 처리할 수 있는 유니코드 중 하나입니다. 저는 기존에 편의상 EUC-KR을 사용했으나 이제부터는 UTF-8을 먼저 고려하고 사용해야한다고 생각하게 되었습니다.

아래의 코드는 DataView 객체에 저장된 UTF-8 코드값으로부터 String으로 구성하는 코드입니다. 변환 속도를 위해 다소 코드가 난해 합니다. 제가 개발한 서버에서 문자열 데이터를 UTF8로 인코딩된 바이너리 데이터로 웹브러우저로 보내게 되는데 이때 사용한 코드입니다.

function getStringUTF8(dataview, offset, length) {
    var s = '';

    for (var i = 0, c; i < length;) {
        c = dataview.getUint8(offset + i++);
        s += String.fromCharCode(
            c > 0xdf && c < 0xf0 && i < length - 1
            ? (c & 0xf) << 12 | (dataview.getUint8(offset + i++) & 0x3f) << 6 
            | dataview.getUint8(offset + i++) & 0x3f
            : c > 0x7f && i < length
            ? (c & 0x1f) << 6 | dataview.getUint8(offset + i++) & 0x3f
            : c
        );
    }
    
    return s;
}

짧은 코드이지만 몇일 동안 고민하고 고민하던 차에 만난... 저에게는 매우 의미있고 값진 코드입니다. ^^;

일반적인 XML 형식으로 구성된 문자열을 파싱(Parsing)하기 위해서 XMLDocument 객체로 변환해야 할 경우가 있습니다. 저 같은 경우 Cross Domain 문제로 인해 Proxy를 통해 통신을 하고자 했는데, 해당 Proxy 서버가 다루는 데이터가 범용인지라 이 서버를 통해 AJAX 통신을 하면 XML 객체로 받아지지 않고 Text로 받아지는 문제가 있어 부득이 String을 XMLDocument 객체로 변환해야 했습니다.

function getXmlFromString(xmlStr) {
    var parseXml;

    if (window.DOMParser) {
        var dp = new window.DOMParser();
        return dp.parseFromString(xmlStr, "text/xml");
    } else if (typeof window.ActiveXObject != "undefined" 
        && new window.ActiveXObject("Microsoft.XMLDOM")) {
        var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.loadXML(xmlStr);
        
        return xmlDoc;
    }

    return null;
}