블로그 내 검색

2011. 12. 16.

유용하지만 잘 알려지진 않은 자바스크립트 속성


바로 본론으로...

event.button
button이라는 속성은 이벤트 객체(모든 이벤트 리스너에 첫번쨰 인자가 되는 객체)의 프로퍼티이다.
여기서 버튼이란 것은 마우스의 어떤 버튼을 클릭했는가에 따라 다른 값을 가진다.
하지만 역시 좀 개성있는 Internet Explorer에서는 버튼의 값이 일반적 W3C 브라우저와 다르다

아래는 그 테이블이다.

 구분  W3C  Internet Explorer
 왼쪽 버튼 클릭  0  1
 가운데 버튼 클릭  1  4
 오른쪽 버튼 클릭  2  2

만일 이것을 실제 적용하려면 표준과 비표준을 구분하던가, 오른쪽 마우스 버튼만을 캐치하는 방법이 좋겠다.(오른쪽은 표준 비표준 둘다 같다.)
더 많은 프로퍼티가 있지만, 주로 쓰이는 것은 저 셋 값일 것이다.



event.relatedTarget/event.fromElement
이 속성들도 역시 이벤트 객체의 속성으로, 마우스의 추적에 관련된 속성이다.
W3C가 relatedTarget이고 Internet Explorer가 fromElement이다.
이 속성에는 마우스가 한 엘리먼트에서 다른 엘리먼트로 옮겨갔을 때, 전에 있던 엘리먼트의 레퍼런스가 지정된다.
잘 사용하면 엘리먼트의 순서 관련 이벤트나, 드래그 앤 드롭시 제약같은 걸 쉽게 컨트롤할 수 있을것이다.



event.currentElement/event.toElement
방금전 속성과 대비되는 속성이다.
W3C가 currentElement이고 Internet Explorer가 toElement이다.
이 속성에는 마우스가 한 엘리먼트에서 다른 엘리먼트로 옮겨갔을 때, 현재 있는 엘리먼트의 레퍼런스가 지정된다.



window.beforeunload
윈도우 객체의 이벤트 리스너중 하나이다.
이 이벤트는 리스너가 문자열을 반환할 경우, 창이 어떠한 이유(새로고침, 닫기, 뒤로가기 등등)에서건 언로드되기 전에 핸들러가 호출되며, 승인할 경우에만 창이 언로드된다. 반환 문자열은 안내 문구로 반환 문자열이 표시되지만, FireFox는 문자열 출력을 지원하지 않고 단순히 페이지에서 나갈지 여부만을 묻는 모질라 자체에서 정의한 내장 문자열이 출력된다.

생소하게 느껴질거 같아 코드를 첨부한다.
window.onbeforeunload = function (e) {
    // 작업이 저장되지 않았을 경우에는 안내 메시지와 확인 창을 보여준다.
    if(!isJobSave) {
        return '페이지를 벗어날 경우 작업 내용이 저장되지 않습니다. 나가시겠습니까?';
    }
};


element.select
입력가능한 폼 엘레먼트(input, textarea 등)에 입력된 문자열을 마우스로 끌어 선택했을 때 발생한다.
Internet Explorer와 W3C가 이벤트 발생 시점이 다른데, Internet Explorer는 새로운 문자열이 선택될 때마다 리스너가 호출되며 표준 브라우저는 선택을 시작한 뒤 마우스 버튼을 떼면 리스너가 실행된다.

필드 안의 텍스트의 선택을 금지한다던가 하는 용도로 쓸 수 있지만, 그럴 일이 있을까?




element.innerText
innerHTML은 익히 알겠지만 innerText는 잘 모를 수도 있을 것이다.
말 그대로 엘리먼트 안의 텍스트만을 반환한다.
애석하지만 Firefox는 지원하지 않아 따로 구현을 해야 한다.

다음처럼 구현할 수 있다.

function getText(element) {
    var ret = '';
    
    // innerText 프로퍼티가 있다면 그냥 그 프로퍼티값을 리턴
    if(element.innerText) {
        ret += element.innerText;
    }
    else {
        // 그렇지 않다면 텍스트노드의 nodeValue 값을 재귀호출로 더해가며 출력
        element = element.childNodes || element;
        for(var i=0; i < element.length; i++) {
            if(element[i].nodeType !== 1) {
                ret += element[i].nodeValue;
            }
            else {
                ret += getText(element[i]);
            }
        }
    }
    return ret;
}



element.cloneNode(true|false)
엘리먼트를 완전 복제한다.
인자로 불린값을 받는데, true일 경우 하위 노드까지 복제하고 false일 경우엔 자신만을 복제한다.

댓글 없음:

댓글 쓰기