CATEGORIES
웹브라우저 안에서 키보드나 마우스 등을 사용하여 다른 영역으로 이동하는 방법은 무엇이 있을까요? 여러가지 방법이 있을 것입니다. 오늘은 사용자가 임의로 스크롤을 이동하는 것을 막기 위한 스크립트 방법을 알아보려합니다.우선 사용자가 페이지 안에서 스크롤을 사용해 이동하는 경우 어떤 방법을 사용할까요?마우스의 휠 버튼을 사용하는 경우 키보드의 커서키를 사용하는 방법 스크롤 바 위에 마우스를 올려 드래그하여 이동하는 방법이처럼 세가지 방법이 가장 보편적입니다. 이 중에서 오늘은 스크롤을 사용한 이동시 이를 블락하는 방법을 알아보겠습니다. 먼저 스크롤을 막는 것이 왜? 그리고 언제 필요할까요?# 스크롤의 이동을 막는 것이 필요한 경우언제 스크롤을 사용한 페이지 이동을 막아야할까요? 먼저 중요한 콘텐츠 화면 영역에서
Last Modified : 2017-12-11 07:34:19입력폼 ~ 서버에 값을 전달하거나 호출하는 경우 input 태그에서 엔터를 누를 경우 의도하지 않은 submit이 일어나는 경우 이를 막기위한(prevent) 방법을 알아봅니다. 어떻게 하면 가능할까요?# input 태그 엔터 submit 방지하는 방법input 태그에 엔터를 입력하면 값이 전송되는 기능은 어떻게 보면 매우 편리합니다. 하지만 입력 값을 검증하거나 이전에 다른 함수, 기능이 실행되야하는 경우 이를 방지해야하는데요 ~~ 이 때 몇 가지 방법이 존재합니다. 하나씩 알아보겠습니다.i. form 태그를 제거하기먼저 input 태그의 wrapper 태그로 form의 여부를 확인합니다. form 태그가 없는 경우에는 엔터키가 동작하지 않으므로 이를 빼는 것이 가장 빠른 방법입니다. 예를들어 ajax 비
Last Modified : 2019-08-01 08:16:07
자바스크립트를 사용하여 마우스의 위치, 좌표값을 확인하는 방법에 대하여 알아보려합니다. 아래에서는 가장 간단한 방법인 제이쿼리를 사용해 알아보겠습니다# 제이쿼리를 사용하여 마우스 위치 알아내기 만약에 현재 마우스 커서가 위치한 값을 얻기 위해서는 어떻게 해야할까요? 기본적으로 마우스를 사용하는 이벤트 객체를 사용해야 합니다. 이벤트 객체는 모든 이벤트 핸들러를 가지고 있으며 좌표값 역시 확인이 가능합니다. 그럼 아래의 예제를 통해 실제 마우스가 어디 위치에 있는지 알아보세요.# 마우스 클릭 위치 예제보기; 아래 예제는 마우스를 클릭했을때의 브라우저에서의 현재 위치값(절대위치)을 가져오는 예제입니다. 마우스 위치를 가져오려면 이벤트 객체를 이용해야합니다. 아래 예제는 클릭 이벤트가 발생시 현재의 위치 값을 가
Last Modified : 2017-12-11 07:54:43
제이쿼리(jQuery)에서 키보드 이벤트에 관하여 알아봅니다. 키보드를 눌렀을 경우 특정 함수를 동작하려고 합니다. 제이쿼리를 사용하는 경우 어떻게 하면 가능한지 자세히 알아보겠습니다. 제이쿼리는 간단한 키 입력 이벤트 메소드를 제공하는데 keypress(), keydown() 또는 keyup()를 사용할 수 있죠.$(document).keypress()$(document).keydown()$(document).keyup()위 메소드 모두 키와 관련된 이벤트로 keypress()는 키를 누르는 경우 동작하게 됩니다. 이때 키가 내려간 상태 또는 키가 내려갔다가 다시 올라간 상태에만 함수를 동작시킬 경우 keyup(), keydown()을 사용할 수 있습니다. keyup() 메소드는 키를 누른 후 올라올 경
Last Modified : 2019-08-06 20:14:34
자바스크립트를 사용하여 이벤트를 구현할 때 이벤트 캡처링과 이벤트 버블링이 등장합니다. 아래에서는 이벤트 버블링(Event Bubbling)이 무엇이고 관련된 이슈가 왜 발생하는지 ~ 또 어떻게 해결하는지 알아보겠습니다. 먼저 이벤트 버블링이 무엇인지 알아봅니다.이벤트 버블링이란이벤트 버블링은 선택한 엘리먼트가 부모 요소를 가지는 경우에 발생한다. 모든 요소들은 body부터 하위 자식 요소들까지 계층 구조를 가지고 있습니다. 예를들어 만약 부모 요소 안에 있는 어떤 엘리먼트를 클릭한다고 생각해봅니다. 이때 해당 엘리먼트를 포함하는 부모 요소를 클릭하지 않을 수 있을까요? 내부에 존재하기 때문에 당연히 어렵겠죠. 실제로는 아래와 같이 dep1, dep2를 지나야 dep3를 클릭할 수 있습니다.그림) html
Last Modified : 2021-07-13 13:32:47
특정 DOM 객체의 요소에서 이벤트가 발생한 경우 해당 요소를 가져오는 방법에 대하여 알아보겠습니다. 자바스크립트의 경우 event.target 키워드를 사용하여 아래와 같이 사용할 경우 해당하는 이벤트 DOM 객체를 불러옵니다. 가장 일반적인 사용방법입니다.<span id="test" onclick="javascript:color():">텍스트색 변경 Click !</span><script type="text/javascript">var color = function(event) { var thisEle = event.target; thisEle.style.color = 'red';}</script>위 코드는 일반적인 자바스크립트를 사용한 방법으로 클릭 이벤트로 발생한 DOM 객체를 event.ta
Last Modified : 2017-08-28 12:32:53자바스크립트의 이벤트 중 클릭한 요소를 가져오는 방법으로 event 객체의 target 또는 currentTarget 프로퍼티를 사용합니다. 이때 이 둘의 차이점은 무엇이고 어떤 경우에 무엇을 사용해야하는지 알아봅니다.event.targetevent.currentTarget# 둘의 차이점은?event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환합니다. 즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용합니다. 하지만 event.currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환합니다. 아래 에제를 봐주세요.<div onclick="checkTarget();"> <span>test</span></div>아래는 스크립트 코드입니다.fun
Last Modified : 2017-11-24 02:05:46마우스 우측버튼은 웹에서 잘 사용되지 경우가 없지만 백오피스, 관리자 페이지 등에 사용하면 매우 편리한 UI를 제공할 수 있습니다. 만약 오른쪽 버튼을 자바스크립트를 사용하여 제어할 필요가 있는 경우라면? 어떻게 사용할까요? 그리고 어떤 부분을 생각해봐야하는지 알아봅니다.먼저 아래는 마우스 우측버튼 클릭에 따른 이벤트 호출 방법에 대하여 자세하게 알아봅니다.# 마우스 우측버튼 이벤트 구현시 고려할 점먼저 웹에서 우측 버튼 클릭을 사용하려면 가장 먼저 두 가지 사항에 대하여 생각해볼 필요가 있습니다.우측 버튼시 이벤트 호출 방법브라우저 기본 이벤트 막는 방법마우스 우측버튼을 사용하기 위해서 이벤트 바인딩에 mousedown을 사용할 수 있습니다. mousedown 이벤트를 등록하면 좌측 또는 우측 버튼 클릭시
Last Modified : 2018-06-21 15:42:49
웹페이지에서 버튼이나 어떤 엘리먼트를 반드시 직접 클릭하지 않고도 클릭 이벤트를 동작하는 방법이 있습니다. 제이쿼리의 경우 trigger() 메소드가 있는데요 ~ 자바스크립트에서 구현할 경우 어떻게 하면 동작하는지 알아보겠습니다.제이쿼리 trigger() 바로가기 >https://webisfree.com/2014-01-03/[jquery]-이벤트의-강제-실행-커스텀-이벤트-trigger()# 자바스크립트 클릭하지 않고 클릭 이벤트 동작하기이처럼 마치 클릭한 것처럼 이벤트를 동작 시키는 방법인 가상 클릭 방법을 알아보겠습니다. 이 방법은 크게 두 가지가 있는데 하나는 click()을 사용하는 것이고 다른 하나는 createEvent()를 사용하여 커스텀이벤트를 만드는 방법입니다.1. click() 사용하기
Last Modified : 2019-08-07 20:38:36자바스크립트에서 이벤트를 제거하는 방법을 알아봅니다.# 자바스크립트 이벤트 제거하기, removeEventListener자바스크립트에서 addEventListener()를 사용해 이벤트를 추가한 경우 반대로 이를 제거할 수 있으며 이 때 removeEventListener()를 사용합니다.element.removeEventListener('이벤트타입', 이벤트 콜백 함수)이때 추가된 이벤트를 제거하기 위해 아래와 같이 세 가지 값이 필요합니다.1. 제거할 엘리먼트 요소2. click, keypress 등의 이벤트 타입3. 제거할 이벤트 콜백 함수그럼 아래에서 간단한 이벤트를 추가해보고 다시 이를 제거하는 예제를 만들어보겠습니다.<button id="testBtn">Hello</button>이제 위 버튼에 클
Last Modified : 2020-12-01 22:51:48자바스크립트를 사용해 이벤트를 동작하기 위해서는 addEventListner() 라는 함수가 존재한다. 이벤트를 구현할 경우 제이쿼리를 사용하면 간단한 방법으로 이벤트를 제어할 수 있는데 대표적인, bind(), on(), 메소드 외에 change() 메소드에 대하여 알아보자.해당요소.change(실행할 코드);change() 메소드는 해당하는 요소의 value에 변화가 생길 경우 이를 감지하여 등록된 콜백함수를 동작시킨다. 해당 코드는 input, textarea, select 태그에 동작한다. 그럼 간단한 예제를 통해 알아보자. 아래는 input 태그에 발생된 이벤트로 특정 함수가 동작하는 예제 소스이다.# change() 메소드를 사용한 input 파일 첨부 이벤트 함수 동작하기우리가 만들고자 하는 것
Last Modified : 2016-04-20 19:26:13자바스크립트를 사용한 이벤트 사용에 대하여 알아보고자합니다. 먼저 자바스크립트에서 말하는 이벤트는 무엇일까요? 그리고 클릭 등의 이벤트를 어떻게 사용하는지 아주 간단한 예제를 만들어 같이 알아봅니다.# 자바스크립트 이벤트자바스크립트에는 정해진 동작 또는 계획에 의하여 이벤트를 발생시킬 수 있습니다. 이 이벤트는 미리 등록한 콜백함수를 호출하고 실행하게 되는데 자바스크립트에는 사용 가능한 다양한 이벤트 트리거가 존재합니다. 트리거는 사전적 의미처럼 방아쇠(trigger) ~ 즉 이벤트를 동작하게 만드는 행동을 말하죠. 예를들어 아래의 행동에 의하여 동작할 수 있습니다.- 클릭 / 더블클릭 click, dbclick- 마우스오버 mouseover- 마우스아웃 mouseout- 마우스 드래그 drag- 타임아웃
Last Modified : 2019-08-05 21:36:08자바스크립트 event.stopPropagation() 사용하는 방법은?# event.stopPropagation() 사용하기자바스크립트에서 stopPropagation() 메서드는 event 객체의 버블링을 제거해줍니다. event.defaultPrevent()와 함께 매우 자주 사용되는 중요한 메서드입니다.여기서 event 버블링이란 이벤트가 연속하여 발생하는 버블 현상을 의미합니다. 이벤트는 이벤트캡쳐링과 이벤트버블링으로 나타나는데 클릭이 발생한 경우를 예로들면 클릭 시점에 해당 위치에서 이벤트가 발생하고 발생하고 다시 겹쳐진 요소를 올라가면서 해당 엘리먼트의 이벤트를 다시 발생시키는 현상을 의미합니다.이 경우 의도하지 않은 두 번째 이벤트가 추가로 발생하여 오류가 발생할 수 있습니다. 이를 피하기 위
Last Modified : 2017-05-19 20:13:23
자바스크립트의 이벤트가 발생하는 경우 우리는 e 또는 window.event가 사용된 모습을 자주 볼 수있다. 이 두가지 키워드가 어떻게 사용되고 이벤트 안에서 어떤 일이 일어나는지 자세히 알아보고자 한다.먼저 아래의 코드를 보자. 아래 코드는 일반적인 이벤트 함수를 작성중인 코드로 그 일부분이다. 여기에 클릭 이벤트가 발생하며 특정 구문을 콜백으로 실행하려하는 코드이다.# 예제소스 보기testNode.onclick = function(e) { e = e || window.event; ... .}여기서 사용된 e 그리고 window.event는 무엇이 다른 것일까? 이 구문이 왜 필요한 것일까? 먼저 이 문법에 대하여 설명하자면 ...|| 문법은 변수 선언에 있어서 해당하는 값이 있는 경우 앞의
Last Modified : 2018-04-11 07:22:33hls.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);});예제에서는 브라우저에 이벤트를 호출하도록 동작시켰
Last Modified : 2017-04-25 19:08:09AngularJS는 범위(Scope)를 가지고 이는 Controller에 의하여 정해진다. 각각의 scope에 따라 다수의 컨트롤러가 사용되는데 만약 다른 컨트롤러에 특정 컨트롤러의 scope을 포함시키려면 어떻게 해야할까? 아래는 이를 가능하게 도와주는 방법 중 하나로 $scope 내장서비스의 $emit(), $broadcast() 메소드를 알아보려한다.먼저 Scope은 부모와 자식, 형제간으로 구분될 수 있다. 부모의 스콥에 해당하는 내용은 자식 요소에서 참조가 가능하다. 물론 사용자가 별개의 Scope을 생성하지 않았을 경우를 말한다. 만약, 형제간의 스콥을 서로 공유하려면 어떻게 할 수 있을까? 아래의 예제를 통하여 알아보자.# 서로 다른 scope의 변수를 전달하기만약 각각의 스콥이 존재하고 변수
Last Modified : 2017-04-26 16:21:03자바스크립트에서 페이지가 모두 로딩된 후 함수 등을 호출하는 방법을 onload를 많이 사용합니다.그런데 만약 웹페이지에서 window.onload가 여러 번 사용하는 경우? 이 경우 예상과 달리 여러 번 호출되지 않고 단 한 번만 호출된다는 단점이 있습니다. 그럼 어떻게 해야하는지 대체할 방법을 알아봅니다.! 우선 onload 이벤트는 언제 필요할까요?만약 자바스크립트를 사용한 라이브러리를 만들었을 때 ... 그리고 이 라이브러리가 여러개이고 모두 페이지가 모두 로딩된 후 동작해야한다면 onload를 대체할 방법이 필요합니다.# window.onload 대체하는 방법그렇다면 바로 그 방법을 알아봅니다. 이 경우 생각할 수 있는 방법은 window.onload를 사용하는 대신에 바로 window.addEve
Last Modified : 2020-12-17 07:27:16ngClick 디렉티브를 사용하여 이벤트를 호출시 클릭했던 엘리먼트를 불러오는 방법에 대하여 알아봅니다. 만약 아래 코드의 버튼을 클릭한 후 ng-click 디렉티브에서 클릭된 event 객체의 요소를 알아내려면 어떻게할까요?# AngularJS 클릭한 요소 알아내기먼저 클릭이벤트가 발생할 경우 자바스크립트는 이벤트 객체에 해당 정보를 저장합니다. 이벤트 객체를 angular js에서 반환받는 방법과 어떤 속성이 클릭 요소를 가지고 있는지 알아야합니다.<button ng-click="clickMe()">Click</button>이때 스크립트 코드에서 이벤트 객체는 $event입니다. $event.currentTarget은 클릭된 요소를 가지고 있습니다.$scope.clickMe = function($even
Last Modified : 2017-08-11 01:40:21VueJS에서 컴포넌트 상호간 데이터를 주고 받을 수 있는 이벤트버스(EventBus)를 알아봅니다. 이벤트버스는 무엇이고 언제 왜 사용할까요?# VueJS의 EventBus란VueJS의 eventBus는 앱 내부에서 컴포넌트 사이아 부모 자식 사이에 데이터를 주고 받을 수 있는 방법 중 하나인데요 매우 많이 사용됩니다. 그 이유는 기본적으로 props를 사용하여 부모와 자식 사이의 데이터를 전달하기 때문에 해당 컴포넌트의 스코프에 제한되죠. 하지만 이 방법은 부모와 자식 컴포넌트는 물론 최상위 루트 컴포넌트나 다른 컴포넌트와의 데이터도 주고 받을 필요가 있습니다. 이럴때 유용하게 사용할 수 합니다.(데이터를 주고 받는 방법으로 props 속성이 가장 많이 사용됩니다. 하지만 부모에서 자식 사이라는 범위
Last Modified : 2019-08-06 22:00:55자바스크립트 메소드 중 하나인 addEventListener()에 대하여 알아보자. addEventListener()를 사용하면 선택한 요소에 특정한 이벤트를 발생시키고 뒤에 따르는 함수를 실행하게 해주는 매우 유용한 이벤트 메소드이다.eventTarget.addEventListener(event, function, bubbling or Capturing);event // 이벤트 타입을 나타냅니다.function // 동작할 콜백함수 입니다.bubbling or Capturing // 기본값은 false이며 false인 경우 bubbling으로 동작합니다. 반대로 true인 경우 Capturing으로 동작하게 됩니다.@ 이벤트 버블링 캡처링<p> <a>Click</a></p>버블링은 내부에서 외부로 동작하
Last Modified : 2019-10-15 13:52:09
자바스크립트를 사용해 파일을 드래그앤 드랍하여 서버에 전송하기 위한 입력폼을 만들어보자. 이를 위해서 특정 요소 위해 파일을 드래그 후 드랍해야하는데 나타날 문제는 다음과 같다.# 드래그앤드랍시 브라우저 기본 이벤트 발생하여 페이지 전환됨문제는 파일을 브라우저에 올릴 경우 브라우저가 가진 기본 이벤트가 실행되는데 있다. 정상적으로 구현하기 위해서는 이런 디폴트 이벤트를 제거하는 방법이 필요하다.# 이벤트 제거하기 위한 함수 코드보기// Prevent drag and drop event in window.addEventListener("dragover",function(e){ e = e || event; if (e.target.tagName != "INPUT") { // check which
Last Modified : 2016-05-03 21:12:44제이쿼리의 이벤트 메서드 중 하나인 click()의 반대되는 unclick()이 존재할까요?이벤트를 추가한 경우 제거해야할 상황이 있습니다. 특히 비동기식 페이지에서는 페이지 전환이 이뤄지지 않아 메모리 leak이 발생할 수 있기 때문이죠. 그렇기 때문에 실제로 이벤트는 on(), off()를 사용하여 이벤트를 바인딩고 언바인딩합니다. 그래야 성능 및 메모리 이슈가 없겠죠 ~ 그렇다면 이런 메서드 없이 click()을 사용한 경우라면 ??? 어떻게 unbinding 할 수 있을까요? 아래 예제라면...$('button').click(function() { alert();});위 코드는 아래처럼 unclick() 이 존재한다면 언바인딩 가능하겠죠~ 즉 이벤트를 제거할 수 있겠죠!$('button').uncl
Last Modified : 2017-08-28 12:33:37자바스크립트를 사용하여 스크롤 이벤트 실행시 한번이 아닌 연속해서 발생하는 문제가 나타날 수 있습니다. 예를들어 스크롤을 내릴 경우 추가적인 콘텐츠를 불러오는 경우 ~ 의도하지 않게 AJAX 코드가 한 번이 아닌 여러 번 발생할 수 있습니다...그렇다면 스크롤 할 경우 여러번이 아닌 한 번만 발생하는 방법 무엇일까요?scrollStart;clearTimeout(scrollStart)clearTimeout을 통해 이벤트 발생을 제어합니다.
Last Modified : 2019-01-08 08:49:57제이쿼리를 사용해 이벤트 제어시 이벤트를 발생시킨 요소에 대하여 컨트롤 하는 경우 $(this) 키워드를 사용한다. 이때는 당연히 이벤트를 실행시키는 함수가 필요할 것이고 그 안에서 제이쿼리로 지정된 특정 요소를 컨트롤하기 위해 event.target을 사용하기도 하지만 가장 많이 쉽게 사용하는 부분이 바로 $(this)라는 키워드 선택이다.참고... 함수에서 이벤트가 발생하는 경우 객체 안에서의 this는 객체의 프로토타입을 나타내지만 함수 안에서는 해당하는 요소를 this의 값으로 가지고 반환한다. $(this)는 제이쿼리를 통한 이벤트 생성시 반환되는 요소이다. this는 $(this)[0]과 같다.궁금한 부분이 있었으니 만약 제이쿼리(jQuery) 이벤트를 통해 실행된 이벤트 함수에서 event.ta
Last Modified : 2017-08-28 12:29:12웹페이지에 파비콘이 없거나 아직 준비되지 않은 경우 브라우저에서 에러가 발생할 수 있습니다. 에러 메시지는 파비콘이 존재하지 않는다는 메시지입니다.# 파비콘 에러 메시지 무시하기만약 파비콘을 사용할 계획이 없거나 에러 메시지를 무시하려면 어떻게 할까요? 이 때는 아래와 같이 파비콘 관련 설정을 <head> 태그에 추가하면 에러는 사라지게 됩니다.<link rel="shortcut icon" href="data:image/x-icon" type="image/x-icon">이제 웹페이지를 구동하면 기존의 에러는 더 이상 발생하지 않게됩니다.개인 사용 목적이나 단순 관리 목적의 웹페이지는 특별히 파비콘이 없어도 되겠죠. 이런 경우에 위와 같이 에러 방지 코드를 작성하여 사용할 수 있으니 참고하세요.
Last Modified : 2019-08-23 08:36:28
최근 NHN에 인수된 소식이 전해지면 앞으로의 진보가 궁금했던 고도 호스팅(godo hosting)... 최근들어 godomall5라는 이름으로 새로운 쇼핑몰 솔루션을 선보였습니다. 새로운 쇼핑몰의 솔루션도 중요하지만 무엇보다 현재 이벤트를 진행중으로 이를 무료로 만나볼 수 있는 기회가 생기게 되었습니다.이벤트 참여는 매우 간단합니다. godo몰(www.godo.co.kr)로 이동하여 상단 배너 '지금 선택해야하는 이유'를 클릭하면 무료신청할 수 있는 페이지로 이동하게 됩니다. 저 역시 방금 신규 쇼핑몰을 신청하였습니다. 확인해보니 현재 쇼핑몰 이용가격은 월 33,000이며 3개월간 무료로 이용이 가능합니다!고도몰 상단의 배너를 클릭하자!고도몰5의 상세사항은?사항을 보니 설치비가 무료입니다. 또한 래픽 무제
Last Modified : 2016-05-31 08:09:36CKEDITOR에서 keyup 클릭 이벤트는 어떻게 사용하나요?# CKEDITOR에서 Keyup 이벤트 사용하기만약 textarea 태그의 name 속성이 testEditor인 경우 아래와 같이 코드를 작성합니다.CKEDITOR.instances.testEditor.on('keyup', function(e) { alert();})keyup이벤트가 동작하게 됩니다.
Last Modified : 2017-04-13 11:26:44자바스크립트의 객체 내에서 setTimeout() 구문을 사용할 경우 자기 자신인 객체를 호출하는 방법을 알아봅니다.먼저 아래처럼 객체 하나를 만들고 간단한 setTimeout()을 실행하는 함수가 내부에 있다고 생각해봅니다.var obj = { site: 'webisfree', getSite: function() { alert(this.site); }};위 객체는 사이트 이름과 사이트 이름을 출력하는 프로퍼티, 메소드를 각각 가지고 있습니다. 실행하면 사이트네임 webisfree가 잘 출력됩니다. 여기서 만약 메소드 getSite()가 3초 후 출력될 수 있도록 setTimeout()을 추가하면 어떻게 될까요?! 타이머 3초 후 출력되는 코드var obj = { site: 'webisfree'
Last Modified : 2017-09-26 00:27:26
css 프로퍼티인 pointer-events에 대하여 알아봅니다. 어떻게 사용하고 언제 사용할까요?# CSS Property pointer-eventscss를 사용하여 클릭이벤트를 제어할 수 있을까요? 그 방법 중 하나가 바로 CSS 프로퍼티인 pointer-events입니다. 이 프로퍼티를 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있습니다. 아래는 간단한 사용 방법입니다..prevent-click { pointer-events: none; }이 속성은 CSS3의 프로퍼티로 선택 가능한 옵션은 아래와 같이 세 가지가 있습니다.none // 클릭 이벤트를 적용하지 않음auto // 브라우저 자동으로 선택함inherit // 상속 되어짐참고로 만약 none의 값을 사용할 경
Last Modified : 2019-08-06 21:59:57HTML Audio/Video 엘리먼트의 DOM메소드 load()가 하는 역할입니다.해당 DOM 요소의 load() 메소드는 비디오 태그가 가지고 있는 소스 및 설정을 적용하는 것이 아니라 업데이트를 하기 위한 태그입니다.즉 소스가 태그에 추가된 경우 load()를 사용하여 소스 및 설정 재적용할 필요는 없습니다.
Last Modified : 2017-04-25 15:06:00angularjs에서 흔히 볼 수 있는 이벤트 메소드로 $destory를 볼 수 있습니다. 이때 이벤트가 동작하는 로직 그리고 언제 이를 사용하는지 알려주세요.# destroy 예제소스 보기scope.$on('$destroy', function() { alert('Destroy!!');});$destroy를 호출하여 이벤트를 제거하는 것은 일반적인 경우에는 필요가 없지만 다른 Angular가 아닌 다른 라이브러리, 순수 자바스크립트에 의하여 추가된 이벤트 등을 정상적으로 메모리에서 제거하기 위한 방법으로 사용됩니다.
Last Modified : 2017-09-21 00:19:56AngularJS에서 자바스크립트를 사용하여 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 이벤트가 정상적으로 동작하는 것을 보여줍니다.
Last Modified : 2017-08-11 01:43:05CKEDITOR 만약 keyup 클릭 이벤트가 동작 안하는 경우 해결법은 무엇일까요?클릭이벤트가 동작 안하는 경우가 발생하여 여러가지 테스트 해보았으나 안된느 경우가 발생하였습니다. 이때 해결방법으로 keyup 대신 change 이벤트로 변경하는 방법이 있습니다. 변경 후 잘 동작하였습니다.CKEDITOR.instances.editor.on('change', function(e) { alert();})어디가 문제인지는 확실치 않으나 플러그인에 문제가 있을 수도 있으므로 확실한 원인 찾기가 어렵더군요.
Last Modified : 2017-04-13 11:29:31자바스크립트의 이벤트 중 resize는 페이지 사이즈가 바뀌면 계속해서... 일반적으로 픽셀단위로 발생합니다. 만약 연속해서 발생하지 않도록 하는 방법은 무엇이 있을까요?가장 간단한 방법으로 clearTimeout을 활용하는 방법이 있습니다. 아래의 코드를 봐주세요.# resize 이벤트 연속해서 발생하지 않는 방법아래와 같이 예제를 작성해보았습니다.var resizeTimeout;clearTimeout(resizeTimeout);resizeTimeout = setTimeout(function() { Code}, 150);위 코드는 clearTimeout을 사용하여 만약 resizeTimeout이 존재하는 경우 clear... 즉 제거합니다. 그 이유로 150ms 이전에는 이벤트가 발생하지 않
Last Modified : 2019-08-06 22:00:19자바스크립트에서 스크롤 이벤트를 구현하는 방법입니다.document.addEventListener('scroll', function() { ...});document 또는 window에 addEventListener를 사용해야 동작합니다. 스크롤 이벤트는 body 등에 바로 적용하면 동작하지 않을 수 있습니다.'wheel'document.addEventListener('wheel', function() { ...});적은 이벤트를 발생함
Last Modified : 2019-01-08 09:50:29
세종대학교에서 매우 색다른 이벤트가 펼쳐진다. 다름아닌 인간과 인공지능의 대결이다. 그것도 스타크래프트!!인간과 인공지능 과연 승자는?바둑 알파고와 이세돌의 흥분이 아직도 식지 않은 지금 또 다른 종목에서 인간과 AI 인공지능의 대결이라 더 기대된다. 과연 누가 승리하게될지도 궁금하지만 인공지능이 어디까지 왔는지 가늠해볼 수 있는 좋은 기회가 될 것같다. 한편 댓글을 통해 이번 경기에 많은 관심을 보이며 특히 누가 출전하는지 궁금해하는 글이 많았다.출처) 세종대학교 공식 홈페이지이번 행사는 세종대학교와 세종사이버대학교의 주최로 삼성SDS에서 후원하며 세종대에서 10월 31일에 열리게된다. 참가인원은 누구나 가능하나 선착순으로 참가가 가능하다. 자세한 사항은 세종대 페이스북에서 볼 수 있다.바로가기 > www
Last Modified : 2017-10-24 11:57:13