클릭 이벤트를 구현할 때 똑같은 기능이 반복되게 하려면 어떻게할까요? 마치 스위치를 누를때처럼 말이죠. 버튼을 누를때 마다 다른 함수를 실행하거나 아니면 스위치를 켜고 끌때와 같이 딱 두개만 반복해서 계속 실행하려면 아래의 방법을 사용합니다.(아래에 나와 있지만 현재 이 기능의 대부분은 Deprecated되어 현재 예제대로 구현되지 않을 수 있습니다. 최신 버전의 jQuery에서는 다른 기능으로 toggle()이 사용되니 이 점 알아두세요!)# 제이쿼리 toggle() 메소드 알아보기함수 두 가지를 번갈아가며 실행하는 방법처럼 토글 및 스위치처럼 동작되게 하는 메소드로 제이쿼리에 toggle()이 있습니다. 그럼 예제를 통해 자세히 알아봅니다. ! toggle() 메소드 는 언제 사용할까 아래 이미지를 보시
Last Modified : 2017-12-12 15:30:28자바스크립트의 이벤트 중 클릭한 요소를 가져오는 방법으로 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
웹페이지에서 버튼이나 어떤 엘리먼트를 반드시 직접 클릭하지 않고도 클릭 이벤트를 동작하는 방법이 있습니다. 제이쿼리의 경우 trigger() 메소드가 있는데요 ~ 자바스크립트에서 구현할 경우 어떻게 하면 동작하는지 알아보겠습니다.제이쿼리 trigger() 바로가기 >https://webisfree.com/2014-01-03/[jquery]-이벤트의-강제-실행-커스텀-이벤트-trigger()# 자바스크립트 클릭하지 않고 클릭 이벤트 동작하기이처럼 마치 클릭한 것처럼 이벤트를 동작 시키는 방법인 가상 클릭 방법을 알아보겠습니다. 이 방법은 크게 두 가지가 있는데 하나는 click()을 사용하는 것이고 다른 하나는 createEvent()를 사용하여 커스텀이벤트를 만드는 방법입니다.1. click() 사용하기
Last Modified : 2019-08-07 20:38:36문제는 다른 브라우저의 경우 클릭이 잘 되나 Firefox(파이어폭스)에서 button 태그안에 위치한 a 태그가 클릭이 안된다는 점입니다... 하지만, button 태그안에 a 태그를 사용하는 것이 올바른 방법은 아니기에 이 문제를 해결하기 위한 방법은 크게 두가지 입니다.하나. a 태그를 버튼 밖으로 이동# 기존<button><a href="/">TEST</a></button># 수정 후<a href="/"><button>TEST</button></a>가장 올바른 방법입니다. 물론 CSS 스타일이 적용되었다면 수정해야하죠.둘. form 태그를 사용한 방법# 기존<button><a href="/">TEST</a></button># 수정 후<form><button type="submit" formaction
Last Modified : 2015-11-06 01:16:53
VueJS에서 클릭 이벤트를 동작하는 방법에 대하여 알아봅니다.클릭 이벤트는 가장 기본적인 이벤트 방법입니다. 여러가지 인터페이스에서 사용되어 빈도가 매우 높아 꼭 알아둬야 합니다. 그렇다면 클릭이벤트는 어떻게 사용할까요?# VueJS 클릭이벤트 만들기VueJS에서 클릭 이벤트를 만들 경우 해당하는 태그 엘리먼트에 아래의 속성을 설정합니다. 두 가지 모두 동일하며 @는 줄여쓰는 방법으로 v-on 디렉티브를 의미합니다.@clickv-on:click여기서 v-on:의 의미는 VueJS에서 이벤트를 바인드한다는 뜻입니다. 즉 설정된 이벤트의 콜백함수를 호출하게 되죠. 만약 v-on:click="showMsg();" 라는 코드가 있다면 ~ showMsg() 함수를 호출할 것입니다. 그렇다면 간단한 예제를 보겠습니다
Last Modified : 2019-08-06 22:00:28
자바스크립트의 이벤트 중에서 키를 계속 누르는 경우의 이벤트 제어 방법을 알아봅니다. 이 방법은 마우스에서도 동일하게 동작시킬 수 있습니다. 어떻게하면 가능할까요?예를들어 클릭하면 숫자가 올라가는 요소가 있는 경우를 생각해봅니다. 일반적인 클릭 이벤트에서는 클릭을 계속 누르면 숫자가 하나 올라갈 것입니다. 만약 숫자가 0에서 100을 선택할 경우... 100번 클릭해야하겠죠? 이 방법이 아닌 키를 계속 누를 경우 계속해서 숫자가 올라간다면? 더욱 편한 방법일 것입니다. 아래는 키를 계속 누르는 경우의 이벤트 구현 방법에 대하여 알아봅니다.# 마우스 또는 키보드를 계속 누르는 이벤트 구현하기먼저 이벤트를 동작하게 하는 트리거에는 클릭은 있지만 클릭중?이라것은 없습니다. 그런 이유로 직접 클릭이 계속되고 있음을
Last Modified : 2018-06-02 21:37:05
사이트 운영자, 블로그 또는 게임 등의 콘텐츠 운영자들의 공통된 고민 중 하나... 그것은 바로 왜 내 사이트 광고 클릭율(ctr)이 다른 사이트에 비하여 낮은가이다. 낮은 ctr은 결국 사이트 수익으로 반영되므로 운영자의 경우 어떻게든 조금이라도 ctr을 높이기 위한 방안들을 강구하게 마련이다. 하지만 대부분의 경우 ctr에 큰 변화가 나타나기 어렵다.많은 이들은 이런 불평을 내놓는다. "옆에 사이트는 높게 나오는데... 난 이것 저것 다해봤지만 그대로야..." 맞는 말이다. 뭔가 이유가 있는 것 같긴하지만 뭐가 문제인지 제대로 알기 어렵다. 실제로 비슷한 주제의 콘텐츠를 올리는 두 개의 사이트가 있다고 했을때 실제 클릭율의 차이는 생각보다 클 수 있다. 클릭율의 경우 0.5%, 2%의 ctr 차이를 갖는
Last Modified : 2016-09-18 11:38:47제이쿼리의 이벤트 메서드 중 하나인 click()의 반대되는 unclick()이 존재할까요?이벤트를 추가한 경우 제거해야할 상황이 있습니다. 특히 비동기식 페이지에서는 페이지 전환이 이뤄지지 않아 메모리 leak이 발생할 수 있기 때문이죠. 그렇기 때문에 실제로 이벤트는 on(), off()를 사용하여 이벤트를 바인딩고 언바인딩합니다. 그래야 성능 및 메모리 이슈가 없겠죠 ~ 그렇다면 이런 메서드 없이 click()을 사용한 경우라면 ??? 어떻게 unbinding 할 수 있을까요? 아래 예제라면...$('button').click(function() { alert();});위 코드는 아래처럼 unclick() 이 존재한다면 언바인딩 가능하겠죠~ 즉 이벤트를 제거할 수 있겠죠!$('button').uncl
Last Modified : 2017-08-28 12:33:37CKEDITOR 만약 keyup 클릭 이벤트가 동작 안하는 경우 해결법은 무엇일까요?클릭이벤트가 동작 안하는 경우가 발생하여 여러가지 테스트 해보았으나 안된느 경우가 발생하였습니다. 이때 해결방법으로 keyup 대신 change 이벤트로 변경하는 방법이 있습니다. 변경 후 잘 동작하였습니다.CKEDITOR.instances.editor.on('change', function(e) { alert();})어디가 문제인지는 확실치 않으나 플러그인에 문제가 있을 수도 있으므로 확실한 원인 찾기가 어렵더군요.
Last Modified : 2017-04-13 11:29:31angularjs에서 이벤트를 동작시킬때 클릭이 아닌 더블 클릭을 태그 요소에 바인딩하는 방법을 알아봅니다.# angularJS 더블 클릭 디렉티브더블 클릭을 위해서 ngDblclick 디렉티브를 사용할 수 있습니다.ngDblclick이 디렉티브는 해당 요소를 더블 클릭해야 이벤트를 동작합니다. 만약 아래와 같은 코드를 작성한 경우 더블 클릭할 때 doSomething() 메소드를 호출하게 됩니다.<span ng-dblclick="doSomething();">Click</span>testController에는 아래처럼 doSomething()을 가지고 있습니다.app.controller('testController', function() { this.doSomething = function() { a
Last Modified : 2019-08-18 15:05:53HTML에서 사용되는 버튼 태그 <button> 정보입니다.버튼 태그는 방문자의 클릭 등 액션을 목적으로 하는 태그로 <button>으로 사용됩니다.! button 비활성화 방법버튼 태그의 비활성화 방법으로 disabled 속성을 추가합니다.<button disabled>Click</button>! IE에서 <a> 태그와 함께 <button> 태그를 사용하는 경우 클릭이 안되는 문제점익스플로러의 경우 아래의 경우처럼 버튼 태그의 위치에 따라 클릭이 안될 수 있습니다. 즉 만약 button 태그의 안에 a 태그가 있는 경우가 이에 해당합니다.<button><a href="/webisfree/">클릭</a></button>이런 경우 해결하는 가장 간단한 방법은 역시 <button>태그의 랩퍼로 <a> 태그를 사
Last Modified : 2020-02-14 16:45:54아래의 경우 링크는 반복해서 클릭되곤 합니다.- 사용자에게 클릭되었는지 명확히 확인되지 않는 경우...- 반복 클릭될 수 있는 여지를 제공한 경우- 성격이 급한 사용자인 경우계속해서 요청을 보내는 일을 없앨 수 있는 효과적인 방법은 무엇일까요?
Last Modified : 2017-09-21 00:20:24