Web/JavaScript (39) 썸네일형 리스트형 브라우저 이벤트 정리 1. 마우스이벤트 1. 마우스이벤트 (마우스 뿐 아니라 핸드폰, 태블릿에도 생기는 이베트임) mousedown·mouseup 요소 위에서 마우스 왼쪽 버튼을 누를 때, 마우스 버튼 누르고 있다가 뗄 때 발생 mouseover·mouseout 마우스 커서가 요소 바깥에 있다가 요소 안으로 움직일 때, 커서가 요소 위에 있다가 요소 밖으로 움직일 때 발생 mousemove 마우스를 움직일 때 발생 click 마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown 이벤트와 mouseup 이벤트를 연달아 발생시킬 때 실행 dblclick 동일한 요소 위에서 마우스 왼쪽 버튼을 빠르게 클릭할 때 발생합니다. 요즘엔 잘 안씀 contextmenu 마우스 오른쪽 버튼을 눌렀을 때 발생. 참고로 특별한 단축키를 눌러도 마우스 .. 브라우저 기본 동작 상당수의 이벤트에는 브라우저에 의한 특정 동작을 자동 수행한다 예시 a > href 해당 URL 이동 submit > from 전송 기본 동작 막기 1. event 객체에서 event.preventDefault() > on 가 아닌 경우는 다 무시됨 true든 return이든 다 안됨 2. on 에서 false 반환 false반환 preventDefault 동작을 막은 후 다른 함수 실행 menu.onclick = function(event) { if (event.target.nodeName != 'A') return; let href = event.target.getAttribute('href'); alert( href ); // 서버에서 데이터를 읽어오거나, UI를 새로 만든다거나 하는 등의 작업이 .. 이벤트 위임(event delegation) 공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있다. 이를 이용해 이벤트를 핸들링한다 예시-> table 클릭했을때 "td" 엘리먼트에서 발생한 것만 작업하기 table.onclick = function(event) { let target = event.target; // 클릭한 타겟 찾기 if (target.tagName != 'td') return; doSomething(target); // td 엘리먼트에서 무언가를 실행 }; 여기서 만약 td 의 자식에 이벤트가 있는지를 찾아해야한다 table.onclick = function(event) { let td = event.target.closest('td'); // (1) if (!td) re.. [Bubbling, Capturing] 버블링 - 한 요소에 이벤트가 발생하면, 할당된 해들러가 동작 하고 그 이후 부모 요소 핸들러가 동작하여 가장 최상단 조상ㅇ요소로 가각 핸들러가 동작한다. Form > Div > P 형태로 중첩된 구조 일 경우 에 할당된 onclick 핸들러가 동작 바깥의 에 할당된 핸들러가 동작 그 바깥의 에 할당된 핸들러가 동작 document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작 event.target 부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있다. 이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있다. event.target과 this(=event.currentTarg.. [browser event] 자주 이용하는 DOM 이벤트 마우스 이벤트: click – 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때(터치스크린이 있는 장치에선 탭 했을 때) 발생 contextmenu – 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생 mouseover와 mouseout – 마우스 커서를 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때 발생 mousedown과 mouseup – 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때, 마우스 버튼을 뗄 때 발생 mousemove – 마우스를 움직일 때 발생 폼 요소 이벤트: submit – 사용자가 을 제출할 때 발생 focus – 사용자가 과 같은 요소에 포커스 할 때 발생 키보드 이벤트: keydown과 keyup – 사용자가 키보드 버튼을 누르거나 뗄 때 발생 문서 이벤트: DOMCont.. [ES6] promise, async 와 await 상태를 나타내는 state는 pending(대기),rejected(거부됨),fulfilled(이행됨) 세가지 Promise를 선언할때 받는 파라미터는 resolve과 reject를 받는데 resolve : 성공했을때, reject는 실패했을때 사용 const pr = new Promise((resolve, reject ) => { setTimeout(()=>{ resolve('OK');//성 },3000) }); //응답후 처리 pr.then( function(result){} ).catch( function(err){} ).finally{ function(){ console.log('주문 '); } } Promise.all : 프로미스들을 한번에 실행하고싶을때 사용 Promise.race : 프로미스들.. DOMContentLoaded, load, beforeunload, unload 이벤트 https://ko.javascript.info/onload-ondomcontentloaded#ref-401 DOMContentLoaded, load, beforeunload, unload 이벤트 ko.javascript.info HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여합니다. DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않습니다. load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다. beforeunload/unload – 사용자가 페이지를 떠날 때 발생합니다. D.. [Mozilla WEB API] HTMLElement: dataset property dataset 은 사용자 정의 데이터 속성으로 HTMLElement 읽기/쓰기 액세스를 제공한다. An HTML data-* attribute and its corresponding DOM dataset.property modify their shared name according to where they are read or written:In HTML The attribute name begins with data-. It can contain only letters, numbers, dashes (-), periods (.), colons (:), and underscores (_). Any ASCII capital letters (A to Z) are converted to lowercase. I.. 이전 1 2 3 4 5 다음
