반응형 이벤트8 ReactJs - input input PhoneForm.js import React, { Component } from 'react'; class PhoneForm extends Component { state = { name: '' } handleChange = (e) => { this.setState({ name: e.target.value }) } render() { return ( {this.state.name} ); } } export default PhoneForm; App.js import React, { Component } from 'react'; import PhoneForm from "./components/PhoneForm"; import './App.css'; class App extends Componen.. 2021. 1. 6. ReactJs - 이벤트 이벤트 리액트는 사용자와 상호작용하는 애플리케이션의 핵심인 이벤트를 리액트에서 구현하는 방법이 있다. 이벤트 state props 그리고 render 함수 App.js import React, {Component} from 'react'; import Subject from "./component/Subject" import TOC from "./component/TOC" import Content from "./component/Content" import './App.css'; class App extends Component { constructor(props){ super(props); this.state = { mode: 'TEST1', //추가 TEST1:{title:'TEST1', desc:.. 2020. 12. 31. JQuery Event Event 시스템에서 일어나는 사건을 의미한다. javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등) 이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다. jQuery의 이벤트 크로스브라우징의 문제를 해결해줌 on로 이벤트 핸들러를 설치하고, off로 제거 trigger로 이벤트 핸들러를 강제로 실행 (예제2) click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함 예제 코드 2020. 12. 25. Javascript 이벤트 타입 - 마우스 마우스 이벤트 타입 웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다. click : 클릭했을 때 발생하는 이벤트. dblclick : 더블클릭을 했을 때 발생하는 이벤트 mousedown : 마우스를 누를 때 발생 mouseup : 마우스버튼을 땔 때 발생 mousemove : 마우스를 움직일 때 mouseover : 마우스가 엘리먼트에 진입할 때 발생 mouseout : 마우스가 엘리먼트에서 빠져나갈 때 발생 contextmenu : 컨텍스트 메뉴가 실행될 때 발생 아래의 예제처럼 쓰인다. 자바스크립트 문서의 일부분. t.addEventListener('click', handler); t.addEventListener('dblclick', handler); t.addEventListener.. 2020. 11. 26. Javascript 이벤트 타입 - 문서 로딩 문서 로딩 웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 load, DOMContentLoaded이다. jinseok 위의 코드의 실행결과는 null이다. 왜냐하면 스크립트 문서보다 아래쪽에 위치한 jinseok가 로딩되기 전에 자바스크립트가 실행되었기 때문이다. 이를 해결하기 위한 방법은 아래와 같이 스크립트를 문서 끝에 위치시키는 것이 있지만 또 다른 방법은 load 이벤트 타입을 이용하는 것이다. ↓ jinseok 그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다. 이것을 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다. 하지만 DOMContentLoaded는 문서에.. 2020. 11. 26. Javascript 이벤트 - 기본동작의 취소 기본동작의 취소 웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다. 폼에서 submit 버튼을 누르면 데이터가 전송된다. a 태그를 클릭하면 href 속성의 URL로 이동한다. 이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다. inline 이벤트의 리턴값이 false이면 기본 동작이 취소된다. 이벤트 발생 방지 블로그 property 방식 리턴 값이 false이어도 기본동작이 취소된다. addEventListener 방식 이벤트 객체의 preventDefault 메소드를 실행해도 기본 동작이 취소된다. ※ ie9 이하 버전에서는 event.return.. 2020. 11. 23. Javascript 이벤트 - 등록방법 등록방법 이벤트 프로그래밍을 하기 위해서는 이벤트의 대상에 이벤트 핸들러를 등록해줘야 한다. 웹브라우저에서는 크게 3가지 종류의 등록방법을 제공한다. inline 인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다. 인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다. 하지만 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 바람직한 방법이라고 할수는 없다. 이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 참조할 수 있다. 프로퍼티 리스너 프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점이 있다. var t =.. 2020. 11. 23. Javascript 이벤트 이벤트 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. 위의 코드는 onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행된다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이러한 방식을 이벤트 프로그래밍이라고 한다. event target target은 이벤트가 일어날 객체를 의미한다. target은 버튼 태그에 대한 객체가 된다. event type 이벤트의 종류를 의미한다. 위의 예제에서는 click이 이벤트 .. 2020. 11. 23. 이전 1 다음 반응형
