[JS] 버튼의 포커스이벤트 유지 (활성화 유지) 를 고민해보면서

의도 : 버튼 1이 선택된 상태였을 때 버튼 2을 클릭할 수 있다. 버튼 1이 선택되었다는 것을 알려주는 이벤트를 유지하거나 log를 남긴다. 다른 곳을 눌렀을 때 onclick 이벤트를 없애서 동작하지 않게 한다. 

 

 

---

 

 

jQuery의 요소에 의해 발생된 이벤트 기록하기

---

웹킷 - 

monitorEvents(document.body); // logs all events on the body

monitorEvents(document.body, 'mouse'); // logs mouse events on the body

monitorEvents(document.body.querySelectorAll('input')); // logs all events on inputs

monitorEvents(document.getElementById('inputId'));

 

.data('events') : 특정 이벤트가 시작되는 순간 jQuery에 의해 요소에 이미 바인딩 된 모든 이벤트를 기록

function getEventsList($obj) {
    var ev = new Array(),
        events = $obj.data('events'),
        i;
    for(i in events) { ev.Push(i); }
    return ev.join(' ');
}

$obj.on(getEventsList($obj), function(e) {
    console.log(e);
});

 

console.log로 이벤트 찍어보기

$('body').on("click mousedown mouseup focus blur keydown change mouseup click dblclick mousemove mouseover mouseout mousewheel keydown keyup keypress textInput touchstart touchmove touchend touchcancel resize scroll zoom focus blur select change submit reset",function(e){
     console.log(e);
}); 

 

https://www.it-swarm.dev/ko/javascript/jquery%EC%9D%98-%EC%9A%94%EC%86%8C%EC%97%90-%EC%9D%98%ED%95%B4-%EB%B0%9C%EC%83%9D-%EB%90%9C-%EB%AA%A8%EB%93%A0-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%A5%BC-%EC%96%B4%EB%96%BB%EA%B2%8C-%EA%B8%B0%EB%A1%9D%ED%95%A9%EB%8B%88%EA%B9%8C/940107866/

 

 

 

 

 

activeElement

---

• $(document.activeElement) : 현재 포커스가있는 DOM 또는 섀도우 DOM 트리 내를 반환
• dom focus 여부 (현재 활성화 (active)된 요소) 확인하기

 

 

document.activeElement.getAttribute('class');

focusEle = document.activeElement;
if (document.getElementById('nicknameForm') == focusEle) {
  console.log(true);
}

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement

 

 

 

 

 

getSelection

---

사용자 또는 Caret의 위치에 따라 선택된 텍스트의 범위를 나타내는 Selection 객체를 반환한다. 

 

selection = window.getSelection();

function foo() {
    var selObj = window.getSelection(); 
    alert(selObj);
    var selRange = selObj.getRangeAt(0);
    // do stuff with the range
}

https://developer.mozilla.org/ko/docs/Web/API/Window/getSelection

 

 

 

 

 

focus 상태를 부여하거나 클릭 이벤트 트리거

---

 

function(){document.getElementById("focus_text").focus();}

/* 3초 후 새창 닫기 */
setTimeout(function(){open_moveby_window.close();}, 3000);
/* 3초 후 포커스 텍스트 박스에 주기 */
setTimeout(function(){document.getElementById("focus_text").focus();}, 3000);


출처: https://roydest.tistory.com/entry/window객체-focus [로이데스트]

 

$(document).ready(function() {
       $('td').on('click', function(e) {
           console.log('table cell clicked');
       });
});

 

 

 

 

 

focus 상태 유지하기

---

 

$('#SMS').attr('disabled',true);  //SMS버튼 비활성화
$('#SMS').attr('disabled',false);  //SMS버튼 활성화

출처: https://itjjabs.tistory.com/entry/jQuery버튼-활성화-비활성화 [개발]

 

 

 

 

 

제이쿼리 속성 존재 여부

---

Navtive$(this)[0].hasAttribute('name');
$(this).is('[name]');//boolean $(this).filter('[name="jkun"]');