CATEGORIES
웹페이지에서 버튼이나 어떤 엘리먼트를 반드시 직접 클릭하지 않고도 클릭 이벤트를 동작하는 방법이 있습니다. 제이쿼리의 경우 trigger() 메소드가 있는데요 ~ 자바스크립트에서 구현할 경우 어떻게 하면 동작하는지 알아보겠습니다.제이쿼리 trigger() 바로가기 >https://webisfree.com/2014-01-03/[jquery]-이벤트의-강제-실행-커스텀-이벤트-trigger()# 자바스크립트 클릭하지 않고 클릭 이벤트 동작하기이처럼 마치 클릭한 것처럼 이벤트를 동작 시키는 방법인 가상 클릭 방법을 알아보겠습니다. 이 방법은 크게 두 가지가 있는데 하나는 click()을 사용하는 것이고 다른 하나는 createEvent()를 사용하여 커스텀이벤트를 만드는 방법입니다.1. click() 사용하기
Last Modified : 2019-08-07 20:38:36
자바스크립트의 이벤트가 발생하는 경우 우리는 e 또는 window.event가 사용된 모습을 자주 볼 수있다. 이 두가지 키워드가 어떻게 사용되고 이벤트 안에서 어떤 일이 일어나는지 자세히 알아보고자 한다.먼저 아래의 코드를 보자. 아래 코드는 일반적인 이벤트 함수를 작성중인 코드로 그 일부분이다. 여기에 클릭 이벤트가 발생하며 특정 구문을 콜백으로 실행하려하는 코드이다.# 예제소스 보기testNode.onclick = function(e) { e = e || window.event; ... .}여기서 사용된 e 그리고 window.event는 무엇이 다른 것일까? 이 구문이 왜 필요한 것일까? 먼저 이 문법에 대하여 설명하자면 ...|| 문법은 변수 선언에 있어서 해당하는 값이 있는 경우 앞의
Last Modified : 2018-04-11 07:22:33ngClick 디렉티브를 사용하여 이벤트를 호출시 클릭했던 엘리먼트를 불러오는 방법에 대하여 알아봅니다. 만약 아래 코드의 버튼을 클릭한 후 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:21
VueJS에서 클릭 이벤트를 동작하는 방법에 대하여 알아봅니다.클릭 이벤트는 가장 기본적인 이벤트 방법입니다. 여러가지 인터페이스에서 사용되어 빈도가 매우 높아 꼭 알아둬야 합니다. 그렇다면 클릭이벤트는 어떻게 사용할까요?# VueJS 클릭이벤트 만들기VueJS에서 클릭 이벤트를 만들 경우 해당하는 태그 엘리먼트에 아래의 속성을 설정합니다. 두 가지 모두 동일하며 @는 줄여쓰는 방법으로 v-on 디렉티브를 의미합니다.@clickv-on:click여기서 v-on:의 의미는 VueJS에서 이벤트를 바인드한다는 뜻입니다. 즉 설정된 이벤트의 콜백함수를 호출하게 되죠. 만약 v-on:click="showMsg();" 라는 코드가 있다면 ~ showMsg() 함수를 호출할 것입니다. 그렇다면 간단한 예제를 보겠습니
Last Modified : 2019-08-06 22:00:28제이쿼리의 이벤트 메서드 중 하나인 click()의 반대되는 unclick()이 존재할까요?이벤트를 추가한 경우 제거해야할 상황이 있습니다. 특히 비동기식 페이지에서는 페이지 전환이 이뤄지지 않아 메모리 leak이 발생할 수 있기 때문이죠. 그렇기 때문에 실제로 이벤트는 on(), off()를 사용하여 이벤트를 바인딩고 언바인딩합니다. 그래야 성능 및 메모리 이슈가 없겠죠 ~ 그렇다면 이런 메서드 없이 click()을 사용한 경우라면 ??? 어떻게 unbinding 할 수 있을까요? 아래 예제라면...$('button').click(function() { alert();});위 코드는 아래처럼 unclick() 이 존재한다면 언바인딩 가능하겠죠~ 즉 이벤트를 제거할 수 있겠죠!$('button').uncl
Last Modified : 2017-08-28 12:33:37
자바스크립트의 이벤트는 이벤트를 발생시키는 경우(트리거 요소)를 구분하여 줍니다. 이때 가장 많이 사용되는 click 이벤트... 그리고 마우스 눌렀다가 뗄 경우 발생하는 mouseup 이벤트가 따로 존재하는데 이 둘의 차이점이 무엇인지 알아보겠습니다.왜 이런 궁금증이 생기는가...??클릭 이벤트가 클릭을 하는 시점에서 발생하지 않고 마우스를 클릭 후 띄는 액션에 발생하기 때문에 두 가지 모두 동일해보이기 때문입니다. 단순하게(?) 생각해봐도 mouseup 이벤트 발생이 좀 더 효과적일 것으로 기대할 수 있으나 왜 그런지 ~ 무엇이 다른지 확실히 알 필요가 있을 것입니다.일단 이 두 이벤트 함수를 나타내보면 아래와 같을 것입니다.<script type="text/javascript">/* 클릭 이벤트 함수
Last Modified : 2017-08-28 12:31:36AngularJS에서 자바스크립트를 사용하여 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에서 이벤트를 동작시킬때 클릭이 아닌 더블 클릭을 태그 요소에 바인딩하는 방법을 알아봅니다.# 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