728x90 300x250 SMALL javaScript545 trigger 버튼 클릭 없이 이벤트 발생 시키기 trigger $대상.trigger("이벤트이름") 실제 버튼을 클릭하지않았지만 클릭 한것 같은 이벤트를 수동으로 발생시켜야 할경우 트리거 메서드를 사용할 수 있다. 버튼1 버튼2 위와 같이 2개의 버튼이 있다고 했을때 버튼1을 눌렀을때 버튼2도 클릭한 것 같은 효과를 줄 수 있다. ("#btn1").on("click",function(){ console.log("버튼1"); $("#btn2").trigger("click"); }) $("#btn2").on("click",function(){ console.log("버튼2"); }) 이처럼 trigger()메서드를 사용하면 수동으로 클릭하지 않은 버튼도 클릭하게 할 수 있다. 2023. 3. 14. [버블링]아직 만들어지지 않은 요소 이벤트 처리하기 버블링을 활용하면 아직 만들어지지 않은 요소에서 발생하는 이벤트를 처리 할 수 있다. 아래와 같은 html코드가 있을때 add list1 list2 list3 list4 add 버튼을 클릭하면 동적으로 li추가 스크립트 let count=4; $(".add").click(function(){ count++ $(".list").append(`list${count}`); }) 먼저 일반 클릭 이벤트를 사용해서 테스트를 해보자 $("ul.list li").click(function() { $(this).css('background-color','#ddd'); }) 결과를 확인하면 새로 만들어진 li에는 색이 변경되지 않는다. 이유는 이벤트를 등록하는 시점에 새로 추가된 li는 존재하지 않아서 이벤트 리스너가 .. 2023. 3. 13. [jQuery] event.target와 this의 차이 + 이벤트 위임 예시 event.target 이벤트가 발생한 정확한 지점에 대한 정보를 반환한다. event.target는 실제 이벤트가 시작된 target요소 버블링 되어도 변하지 않음 this(=event.curentTarget)는 현재 샐행중인 핸들러가 할당된 노드를 참조 이벤트 위임(event delegation) 요소마다 이벤트 핸들러를 할당하지 않고 공통 조상요소에 할당해서 한개의 이벤트 핸들러로 여러 요소를 한꺼번에 처리 할 수 있다. 공통 조상에 할당한 핸들러에서 event.target를 이용하면 실제 이벤트가발생한 위치를 알 수 있고 이를 이용해서 이벤트를 핸들링 할 수 있다. 하나의 이벤트 리스너로 여러 이벤트 처리하기 $대상.on("이벤트명", "선택자", 이벤트 리스너) 아래는 ul li리스트 중 하나를.. 2023. 3. 12. 버블링 막기 event.stopPropagation() 버블링은 이벤트 흐름의 마지막 단계로 이벤트가 발생한 노드 부터 최상위노드 까지 흐르게 되는데 모든 이벤트가 버블링이 발생하는것이 아니기때문에 이벤트 객체의 bubbles 프로퍼티 값을 확인하면 된다. bubbles 프로퍼티 값이 true면 이벤트 객체에서 제공하는 stopPropagation() 메서드를 통해 버블링을 막을 수 있다. 아래 링크에서 버블링 속성값을 확인 할 수 있다. https://www.w3.org/TR/DOM-Level-3-Events/ UI Events www.w3.org 버블링실행 버블링막기 버블링 실행을 눌러보면 btn1에 걸린 이벤트가 실행되고 버블링 단계를 거치면서 #btn1의 상위 노드인 #btn-wrap의 이벤트 리스너도 실행이 된다. 하지만 #btn2를 실행하면 #bt.. 2023. 3. 10. 이전 1 ··· 44 45 46 47 48 49 50 ··· 137 다음 728x90 반응형 LIST