웹페이지에서 버튼이나 어떤 엘리먼트를 반드시 직접 클릭하지 않고도 클릭 이벤트를 동작하는 방법이 있습니다. 제이쿼리의 경우 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에서 클릭 이벤트를 동작하는 방법에 대하여 알아봅니다.클릭 이벤트는 가장 기본적인 이벤트 방법입니다. 여러가지 인터페이스에서 사용되어 빈도가 매우 높아 꼭 알아둬야 합니다. 그렇다면 클릭이벤트는 어떻게 사용할까요?# VueJS 클릭이벤트 만들기VueJS에서 클릭 이벤트를 만들 경우 해당하는 태그 엘리먼트에 아래의 속성을 설정합니다. 두 가지 모두 동일하며 @는 줄여쓰는 방법으로 v-on 디렉티브를 의미합니다.@clickv-on:click여기서 v-on:의 의미는 VueJS에서 이벤트를 바인드한다는 뜻입니다. 즉 설정된 이벤트의 콜백함수를 호출하게 되죠. 만약 v-on:click="showMsg();" 라는 코드가 있다면 ~ showMsg() 함수를 호출할 것입니다. 그렇다면 간단한 예제를 보겠습니다. 예를들어 만약 버튼을 클릭시 openNew()라는 새로운 함수를 호출할 경우 아래와 같이 작성할 수 있습니다.<button v-on:click="openNew"></butto
2018-12-04 18:19:48angularjs에서 이벤트를 동작시킬때 클릭이 아닌 더블 클릭을 태그 요소에 바인딩하는 방법을 알아봅니다.# angularJS 더블 클릭 디렉티브더블 클릭을 위해서 ngDblclick 디렉티브를 사용할 수 있습니다. 이 디렉티브는 해당 요소를 더블 클릭해야 이벤트를 동작합니다. 만약 아래와 같은 코드를 작성한 경우 더블 클릭할 때 doSomething() 메소드를 호출하게 됩니다.<span ng-dblclick="doSomething();">Click</span>testController에는 아래처럼 doSomething()을 가지고 있습니다.app.controller('testController', function() { this.doSomething = function() { alert('Double Click !!'); };});여기까지 ngDblclick 디렉티브를 알아보았습니다.
2018-08-07 10:36:17ngClick 디렉티브를 사용하여 이벤트를 호출시 클릭했던 엘리먼트를 불러오는 방법에 대하여 알아봅니다. 만약 아래 코드의 버튼을 클릭한 후 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제이쿼리의 이벤트 메서드 중 하나인 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:53AngularJS에서 자바스크립트를 사용하여 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:32버튼 태그를 사용하는 경우가 매우 많은데요 ~ <button> 버튼태그의 정보 및 활용하는 다양한 방법에 대하여 궁금합니다.! IE에서 <a> 태그와 함께 <button> 태그를 사용하는 경우 클릭이 안되는 문제점익스플로러의 경우 아래의 경우처럼 버튼 태그의 위치에 따라 클릭이 안될 수 있습니다. 즉 만약 button 태그의 안에 a 태그가 있는 경우가 이에 해당합니다.<button><a href="/webisfree/">클릭</a></button>이런 경우 해결하는 가장 간단한 방법은 역시 <button>태그의 랩퍼로 <a> 태그를 사용하는 방법입니다.<a href="/webisfree/"><button>클릭</button></a>
2017-03-16 23:26:42자바스크립트의 이벤트가 발생하는 경우 우리는 e 또는 window.event가 사용된 모습을 자주 볼 수있다. 이 두가지 키워드가 어떻게 사용되고 이벤트 안에서 어떤 일이 일어나는지 자세히 알아보고자 한다.먼저 아래의 코드를 보자. 아래 코드는 일반적인 이벤트 함수를 작성중인 코드로 그 일부분이다. 여기에 클릭 이벤트가 발생하며 특정 구문을 콜백으로 실행하려하는 코드이다.# 예제소스 보기testNode.onclick = function(e) { e = e || window.event; ... .}여기서 사용된 e 그리고 window.event는 무엇이 다른 것일까? 이 구문이 왜 필요한 것일까? 먼저 이 문법에 대하여 설명하자면 ...|| 문법은 변수 선언에 있어서 해당하는 값이 있는 경우 앞의 값을 선언하고 없는 경우에는 뒤의 값을 선언하게 된다. 즉, 선언된 e 변수 두의 ||는 크로스 브라우징을 위해 사용된 것으로 이벤트 객체 중 맞는 부분에 사용할 수 있게된다.e
2016-05-17 06:34:38자바스크립트의 이벤트는 이벤트를 발생시키는 경우(트리거 요소)를 구분하여 줍니다. 이때 가장 많이 사용되는 click 이벤트... 그리고 마우스 눌렀다가 뗄 경우 발생하는 mouseup 이벤트가 따로 존재하는데 이 둘의 차이점이 무엇인지 알아보겠습니다.왜 이런 궁금증이 생기는가...??클릭 이벤트가 클릭을 하는 시점에서 발생하지 않고 마우스를 클릭 후 띄는 액션에 발생하기 때문에 두 가지 모두 동일해보이기 때문입니다. 단순하게(?) 생각해봐도 mouseup 이벤트 발생이 좀 더 효과적일 것으로 기대할 수 있으나 왜 그런지 ~ 무엇이 다른지 확실히 알 필요가 있을 것입니다.일단 이 두 이벤트 함수를 나타내보면 아래와 같을 것입니다.<script type="text/javascript">/* 클릭 이벤트 함수 */$('선택한 요소').on('click', function() { ...});/* 마우스업 이벤트 함수 */$('선택한 요소').on('mouseup', function() {
2016-02-01 10:17:08
