css 프로퍼티인 pointer-events에 대하여 알아봅니다. 어떻게 사용하고 언제 사용할까요?# CSS Property pointer-eventscss를 사용하여 클릭이벤트를 제어할 수 있을까요? 그 방법 중 하나가 바로 CSS 프로퍼티인 pointer-events입니다. 이 프로퍼티를 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있습니다. 아래는 간단한 사용 방법입니다..prevent-click { pointer-events: none; }이 속성은 CSS3의 프로퍼티로 선택 가능한 옵션은 아래와 같이 세 가지가 있습니다.none // 클릭 이벤트를 적용하지 않음auto // 브라우저 자동으로 선택함inherit // 상속 되어짐참고로 만약 none의 값을 사용할 경우 클릭 이벤트가 동작하지 않으며 마우스 클릭과 관련된 효과 역시 동작하지 않습니다. 예를들어 :hover를 사용하는 경우에도 적용되지 않으니 참고하세요.그럼 아래에서는 예제를
2019-03-14 00:32:47웹페이지에서 버튼이나 어떤 엘리먼트를 반드시 직접 클릭하지 않고도 클릭 이벤트를 동작하는 방법이 있습니다. 제이쿼리의 경우 trigger() 메소드가 있는데요 ~ 자바스크립트에서 구현할 경우 어떻게 하면 동작하는지 알아보겠습니다.제이쿼리 trigger() 바로가기 >https://webisfree.com/2014-01-03/[jquery]-이벤트의-강제-실행-커스텀-이벤트-trigger()# 자바스크립트 클릭하지 않고 클릭 이벤트 동작하기이처럼 마치 클릭한 것처럼 이벤트를 동작 시키는 방법인 가상 클릭 방법을 알아보겠습니다. 이 방법은 크게 두 가지가 있는데 하나는 click()을 사용하는 것이고 다른 하나는 createEvent()를 사용하여 커스텀이벤트를 만드는 방법입니다.1. click() 사용하기2. createEvent() 커스텀 이벤트 만들기먼저 click()을 사용하는 방법입니다.! click()을 사용하여 클릭 이벤트 동작시키기click()은 DOM에 적용하는 내장
2019-02-15 01:32:41VueJS에서 컴포넌트 상호간 데이터를 주고 받을 수 있는 이벤트버스(EventBus)를 알아봅니다. 이벤트버스는 무엇이고 언제 왜 사용할까요?# VueJS의 EventBus란VueJS의 eventBus는 앱 내부에서 컴포넌트 사이아 부모 자식 사이에 데이터를 주고 받을 수 있는 방법 중 하나인데요 매우 많이 사용됩니다. 그 이유는 기본적으로 props를 사용하여 부모와 자식 사이의 데이터를 전달하기 때문에 해당 컴포넌트의 스코프에 제한되죠. 하지만 이 방법은 부모와 자식 컴포넌트는 물론 최상위 루트 컴포넌트나 다른 컴포넌트와의 데이터도 주고 받을 필요가 있습니다. 이럴때 유용하게 사용할 수 합니다.(데이터를 주고 받는 방법으로 props 속성이 가장 많이 사용됩니다. 하지만 부모에서 자식 사이라는 범위 때문에 아주 먼 컴포넌트 사이는 EventBus 또는 Vuex를 사용할 수 있습니다.)요약하면 VueJS EventBus를 사용하면 아래와 같은 장점이 있습니다.전역으로 데이터
2018-12-03 17:12:52세종대학교에서 매우 색다른 이벤트가 펼쳐진다. 다름아닌 인간과 인공지능의 대결이다. 그것도 스타크래프트!!인간과 인공지능 과연 승자는?바둑 알파고와 이세돌의 흥분이 아직도 식지 않은 지금 또 다른 종목에서 인간과 AI 인공지능의 대결이라 더 기대된다. 과연 누가 승리하게될지도 궁금하지만 인공지능이 어디까지 왔는지 가늠해볼 수 있는 좋은 기회가 될 것같다. 한편 댓글을 통해 이번 경기에 많은 관심을 보이며 특히 누가 출전하는지 궁금해하는 글이 많았다.출처) 세종대학교 공식 홈페이지이번 행사는 세종대학교와 세종사이버대학교의 주최로 삼성SDS에서 후원하며 세종대에서 10월 31일에 열리게된다. 참가인원은 누구나 가능하나 선착순으로 참가가 가능하다. 자세한 사항은 세종대 페이스북에서 볼 수 있다.바로가기 > www.facebook.com/sejongpr장소 - 세종대학교 학생회관 지하 1층 대강당일시 - 2017년 10월 31일 오후 1시부터
2017-10-24 11:38:28자바스크립트의 이벤트 중 클릭한 요소를 가져오는 방법으로 event 객체의 target 또는 currentTarget 프로퍼티를 사용합니다. 이때 이 둘의 차이점은 무엇이고 어떤 경우에 무엇을 사용해야하는지 알아봅니다.event.targetevent.currentTarget# 둘의 차이점은?event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환합니다. 즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용합니다. 하지만 event.currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환합니다. 아래 에제를 봐주세요.<div onclick="checkTarget();"> <span>test</span></div>아래는 스크립트 코드입니다.function checkTarget(event) { var ele = event.currentTarget; console.log(ele);}만약 사용자가 div 내부의 span 태
2017-09-06 05:31:32마우스 우측버튼은 웹에서 잘 사용되지 경우가 없지만 백오피스, 관리자 페이지 등에 사용하면 매우 편리한 UI를 제공할 수 있습니다. 만약 오른쪽 버튼을 자바스크립트를 사용하여 제어할 필요가 있는 경우라면? 어떻게 사용할까요? 그리고 어떤 부분을 생각해봐야하는지 알아봅니다.먼저 아래는 마우스 우측버튼 클릭에 따른 이벤트 호출 방법에 대하여 자세하게 알아봅니다.# 마우스 우측버튼 이벤트 구현시 고려할 점먼저 웹에서 우측 버튼 클릭을 사용하려면 가장 먼저 두 가지 사항에 대하여 생각해볼 필요가 있습니다.우측 버튼시 이벤트 호출 방법브라우저 기본 이벤트 막는 방법마우스 우측버튼을 사용하기 위해서 이벤트 바인딩에 mousedown을 사용할 수 있습니다. mousedown 이벤트를 등록하면 좌측 또는 우측 버튼 클릭시 모두 이벤트가 동작하게 됩니다. 이 경우 아래와 같이 스크립트를 작성합니다.# 마우스 우측버튼 이벤트 등록하기아래 스크립트는 자바스크립트를 사용한 이벤투 구현방법입니다.docum
2017-09-06 05:08:02자바스크립트의 객체 내에서 setTimeout() 구문을 사용할 경우 자기 자신인 객체를 호출하는 방법을 알아봅니다.먼저 아래처럼 객체 하나를 만들고 간단한 setTimeout()을 실행하는 함수가 내부에 있다고 생각해봅니다.var obj = { site: 'webisfree', getSite: function() { alert(this.site); }};위 객체는 사이트 이름과 사이트 이름을 출력하는 프로퍼티, 메소드를 각각 가지고 있습니다. 실행하면 사이트네임 webisfree가 잘 출력됩니다. 여기서 만약 메소드 getSite()가 3초 후 출력될 수 있도록 setTimeout()을 추가하면 어떻게 될까요?! 타이머 3초 후 출력되는 코드var obj = { site: 'webisfree', getSite: function() { setTimeout(function() { alert(this.site); }, 3000); }};위 코드는 se
2017-09-04 04:12:05입력폼 ~ 서버에 값을 전달하거나 호출하는 경우 input 태그에서 엔터를 누를 경우 의도하지 않은 submit이 일어나는 경우 이를 막기위한(prevent) 방법을 알아봅니다.먼저 input 태그의 wrapper 태그로 form의 여부를 확인합니다. form 태그가 없는 경우에는 엔터키가 동작하지 않으므로 이를 빼는 것이 가장 빠른 방법입니다.i. form 태그를 제거하기> 수정 이전<form> <input type="text" /> </form>> 수정 이후 (form 태그를 div로 변경)<div> <input type="text" /> </div>ii. keydown이벤트 추가 후 엔터키 이벤트 제거하기다른 방법으로 엔터키 발생시 preventDefault()를 추가합니다.- 모든 엘리먼트에 적용하기document.addEventListener('keydown', function(event) { if (event.keyCode === 13) { e
2017-08-07 09:07:38ngClick 디렉티브를 사용하여 이벤트를 호출시 클릭했던 엘리먼트를 불러오는 방법에 대하여 알아봅니다. 만약 아래 코드의 버튼을 클릭한 후 ng-click 디렉티브에서 클릭된 event 객체의 요소를 알아내려면 어떻게할까요?# AngularJS 클릭한 요소 알아내기먼저 클릭이벤트가 발생할 경우 자바스크립트는 이벤트 객체에 해당 정보를 저장합니다. 이벤트 객체를 angular js에서 반환받는 방법과 어떤 속성이 클릭 요소를 가지고 있는지 알아야합니다.<button ng-click="clickMe()">Click</button>이때 스크립트 코드에서 이벤트 객체는 $event입니다. $event.currentTarget은 클릭된 요소를 가지고 있습니다.$scope.clickMe = function($event) { var elem = $event.currentTarget;}자바스크립트의 event.target과 혼동될 수 있으니 알아둬야 합니다. 참고로 크로스 브라우징(브라우저 호
2017-07-07 11:24:12자바스크립트 event.stopPropagation() 사용하는 방법은?# event.stopPropagation() 사용하기자바스크립트에서 stopPropagation() 메서드는 event 객체의 버블링을 제거해줍니다. event.defaultPrevent()와 함께 매우 자주 사용되는 중요한 메서드입니다.여기서 event 버블링이란 이벤트가 연속하여 발생하는 버블 현상을 의미합니다. 이벤트는 이벤트캡쳐링과 이벤트버블링으로 나타나는데 클릭이 발생한 경우를 예로들면 클릭 시점에 해당 위치에서 이벤트가 발생하고 발생하고 다시 겹쳐진 요소를 올라가면서 해당 엘리먼트의 이벤트를 다시 발생시키는 현상을 의미합니다.이 경우 의도하지 않은 두 번째 이벤트가 추가로 발생하여 오류가 발생할 수 있습니다. 이를 피하기 위한 방법으로 event.stopPropagation()을 사용하며 이 경우 이벤트 버블링은 Firing 하지 않아 이벤트가 발생되지 않습니다.# event.stopPropagati
2017-05-19 19:57:38제이쿼리의 이벤트 메서드 중 하나인 click()의 반대되는 unclick()이 존재할까요?이벤트를 추가한 경우 제거해야할 상황이 있습니다. 특히 비동기식 페이지에서는 페이지 전환이 이뤄지지 않아 메모리 leak이 발생할 수 있기 때문이죠. 그렇기 때문에 실제로 이벤트는 on(), off()를 사용하여 이벤트를 바인딩고 언바인딩합니다. 그래야 성능 및 메모리 이슈가 없겠죠 ~ 그렇다면 이런 메서드 없이 click()을 사용한 경우라면 ??? 어떻게 unbinding 할 수 있을까요? 아래 예제라면...$('button').click(function() { alert();});위 코드는 아래처럼 unclick() 이 존재한다면 언바인딩 가능하겠죠~ 즉 이벤트를 제거할 수 있겠죠!$('button').unclick();그럼 실제로 unclick()이 존재할까요?# unclick()은 존재할까요의 답변예전 제이쿼리 1.1 이전의 버전에서 존재하였던 메서드입니다. 하지만 on(), off
2017-04-29 15:53:53자바스크립트에서 스크롤 이벤트를 구현하는 방법입니다.document.addEventListener('scroll', function() { ...});document 또는 window에 addEventListener를 사용해야 동작합니다. 스크롤 이벤트는 body 등에 바로 적용하면 동작하지 않을 수 있습니다.'wheel'document.addEventListener('wheel', function() { ...});적은 이벤트를 발생함
2017-04-27 02:49:11hls.js를 사용하는 경우 발생하는 에러 이벤트를 처리, 핸들링 하기 위하여 아래와 같이 에러 이벤트를 등록할 수 있습니다.# HLS 에러 이벤트 처리 방법만약 생성한 인스턴스의 이름이 hlsVideo인 경우 아래와 같이 에러를 발생합니다.hlsVideo.on(Hls.Events.ERROR, function(event, data) { var errorType = data.type; var errorDetails = data.details; var errorFatal = data.fatal; throw new Error('Error occued! ErrorType, Details: ' + errorType + ', ' + errorDetails);});예제에서는 브라우저에 이벤트를 호출하도록 동작시켰습니다.# HLS 비디오 에러 처리시 주의할 점HLS.js를 사용하여 라이브 재생시 에러처리에 신중해야 합니다. 그 이유 중 하나로 네트워크 에러에 따른 비디오 재생 불가 이슈가
2017-04-25 19:08:09HTML Audio/Video 엘리먼트의 DOM메소드 load()가 하는 역할입니다.해당 DOM 요소의 load() 메소드는 비디오 태그가 가지고 있는 소스 및 설정을 적용하는 것이 아니라 업데이트를 하기 위한 태그입니다.즉 소스가 태그에 추가된 경우 load()를 사용하여 소스 및 설정 재적용할 필요는 없습니다.
2017-04-25 15:06:00안녕하세요^^자바스크립트를 사용한 이벤트 사용에 대하여 알아보고자합니다. 먼저 자바스크립트에서 말하는 이벤트는 무엇일까요?# 자바스크립트 이벤트자바스크립트에는 정해진 동작 또는 계획에 의하여 이벤트를 발생시킬 수 있습니다. 이 이벤트는 미리 등록한 콜백함수를 실행하게 되는데 자바스크립트에 사용 가능한 이벤트 트리거.. 예를들어 아래의 행동에 의하여 동작할 수 있습니다.클릭 click더블클릭 dbclick마우스오버 mouseover마우스아웃 mouseout드래그 dragstart타임아웃 setTimeout타임인터벌 setInterval등등등 ...그 외에도 여러가지 이벤트를 동작할 수 있습니다. 이런 이벤트는 대부분 키보드, 마우스, 태블릿 등의 디바이스를 조작하는 것들이 대부분 이지만 게임패드나 리더기 등등에 반응하는 이벤트도 있다는 점을 참고하세요.? 트리거(trigger); 트리거는 말 그대로 방아쇠입니다. 방아쇠를 당겨야 총이 발사하는 것처럼 이벤트는 트리거를 통해 비로서 시작
2017-04-18 10:18:33AngularJS에서 자바스크립트를 사용하여 ng-click 또는 관련 디렉티브를 태그 요소인 DOM에 직접 추가하였을 경우 이벤트가 동작하지 않습니다. 어떻게 해야할까요?# $compile을 사용하기$compile 서비스를 사용하면 ng-click 등의 추가된 이벤트에 바인딩하는 것이 가능합니다. 아래와 같이 $compile을 수행합니다.var element = $('<button ng-click="close();">Close</button>');document.body.appendChild(element[0]);$compile(element)($scope);위 예제소스는 ng-$compile 수행 후 ng-click 이벤트가 정상적으로 동작하는 것을 보여줍니다.
2017-04-13 20:06:32CKEDITOR 만약 keyup 클릭 이벤트가 동작 안하는 경우 해결법은 무엇일까요?클릭이벤트가 동작 안하는 경우가 발생하여 여러가지 테스트 해보았으나 안된느 경우가 발생하였습니다. 이때 해결방법으로 keyup 대신 change 이벤트로 변경하는 방법이 있습니다. 변경 후 잘 동작하였습니다.CKEDITOR.instances.editor.on('change', function(e) { alert();})어디가 문제인지는 확실치 않으나 플러그인에 문제가 있을 수도 있으므로 확실한 원인 찾기가 어렵더군요.
2017-04-13 11:29:31CKEDITOR에서 keyup 클릭 이벤트는 어떻게 사용하나요?# CKEDITOR에서 Keyup 이벤트 사용하기만약 textarea 태그의 name 속성이 testEditor인 경우 아래와 같이 코드를 작성합니다.CKEDITOR.instances.testEditor.on('keyup', function(e) { alert();})keyup이벤트가 동작하게 됩니다.
2017-04-13 11:26:44자바스크립트를 사용하여 스크롤 이벤트 실행시 한번이 아닌 연속해서 발생하는 문제가 나타날 수 있습니다. 예를들어 스크롤을 내릴 경우 추가적인 콘텐츠를 불러오는 경우 ~ 의도하지 않게 AJAX 코드가 한 번이 아닌 여러 번 발생할 수 있습니다...그렇다면 스크롤 할 경우 여러번이 아닌 한 번만 발생하는 방법 무엇일까요?scrollStart;clearTimeout(scrollStart)clearTimeout을 통해 이벤트 발생을 제어합니다.
2017-04-07 11:19:13자바스크립트의 이벤트 중 resize는 페이지 사이즈가 바뀌면 계속해서... 일반적으로 픽셀단위로 발생합니다. 만약 연속해서 발생하지 않도록 하는 방법은 무엇이 있을까요?가장 간단한 방법으로 clearTimeout을 활용하는 방법이 있습니다. 아래의 코드를 봐주세요.# resize 이벤트 연속해서 발생하지 않는 방법아래와 같이 예제를 작성해보았습니다.var resizeTimeout;clearTimeout(resizeTimeout);resizeTimeout = setTimeout(function() { Code}, 150);위 코드는 clearTimeout을 사용하여 만약 resizeTimeout이 존재하는 경우 clear... 즉 제거합니다. 그 이유로 150ms 이전에는 이벤트가 발생하지 않도록 하는 방법입니다.여기서 주의할 부분이 있다면...resizeTimeout은 전역에 선언되거나 접근이 가능하여야 합니다. 만약 그렇지 않은 경우 clearTimeout이 해당
2017-04-06 17:16:24
