커스텀 이벤트를 만들려고 합니다. 이벤트를 실행하기 위해서는 이벤트 핸들러가 필요하죠. 클릭이나 스크롤 이동, 브라우저 사이즈 등등 몇몇의 핸들러가 작동하게 될 경우 브라우저에 이를 알리고 함수를 실행하지만 이런 이벤트 핸들러 없이도 동작이 가능하게 하려면 trigger()메소드가 필요합니다.$('selector').trigger('선택할 이벤트');위와 같이 원하는 요소에 trigger() 메소드를 적용하고 선택할 이벤트를 인자로 넣어주면 됩니다. 그럼 아래 예제를 보세요. # trigger() 예제 알아보기 아래는 trigger() 메소드를 사용하는 간단한 예제입니다. 먼저 css입니다..testEle { width:100px; height:100px; background: #f80; text
Last Modified : 2019-01-13 14:32:25자바스크립트를 사용하여 마우스의 위치, 좌표값을 확인하는 방법에 대하여 알아보려합니다. 아래에서는 가장 간단한 방법인 제이쿼리를 사용해 알아보겠습니다# 제이쿼리를 사용하여 마우스 위치 알아내기 만약에 현재 마우스 커서가 위치한 값을 얻기 위해서는 어떻게 해야할까요? 기본적으로 마우스를 사용하는 이벤트 객체를 사용해야 합니다. 이벤트 객체는 모든 이벤트 핸들러를 가지고 있으며 좌표값 역시 확인이 가능합니다. 그럼 아래의 예제를 통해 실제 마우스가 어디 위치에 있는지 알아보세요.# 마우스 클릭 위치 예제보기; 아래 예제는 마우스를 클릭했을때의 브라우저에서의 현재 위치값(절대위치)을 가져오는 예제입니다. 마우스 위치를 가져오려면 이벤트 객체를 이용해야합니다. 아래 예제는 클릭 이벤트가 발생시 현재의 위치 값을 가
Last Modified : 2017-12-11 07:54:43클릭 이벤트를 구현할 때 똑같은 기능이 반복되게 하려면 어떻게할까요? 마치 스위치를 누를때처럼 말이죠. 버튼을 누를때 마다 다른 함수를 실행하거나 아니면 스위치를 켜고 끌때와 같이 딱 두개만 반복해서 계속 실행하려면 아래의 방법을 사용합니다.(아래에 나와 있지만 현재 이 기능의 대부분은 Deprecated되어 현재 예제대로 구현되지 않을 수 있습니다. 최신 버전의 jQuery에서는 다른 기능으로 toggle()이 사용되니 이 점 알아두세요!)# 제이쿼리 toggle() 메소드 알아보기함수 두 가지를 번갈아가며 실행하는 방법처럼 토글 및 스위치처럼 동작되게 하는 메소드로 제이쿼리에 toggle()이 있습니다. 그럼 예제를 통해 자세히 알아봅니다. ! toggle() 메소드 는 언제 사용할까 아래 이미지를 보시
Last Modified : 2017-12-12 15:30:28자바스크립트를 사용하여 웹사이트 구축시 무한스크롤(infinite scroll)이란 용어를 자주 들을 수 있습니다. 그럼 무한스크롤이란 무엇이고 자바스크립트 라이브러리인 제이쿼리(jQuery)를 사용하여 무한스크롤을 구현하는 방법에 대해 자세하게 알아보겠습니다. 일단 무한스크롤이란 무엇일가요?! 자바스크립트의 무한스크롤(Infinite Scroll)이란? 용어알기무한 스크롤이란 화면 인터렉션(Interaction)의 하나로 사용자 행동에 의해 만약 웹페이지 화면에서 스크롤을 브라우저의 끝으로 내리게되면 새로운 콘텐츠가 계속해서 생겨나는 이벤트의 반복을 의미합니다. 즉 이를 구현하면 방문자는 스크롤을 내리면 새로운 콘텐츠를 페이지 전환없이 계속해서 볼 수 있게 됩니다.이런 화면 인터렉션은 사용자가 새로운 콘
Last Modified : 2019-01-08 09:01:12제이쿼리(jQuery)에서 키보드 이벤트에 관하여 알아봅니다. 키보드를 눌렀을 경우 특정 함수를 동작하려고 합니다. 제이쿼리를 사용하는 경우 어떻게 하면 가능한지 자세히 알아보겠습니다. 제이쿼리는 간단한 키 입력 이벤트 메소드를 제공하는데 keypress(), keydown() 또는 keyup()를 사용할 수 있죠.$(document).keypress()$(document).keydown()$(document).keyup()위 메소드 모두 키와 관련된 이벤트로 keypress()는 키를 누르는 경우 동작하게 됩니다. 이때 키가 내려간 상태 또는 키가 내려갔다가 다시 올라간 상태에만 함수를 동작시킬 경우 keyup(), keydown()을 사용할 수 있습니다. keyup() 메소드는 키를 누른 후 올라올 경
Last Modified : 2019-08-06 20:14:34텍스트가 반짝이는 효과를 가지려면 어떻게 해야할까요? css 또는 자바스크립트를 사용하여 가능합니다. 아래에서는 텍스트에 반짝이는 효과를 만드는 방법을 자세히 알아보려고 합니다. # 텍스트 반짝이는 효과 만들기, blink우선 태그 및 css를 사용하는 방법을 알아보겠습니다. 그 전에 아래의 내용을 알아둘 필요가 있습니다. ! 간편했던 태그 및 스타일 지정의 축소문자를 깜박이게 하는 방법으로 blink 태그를 사용하는 방법과 CSS를 적용하는 방법이 있습니다. 하지만 이 방법들은 현재 구현이 되지 않으며 웹표준 역시 아니므로 Deprecated되었습니다. 더 이상 사용해서는 안되겠지요. 아래를 참고하세요. 1. Blink 태그는 w3c에서 지정한 표준태그가 아니라 더 이상 사용하지 말아야하며 기능 구현이 축
Last Modified : 2018-07-25 19:47:02제이쿼리 이벤트 메소드 중 하나인 hover()에 대하여 알아봅니다.제이쿼리는 다양한 이벤트 관련 메소드를 제공하는데요 만약 마우스를 특정 엘리먼트 위에 올리면 발생하게되는 이벤트 역시 제이쿼리를 사용하여 제어할 수 있습니다. 이때 사용하는 메소드가 바로 hover()입니다.$(jqeuryElement).hover(콜백함수)위는 간단한 문법으로 hover() 메소드 내부에 호출할 콜백을 추가하는 방법으로 사용합니다.# 제이쿼리 hover() 메소드이 메소드 hover()는 CSS의 :hover 선택자를 사용하는 것과 동일한 방식으로 동작합니다. 다만 css에 사용하면 새로운 스타일(style)을 적용하는 것이 목적이지만 hover()는 자바스크립트를 사용하여 다양한 조작이 가능한 점입니다. 즉 콜백 이벤
Last Modified : 2019-08-06 20:15:11입력폼 ~ 서버에 값을 전달하거나 호출하는 경우 input 태그에서 엔터를 누를 경우 의도하지 않은 submit이 일어나는 경우 이를 막기위한(prevent) 방법을 알아봅니다. 어떻게 하면 가능할까요?# input 태그 엔터 submit 방지하는 방법input 태그에 엔터를 입력하면 값이 전송되는 기능은 어떻게 보면 매우 편리합니다. 하지만 입력 값을 검증하거나 이전에 다른 함수, 기능이 실행되야하는 경우 이를 방지해야하는데요 ~~ 이 때 몇 가지 방법이 존재합니다. 하나씩 알아보겠습니다.i. form 태그를 제거하기먼저 input 태그의 wrapper 태그로 form의 여부를 확인합니다. form 태그가 없는 경우에는 엔터키가 동작하지 않으므로 이를 빼는 것이 가장 빠른 방법입니다. 예를들어 ajax 비
Last Modified : 2019-08-01 08:16:07자바스크립트를 사용하여 이벤트를 구현할 때 발생가능한 문제점 중 하나로 이벤트 버블링 현상을 빼놓을 수 없을 것이다. 아래는 이벤트 버블링(Event Bubbling)이 무엇이고 왜 이런 문제가 발생하는지 알아볼 것이며 이를 해결하기 위한 방법에 대하여 예제를 통해 자세히 알아보고자 한다. 먼저 이벤트 버블링이 무엇인지 알아보자.이벤트 버블링이란이벤트 버블링은 보통 선택한 엘리먼트가 속해있는 부모요소에 의하여 발생한다. 예를들어 어떤 버튼을 클릭하려고 할때 그 버튼을 가지고 있는 부모 요소에 이미 클릭 이벤트가 존재하는 경우를 말할 수 있다. 이 경우 선택한 요소와 더불어 의도하지 않았던 부모 요소의 이벤트도 함께 실행되는 문제점을 발생시킬 수 있을 것이다. 그렇다면 이를 해결하기 위한 방법으로 어떤 방법이
Last Modified : 2016-06-15 18:02:44우선, 이벤트 통합 메서드는 JQuery 1.7 이후 버젼부터 사용이 가능합니다. 기존의 이벤트의 핸들러 함수로는 bind(), live(), delegate()가 있죠. 이 방법들 역시 사용이 가능하나 기능이 축소 및 변경되었기 때문에 앞으로는 통합 메소드 on() 을 사용하시기 바랍니다. 1.7 이후부터는 사용방법이 조금 바뀌었습니다. 어떻게 사용하는지 아래 예제를 참고하세요.# jQuery 통합메서드 on(), off() 알아보기먼저 on() 또는 off()는 아래와 같은 문법으로 사용됩니다.$(선택요소).on('click', function() { // 실행할 구문});이 방법은 좀 더 쉽게 알아보기 위해서 아래 예제 소스 코드를 참고하세요!# on() 이벤트 통합 메서드 예제 소스 보기아래 예제는
Last Modified : 2017-12-27 13:45:24페이지를 최하단 또는 최상단으로 이동시키기 위한 버튼을 보셨나요? 아래 스크린샷의 우측하단을 봐주세요.(그림) 우측 하단의 top 버튼이 바로 스크롤 이동 버튼임 보시는 것처럼 특히 모바일 페이지의 경우 스크롤을 한번에 최상단에까지 올리기 위해 버튼을 보실 수가 있죠. 이처럼 스크롤을 이동하기 위한 메소드로 animate를 사용할 수 있습니다. # 자바스크립트 - 페이지 스크롤 위치 이동하는 방법animate는 참 다양한 기능을 구현하는데 스크롤 이동 역시 그 중 하나입니다. $('html, body').animate({scrollTop: '0'}, 1000); $('html, body').scrollTop(0); 이 스크롤을 이동시키는 방법은 위와 같이 두가지 방법이 있습니다. 하나는 animate()
Last Modified : 2019-08-06 22:00:13특정 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자바스크립트를 사용해 이벤트를 동작하기 위해서는 addEventListner() 라는 함수가 존재한다. 이벤트를 구현할 경우 제이쿼리를 사용하면 간단한 방법으로 이벤트를 제어할 수 있는데 대표적인, bind(), on(), 메소드 외에 change() 메소드에 대하여 알아보자.해당요소.change(실행할 코드);change() 메소드는 해당하는 요소의 value에 변화가 생길 경우 이를 감지하여 등록된 콜백함수를 동작시킨다. 해당 코드는 input, textarea, select 태그에 동작한다. 그럼 간단한 예제를 통해 알아보자. 아래는 input 태그에 발생된 이벤트로 특정 함수가 동작하는 예제 소스이다.# change() 메소드를 사용한 input 파일 첨부 이벤트 함수 동작하기우리가 만들고자 하는 것
Last Modified : 2016-04-20 19:26:13웹페이지에서 버튼이나 어떤 엘리먼트를 반드시 직접 클릭하지 않고도 클릭 이벤트를 동작하는 방법이 있습니다. 제이쿼리의 경우 trigger() 메소드가 있는데요 ~ 자바스크립트에서 구현할 경우 어떻게 하면 동작하는지 알아보겠습니다.제이쿼리 trigger() 바로가기 >https://webisfree.com/2014-01-03/[jquery]-이벤트의-강제-실행-커스텀-이벤트-trigger()# 자바스크립트 클릭하지 않고 클릭 이벤트 동작하기이처럼 마치 클릭한 것처럼 이벤트를 동작 시키는 방법인 가상 클릭 방법을 알아보겠습니다. 이 방법은 크게 두 가지가 있는데 하나는 click()을 사용하는 것이고 다른 하나는 createEvent()를 사용하여 커스텀이벤트를 만드는 방법입니다.1. click() 사용하기
Last Modified : 2019-08-07 20:38:36AngularJS는 범위(Scope)를 가지고 이는 Controller에 의하여 정해진다. 각각의 scope에 따라 다수의 컨트롤러가 사용되는데 만약 다른 컨트롤러에 특정 컨트롤러의 scope을 포함시키려면 어떻게 해야할까? 아래는 이를 가능하게 도와주는 방법 중 하나로 $scope 내장서비스의 $emit(), $broadcast() 메소드를 알아보려한다.먼저 Scope은 부모와 자식, 형제간으로 구분될 수 있다. 부모의 스콥에 해당하는 내용은 자식 요소에서 참조가 가능하다. 물론 사용자가 별개의 Scope을 생성하지 않았을 경우를 말한다. 만약, 형제간의 스콥을 서로 공유하려면 어떻게 할 수 있을까? 아래의 예제를 통하여 알아보자.# 서로 다른 scope의 변수를 전달하기만약 각각의 스콥이 존재하고 변수
Last Modified : 2017-04-26 16:21:03자바스크립트를 사용한 이벤트 사용에 대하여 알아보고자합니다. 먼저 자바스크립트에서 말하는 이벤트는 무엇일까요? 그리고 클릭 등의 이벤트를 어떻게 사용하는지 아주 간단한 예제를 만들어 같이 알아봅니다.# 자바스크립트 이벤트자바스크립트에는 정해진 동작 또는 계획에 의하여 이벤트를 발생시킬 수 있습니다. 이 이벤트는 미리 등록한 콜백함수를 호출하고 실행하게 되는데 자바스크립트에는 사용 가능한 다양한 이벤트 트리거가 존재합니다. 트리거는 사전적 의미처럼 방아쇠(trigger) ~ 즉 이벤트를 동작하게 만드는 행동을 말하죠. 예를들어 아래의 행동에 의하여 동작할 수 있습니다.- 클릭 / 더블클릭 click, dbclick- 마우스오버 mouseover- 마우스아웃 mouseout- 마우스 드래그 drag- 타임아웃
Last Modified : 2019-08-05 21:36:08자바스크립트의 이벤트가 발생하는 경우 우리는 e 또는 window.event가 사용된 모습을 자주 볼 수있다. 이 두가지 키워드가 어떻게 사용되고 이벤트 안에서 어떤 일이 일어나는지 자세히 알아보고자 한다.먼저 아래의 코드를 보자. 아래 코드는 일반적인 이벤트 함수를 작성중인 코드로 그 일부분이다. 여기에 클릭 이벤트가 발생하며 특정 구문을 콜백으로 실행하려하는 코드이다.# 예제소스 보기testNode.onclick = function(e) { e = e || window.event; ... .}여기서 사용된 e 그리고 window.event는 무엇이 다른 것일까? 이 구문이 왜 필요한 것일까? 먼저 이 문법에 대하여 설명하자면 ...|| 문법은 변수 선언에 있어서 해당하는 값이 있는 경우 앞의
Last Modified : 2018-04-11 07:22:33자바스크립트의 이벤트 중에서 키를 계속 누르는 경우의 이벤트 제어 방법을 알아봅니다. 이 방법은 마우스에서도 동일하게 동작시킬 수 있습니다. 어떻게하면 가능할까요?예를들어 클릭하면 숫자가 올라가는 요소가 있는 경우를 생각해봅니다. 일반적인 클릭 이벤트에서는 클릭을 계속 누르면 숫자가 하나 올라갈 것입니다. 만약 숫자가 0에서 100을 선택할 경우... 100번 클릭해야하겠죠? 이 방법이 아닌 키를 계속 누를 경우 계속해서 숫자가 올라간다면? 더욱 편한 방법일 것입니다. 아래는 키를 계속 누르는 경우의 이벤트 구현 방법에 대하여 알아봅니다.# 마우스 또는 키보드를 계속 누르는 이벤트 구현하기먼저 이벤트를 동작하게 하는 트리거에는 클릭은 있지만 클릭중?이라것은 없습니다. 그런 이유로 직접 클릭이 계속되고 있음을
Last Modified : 2018-06-02 21:37:05자바스크립트를 사용해 파일을 드래그앤 드랍하여 서버에 전송하기 위한 입력폼을 만들어보자. 이를 위해서 특정 요소 위해 파일을 드래그 후 드랍해야하는데 나타날 문제는 다음과 같다.# 드래그앤드랍시 브라우저 기본 이벤트 발생하여 페이지 전환됨문제는 파일을 브라우저에 올릴 경우 브라우저가 가진 기본 이벤트가 실행되는데 있다. 정상적으로 구현하기 위해서는 이런 디폴트 이벤트를 제거하는 방법이 필요하다.# 이벤트 제거하기 위한 함수 코드보기// 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자바스크립트 메소드 중 하나인 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자바스크립트를 사용하여 스크롤 이벤트 실행시 한번이 아닌 연속해서 발생하는 문제가 나타날 수 있습니다. 예를들어 스크롤을 내릴 경우 추가적인 콘텐츠를 불러오는 경우 ~ 의도하지 않게 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만약 VueJS를 사용하여 마우스 오버 이벤트(MouseOver)를 구현하려면 어떻게하는지 아래에서 자세히 알아봅니다."마우스 오버는 마우스가 특정 요소의 위에 있을때 발생하는 이벤트입니다."아래는 VueJS에서 mouseover 이벤트의 구현방법으로 모두 동일하게 함수 doMouseOver를 호출합니다.@ mouseover.vue<button v-on="mouseover: doMouseOver">Click Me</button><button @mouseover="doMouseOver">Click Me</button>methods: { doMouseOver: function() { // ... };}위에서 사용된 button은 각각 v-on과 @mouseover를 사용하였습니다. 각각 알아보면...v
Last Modified : 2018-09-28 11:01:45VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 서로 주고 받는 양방향 바인딩(Two way binding) 방법에 대하여 알아봅니다.먼저 컴포넌트 사이의 데이터를 주고 받는 방법은 여러가지가 있습니다. 전역 데이터를 사용하거나, 이벤트버스(EventBus), Vuex 아니면 Props를 사용할 수도 있죠. 여기서 Props를 사용하는 방법이 많이 사용되는데요 ~! Props를 사용한 컴포넌트간의 데이터 전송방법부모, 자식 컴포넌트 사이에 Props를 사용하면 부모에서 자식으로 데이터를 전송할 수 있지만 반대로 자식에서 부모로 전달할 수 없는 문제가 생깁니다. 그럼 어떻게하면 해결할 수 있는지 아래에서 알아봅니다.(참고사항. Vue 2 이전에는 props를 사용하여 동일한 스코프 모델명을 사용하면 서로
Last Modified : 2019-08-06 00:08:34VueJS에서 컴포넌트 상호간 데이터를 주고 받을 수 있는 이벤트버스(EventBus)를 알아봅니다. 이벤트버스는 무엇이고 언제 왜 사용할까요?# VueJS의 EventBus란VueJS의 eventBus는 앱 내부에서 컴포넌트 사이아 부모 자식 사이에 데이터를 주고 받을 수 있는 방법 중 하나인데요 매우 많이 사용됩니다. 그 이유는 기본적으로 props를 사용하여 부모와 자식 사이의 데이터를 전달하기 때문에 해당 컴포넌트의 스코프에 제한되죠. 하지만 이 방법은 부모와 자식 컴포넌트는 물론 최상위 루트 컴포넌트나 다른 컴포넌트와의 데이터도 주고 받을 필요가 있습니다. 이럴때 유용하게 사용할 수 합니다.(데이터를 주고 받는 방법으로 props 속성이 가장 많이 사용됩니다. 하지만 부모에서 자식 사이라는 범
Last Modified : 2019-08-06 22:00:55자바스크립트의 이벤트는 이벤트를 발생시키는 경우(트리거 요소)를 구분하여 줍니다. 이때 가장 많이 사용되는 click 이벤트... 그리고 마우스 눌렀다가 뗄 경우 발생하는 mouseup 이벤트가 따로 존재하는데 이 둘의 차이점이 무엇인지 알아보겠습니다.왜 이런 궁금증이 생기는가...??클릭 이벤트가 클릭을 하는 시점에서 발생하지 않고 마우스를 클릭 후 띄는 액션에 발생하기 때문에 두 가지 모두 동일해보이기 때문입니다. 단순하게(?) 생각해봐도 mouseup 이벤트 발생이 좀 더 효과적일 것으로 기대할 수 있으나 왜 그런지 ~ 무엇이 다른지 확실히 알 필요가 있을 것입니다.일단 이 두 이벤트 함수를 나타내보면 아래와 같을 것입니다.<script type="text/javascript">/* 클릭 이벤트 함수
Last Modified : 2017-08-28 12:31:36자바스크립트 event.stopPropagation() 사용하는 방법은?# event.stopPropagation() 사용하기자바스크립트에서 stopPropagation() 메서드는 event 객체의 버블링을 제거해줍니다. event.defaultPrevent()와 함께 매우 자주 사용되는 중요한 메서드입니다.여기서 event 버블링이란 이벤트가 연속하여 발생하는 버블 현상을 의미합니다. 이벤트는 이벤트캡쳐링과 이벤트버블링으로 나타나는데 클릭이 발생한 경우를 예로들면 클릭 시점에 해당 위치에서 이벤트가 발생하고 발생하고 다시 겹쳐진 요소를 올라가면서 해당 엘리먼트의 이벤트를 다시 발생시키는 현상을 의미합니다.이 경우 의도하지 않은 두 번째 이벤트가 추가로 발생하여 오류가 발생할 수 있습니다. 이를 피하기 위
Last Modified : 2017-05-19 20:13:23제이쿼리의 이벤트 메서드 중 하나인 click()의 반대되는 unclick()이 존재할까요?이벤트를 추가한 경우 제거해야할 상황이 있습니다. 특히 비동기식 페이지에서는 페이지 전환이 이뤄지지 않아 메모리 leak이 발생할 수 있기 때문이죠. 그렇기 때문에 실제로 이벤트는 on(), off()를 사용하여 이벤트를 바인딩고 언바인딩합니다. 그래야 성능 및 메모리 이슈가 없겠죠 ~ 그렇다면 이런 메서드 없이 click()을 사용한 경우라면 ??? 어떻게 unbinding 할 수 있을까요? 아래 예제라면...$('button').click(function() { alert();});위 코드는 아래처럼 unclick() 이 존재한다면 언바인딩 가능하겠죠~ 즉 이벤트를 제거할 수 있겠죠!$('button').uncl
Last Modified : 2017-08-28 12:33:37최근 NHN에 인수된 소식이 전해지면 앞으로의 진보가 궁금했던 고도 호스팅(godo hosting)... 최근들어 godomall5라는 이름으로 새로운 쇼핑몰 솔루션을 선보였습니다. 새로운 쇼핑몰의 솔루션도 중요하지만 무엇보다 현재 이벤트를 진행중으로 이를 무료로 만나볼 수 있는 기회가 생기게 되었습니다.이벤트 참여는 매우 간단합니다. godo몰(www.godo.co.kr)로 이동하여 상단 배너 '지금 선택해야하는 이유'를 클릭하면 무료신청할 수 있는 페이지로 이동하게 됩니다. 저 역시 방금 신규 쇼핑몰을 신청하였습니다. 확인해보니 현재 쇼핑몰 이용가격은 월 33,000이며 3개월간 무료로 이용이 가능합니다!고도몰 상단의 배너를 클릭하자!고도몰5의 상세사항은?사항을 보니 설치비가 무료입니다. 또한 래픽 무제
Last Modified : 2016-05-31 08:09:36하이마트에서 웹쇼핑몰 재탄생 기념 이벤트의 일환으로 가격인하 이벤트를 진행한다고 합니다. 바로 샤오미 미 패드입니다. 대륙의 실수 제품이죠!출처 - 하이마트 공식 쇼핑몰사실 몇몇 샤오미 제품을 써보면서 이게 가능한가... 가격 깡패라는 생각이 들던 찰나에 이런 이벤트를 하니 눈이 가는군요.. 최근 태블릿을 하나 사려고 기웃거리던 중인데 요 녀석이 어떨지 심히 고민중입니다...이번 이벤트에서 핵심은 정식 한글판이라는 점과 AS 1년 무상보증이라 생각됩니다. 전 특히 AS가 맘에 드네요. 최근 아이폰이 정상 작동을 안해서 AS 맡기러 갔다가 포기하고 돌아왔습니다. 이건 수리가 아닌 무조건 교체를 하라고 하니;; 외산 제품이 좋아도 AS는 늘 문제였는데 1년 동안 무상 수리라고 하니 ... 사고 싶은 마음이 갑자
Last Modified : 2015-10-29 19:47:49VueJS에서 클릭 이벤트를 동작하는 방법에 대하여 알아봅니다.클릭 이벤트는 가장 기본적인 이벤트 방법입니다. 여러가지 인터페이스에서 사용되어 빈도가 매우 높아 꼭 알아둬야 합니다. 그렇다면 클릭이벤트는 어떻게 사용할까요?# VueJS 클릭이벤트 만들기VueJS에서 클릭 이벤트를 만들 경우 해당하는 태그 엘리먼트에 아래의 속성을 설정합니다. 두 가지 모두 동일하며 @는 줄여쓰는 방법으로 v-on 디렉티브를 의미합니다.@clickv-on:click여기서 v-on:의 의미는 VueJS에서 이벤트를 바인드한다는 뜻입니다. 즉 설정된 이벤트의 콜백함수를 호출하게 되죠. 만약 v-on:click="showMsg();" 라는 코드가 있다면 ~ showMsg() 함수를 호출할 것입니다. 그렇다면 간단한 예제를 보겠습니
Last Modified : 2019-08-06 22:00:28이벤트를 실행하기 위해 on() 메소드를 사용하였으나 live()메소드가 deprecated되면서 on() 메소드와의 사용방법 때문에 함수의 실행이 되는 경우와 안되는 경우가 있습니다. 이때 해결할 수 있는 방법은 아래처럼 코드를 수정하면 가능합니다.# 기존$('gallery').on('click', function() {...});# 변경 후$(document).on('click', '#gallery', function() {...});
Last Modified : 2015-11-15 23:41:40오래된 게임이죠 ~ 흠 붉은보석이란 게임을 처음 접한지도 10년이 지난 것 같습니다.. 오늘 웹서핑을 하다가 붉은보석에서 복귀자 이벤트를 한다는 문구를 보았습니다. 붉은보석... 정말 재미있게 했었던 게임이죠 ^^출처 : 붉은보석 공식 웹사이트붉은보석은 과거 상당한 인기를 누렸던 게임입니다. 당시 일본에도 수출하면서 꽤 괜찮은 인기를 누렸죠 ~ 게다가 무료였기 때문에 더 많은 인기를 누릴 수 있었죠. 하지만... 얼마 지나지 않아 부분 유료화라는 정책이 생겨났고 포털스피어라는 프리미엄 아이템이 존재하게됩니다. 이 아이템이 있고 없고의 차이는 게임의 경험치와 위치 저장이라는 놀라운 혜택을 사용하느냐 마느냐의 차이로 결국 누구나 가져야 하는 필수 아이템이 되었습니다. 게임의 맵이 상당히 컸기때문에 장소 이동을
Last Modified : 2015-11-06 01:45:42제이쿼리의 이벤트 핸들러로는 bind(), delegate(), live(), on() 등등이 있습니다. 그 중에서 live() 이벤트 핸들러가 있는데 이에 대하여 알아봅니다. 이 이벤트 역시 bind()함수처럼 클릭이나 그 외의 이벤트를 연결해주는 핸들러로서 사용됩니다. 사용방법은 간단하며 아래와 같습니다. $(선택요소).live('해당 이벤트') 그럼 아래에서 예제와 함께 알아보세요.# 제이쿼리 이벤트핸들러 live() 예제보기아래는 간단한 live() 이벤트 핸들러를 사용한 이벤트 등록 코드 예제입니다. 만약 id가 ele인 요소에 이벤트를 수행하는 경우 다음과 같습니다.$('#ele').live('click', function() { alert('Hi');});!! 그러면, live() 함수가 bi
Last Modified : 2017-11-28 05:59:43CKEDITOR에서 keyup 클릭 이벤트는 어떻게 사용하나요?# CKEDITOR에서 Keyup 이벤트 사용하기만약 textarea 태그의 name 속성이 testEditor인 경우 아래와 같이 코드를 작성합니다.CKEDITOR.instances.testEditor.on('keyup', function(e) { alert();})keyup이벤트가 동작하게 됩니다.
Last Modified : 2017-04-13 11:26:44제이쿼리를 사용해 요소를 생성하는 방법과 간단하게 클래스, 아이디를 비롯하여 CSS스타일과 이벤트를 지정하는 방법에 대하여 알아보려합니다.먼저 위에 사용된 방법 #1과 아래에 사용된 방법 #2를 비교해 주시기 바랍니다. 얼마나 간단하게 지정할 수 있는지 한눈에 보실 수 있습니다.#1 예제소스 코드 : 요소 생성 후 개별적인 메소드를 사용해 스타일, 이벤트 지정한 방법var testEle = $('<div>');// div 태그를 생성 후 변수 testEle에 지정testEle.attr('id', 'testId');// testEle 요소에 아이디값 testId를 지정testEle.addClass('testClass');// testEle 요소에 클래스명 testClass를 지정testEle.css('colo
Last Modified : 2015-10-30 09:03:24카카오에서 카카오파머란 브랜드를 통해 제주감귤을 유통하기 시작했습니다. 감귤을 시작으로 또 다른 농산품에 대한 소식도 조만간 들들리지 않을까요?모바일 비즈니스에만 집중하지 않고 계속해서 생활에 필요한 다양한 서비스에 진출하기 시작하는군요. O2O 비즈니스는 이젠 카카오에서 모두 만나게 될지도 모르겠습니다. 더 나은 서비스를 제공한다면 소비자도 역시 환호할 것입니다.아무래도 농산물 유통은 기존의 비즈니스와는 거리가 있어보이는군요... 기존 농가에 도움이 되는쪽으로 방향을 나아갔으면 좋겠습니다.카카오파머 홈페이지에서도 구매가 가능합니다# 맛있는 서귀포 감귤을 직접 선과단순 물류가 아닌 서귀포 감귤을 직접 엄수하여 고른 후 배송한다고합니다. 상품은 더욱 믿을 수 있겠군요. 현재 이벤트가 진행중인 웹사이트# 이쁜
Last Modified : 2015-11-10 19:08:12AngularJS에서 자바스크립트를 사용하여 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:05angularjs에서 흔히 볼 수 있는 이벤트 메소드로 $destory를 볼 수 있습니다. 이때 이벤트가 동작하는 로직 그리고 언제 이를 사용하는지 알려주세요.# destroy 예제소스 보기scope.$on('$destroy', function() { alert('Destroy!!');});$destroy를 호출하여 이벤트를 제거하는 것은 일반적인 경우에는 필요가 없지만 다른 Angular가 아닌 다른 라이브러리, 순수 자바스크립트에 의하여 추가된 이벤트 등을 정상적으로 메모리에서 제거하기 위한 방법으로 사용됩니다.
Last Modified : 2017-09-21 00:19:56CKEDITOR 만약 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:29html5를 사용하기 이전에는 멀티미디어 타입인 비디오 영상이나 오디오 음성을 구현하기 위해 플래시나 실버라이트와 같은 외부 어플리케이션이 반드시 필요했었습니다. 하지만 html5를 사용하면 비디오 및 오디오 같은 멀티미디어 처리를 위해 별도의 외부 프로그램이 없어도 구현하게 되었죠.비디오 영상 구현에 필요한 <video> 태그를 사용할 경우 다양한 상황을 제어하기 위한 이벤트 제어가 필수입니다. 이벤트에 대한 정보는 무엇일까요?# 비디오 상태와 관련된 이벤트loadeddata - 비디오가 로딩 된 이후에 이벤트 발생loadedalldata - 비디오가 모두 로딩 된 이후에 이벤트가 발생함
Last Modified : 2017-09-21 00:16:46다른 스코프로 이벤트를 전달하기 위하여 $emit, $broadcast를 사용하고 $on 이벤트로 다른 스코프 영역에서 전달 받을 수 있습니다.이때 이벤트의 이름은 어떻게 정하는 것이 이해하기 쉽고 좋은 이름 명일까요?참고로 아래글은 $emit, $broadcast를 사용하여 전달하는 방법입니다.http://webisfree.com/blog/?titlequery=%EB%B2%94%EC%9C%84-scope-emit-broadcast-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0# 효과적인 이벤트 이름현재위치 - 이벤트의 대상 - 상태값위와 같은 방법도 괜찮을 것 같습니다. 예를들어...만약 사용자가 로그인하였을 경우 이를 다른 scope에 전달하려면 다음과 같이
Last Modified : 2017-05-19 15:53:06
