Language/JavaScript(ES6) (48) 썸네일형 리스트형 [JavaScirpt]버블링과 캡처링 만약 input태그 fieldset태그 body태그 html태그에 eventListener를 부여했다고 하자. 그럴때 input의 event를 실행시키게 되면 event의 영역인 fieldsetfieldset의 영역인 bodybody의 영역인 html이각각 실행 될 것이다. 이것이 위에서 아래로 진행된다면 캡쳐링 아래에서 위로 진행된다면 버블링이다. 1. 캡처링다음은 캡처링의 예제이다. 결과는 위 코드와 같은데 콘솔부분만 설명해보자면event.target.nodeName은 그 이벤트(마우스클릭)의 타겟이된 객체의 노드네임을 호출하고this.nodeName은 이벤트(핸들링?리스너?)가 실행된 노드네임을 호출한다. 그리고 결과값으로 다음과 같이 나오는데여기서 HTML BODY FIELDSET INPUT순으로.. [JavaScirpt]이벤트 등록(addEventListener) 1. addEventListener사용방식은 위의 코드와 같다.1.이벤트리스너를 달아줄 객체 = t그리고 괄호는 순서대로(이벤트, 리스너)이다. 해석해보면객체t에 이벤트리스너를더하는데(클릭이벤트를통해서이고, 경고문을 출력하는 기능이다.)이다. 2. 이벤트 리스너를 쓰는 이유 위의 코드는 프로퍼티 리스너이다.이 프로퍼티 리스너는 한 객체의 이벤트에 하나의 리스너밖에 가질 수 없다. 고로 클릭이벤트 발생시에 alert(2)만 출력 될 것이다. 그래서 위의 코드와 같이 이벤트 리스너를 쓰는것을 권장한다. 클릭이벤트 발생시에alert(1)과 alert(2)가 동시에 실행된다. 3. 하나의 리스너로 여러 이벤트리스너 실행하기. t1과 t2 다른 객체이지만하나의 리스너를 사용하고 있다. [JavaScirpt]이벤트 등록 1. inline방식 태그에 이벤트를 설치하는 방식 예시 onclick="alert('Hello world') 그런데 아래 4번째 라인을 살펴보자 this.value를 호출하라고 되어있는데 여기서 this란 함수가 속해있는 객체를 의미한다. 고로 4번째 라인은 alert함수가 속해있는 태그 엘리먼트, 객체의 value값을 출력하게 되어진다. 2.프로퍼티 리스너 해석 t라는 변수에 target이라는 id를 가진 태그를 리턴하고 그 t라는 객체에 onclick이라는 약속된 자바스크립트 객체 속성에 함수를 지정해서 그 함수를 실행시킨다. 다음 빨간 박스가 이벤트핸들러이다. 그리고 이 이벤트핸들러는 첫번째 파라미터로 이벤트 객체라는 것을 전달 받기로 약속되어 있음. 이 이벤트 객체는 프로퍼티로 타겟이라는것을 가.. [JavaScript] 이벤트 용어 용어 정리 event : 무언가 행위가 발생할 때, 실행되는 행위 eventTarget : 이벤트가 일어날 행위의 대상 (예를 들어 버튼) eventType : ~했을 때(onclick, onchange와 같은 것) eventHandler : ~했을 때 일어나는 행위(alert와 같은것) [JavaScript]Element의 위치 및 크기 알아내기 var t = document.getElementById('target');console.log(t.getBoundingClientRect()); 위 코드에서 getBoundingClientRect()메소드는 콘솔에 이런 값을 리턴하는데 이는 위치와 크기에 관한 리턴값이다. 위의 사각형이 target엘리먼트의 형태인데 top과 bottom left right는 각각 BODY태그에서 얼마나 떨어져 있는지 width와 height는 엘리먼트의 텍스트 노드 + 패딩값 + 보더값을 나타낸다. 만약 엘리먼트가 중첩되어 있다면 어떻게 될까?위와 같이 엘리먼트를 중첩했을 때 coding 엘리먼트와 문서와의 거리는 200px이다. getBoundingClientRect를 호출해보자. 뭐 결과는 같다. 예외가 있다면 t.. [Javascript] Text API 총 네가지 API를 살펴보자 첫번째 버튼은 callAppendData()라는 함수를 호출한다. callAppendData는 target엘리먼트에 appendData 메소드를 실행한다. appendData는 data.value를 파라미터로 두는데 이는 첫번째 input박스의 value값이다. 결론적으로 Cording everybody!(target엘리먼트) 뒤에 value값이 추가된다. 두번째 버튼은 callDeleteData()라는 함수를 호출한다. target엘리먼트에 deleteData 메소드를 실행한다. deleteData메소드는 첫번째 값 두번째 값 모두 정수를 파라미터로 받으며, 순서를 뜻한다. 만약 target.deleteData(5,5);라면 Cording everybody!에서 다섯번째 인.. [Javascript] Text객체 피 자 여기서 는 엘리먼트 객체이다. 그리고 '피' 라는 문자는 텍스트 객체이다. (그리고 텍스트 객체는 캐릭터 데이터의 기능을 상속받음) 다음을 보자 첫번째 t1은 결과 값으로 Hello world이 리턴된다. 만약 t1.firstChild를 하게되면 Hello world가 출력될 것이다. 그럼 t2는? 태그와 태그 사이에 공백이 있기때문에 t2의 리턴값은공백(#TEXT)이 출력될 것이다. 다음 코드는 변수 t에 li엘리먼트의 자식객체인 'html'텍스트를 담았다. 그리고 그 값에 nodeValue혹은 data라는 메소드를 입력하면 온전히 'html'라는 값만을 리턴하며 t.nodeValue = JavaScript 혹은t.data = JavaScript 와 같은 식으로 값을 수정도 가능하다. [Javascript]Document객체 Node구조 위 코드를 보자 document는 window객체의 자식이다. 고로 window.document이고 그럼 document의 자식은 무엇일까? 바로 Doc타입과 html이다. 예를 들어 document.createElement(li);를 하게 되면 li태그 엘리먼트가 생성되는데 이는 곧 document의 자식객체 중html에 엘리먼트를 생성하는 것이다. 다른 예시를 보자 document.title 을 입력하면 어떻게 될까? document객체의 자식인 html태그에서 자식인 title을 찾아서 값을 리턴한다. 이전 1 2 3 4 5 6 다음
