만약 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-on은 특정 요소의 props로 사용하면서 이벤트를 사용하는 기본적인 방법입니다. v-on을 사용하면 mouseover외에도 여러 이벰트를 동작시킬 수 있습니다.다음으로 아래 예
2018-09-19 17:37:14마우스 우측버튼은 웹에서 잘 사용되지 경우가 없지만 백오피스, 관리자 페이지 등에 사용하면 매우 편리한 UI를 제공할 수 있습니다. 만약 오른쪽 버튼을 자바스크립트를 사용하여 제어할 필요가 있는 경우라면? 어떻게 사용할까요? 그리고 어떤 부분을 생각해봐야하는지 알아봅니다.먼저 아래는 마우스 우측버튼 클릭에 따른 이벤트 호출 방법에 대하여 자세하게 알아봅니다.# 마우스 우측버튼 이벤트 구현시 고려할 점먼저 웹에서 우측 버튼 클릭을 사용하려면 가장 먼저 두 가지 사항에 대하여 생각해볼 필요가 있습니다.우측 버튼시 이벤트 호출 방법브라우저 기본 이벤트 막는 방법마우스 우측버튼을 사용하기 위해서 이벤트 바인딩에 mousedown을 사용할 수 있습니다. mousedown 이벤트를 등록하면 좌측 또는 우측 버튼 클릭시 모두 이벤트가 동작하게 됩니다. 이 경우 아래와 같이 스크립트를 작성합니다.# 마우스 우측버튼 이벤트 등록하기아래 스크립트는 자바스크립트를 사용한 이벤투 구현방법입니다.docum
2017-09-06 05:08:02웹페이지의 특정 요소 위에 마우스를 올릴 경우 기본 마우스 커서가 아닌 다른 마우스 커서가 나타나는 것을 볼 수 있습니다. 예를들어 뭔가가 실행 중인 경우 모래시계의 마우스 커서가 나타날 수 있고 또한 클릭 후 드래그를 수행할 경우 이동(드래그) 형태의 아이콘을 바뀌는 것처럼 말이죠.이처럼 마우스 커서는 현재의 상태를 알려줄 수 있는 좋은 인터페이스 역할을 하기도 합니다. 만약 CSS를 사용하여 마우스 커서를 변경하고 싶다면 어떻게 해야할까요? 이 경우 cursor 속성을 사용합니다.css의 cursor 속성은 다양한 마우스 커서를 선택할 수 있도록 도와줍니다. 이를 사용해 사용자에게 좋은 ui / ux 경험을 제공할 수 있으므로 상황에 따른 적절한 마우스 커서 변경은 반드시 필요하겠습니다. 그럼 아래에서는 어떻게 바꾸는지 알아봅니다.# 마우스 커서 변경 예제보기아래는 css를 사용하는 cursor 속성 사용 방법입니다..test { cursor: default; }위 코드는 css
2016-07-07 14:38:56자바스크립트를 사용하여 마우스의 위치, 좌표값을 확인하는 방법에 대하여 알아보려합니다. 아래에서는 가장 간단한 방법인 제이쿼리를 사용해 알아보겠습니다# 제이쿼리를 사용하여 마우스 위치 알아내기 만약에 현재 마우스 커서가 위치한 값을 얻기 위해서는 어떻게 해야할까요? 기본적으로 마우스를 사용하는 이벤트 객체를 사용해야 합니다. 이벤트 객체는 모든 이벤트 핸들러를 가지고 있으며 좌표값 역시 확인이 가능합니다. 그럼 아래의 예제를 통해 실제 마우스가 어디 위치에 있는지 알아보세요.# 마우스 클릭 위치 예제보기; 아래 예제는 마우스를 클릭했을때의 브라우저에서의 현재 위치값(절대위치)을 가져오는 예제입니다. 마우스 위치를 가져오려면 이벤트 객체를 이용해야합니다. 아래 예제는 클릭 이벤트가 발생시 현재의 위치 값을 가져와 출력하는 예제입니다.이 예제에서 사용한 방버은 event.pageX 그리고 event.pageY 입니다. 이 두가지 속성은 전체 문서(document)에 해당하는 좌표값을
2016-05-31 10:56:16자바스크립트의 이벤트는 이벤트를 발생시키는 경우(트리거 요소)를 구분하여 줍니다. 이때 가장 많이 사용되는 click 이벤트... 그리고 마우스 눌렀다가 뗄 경우 발생하는 mouseup 이벤트가 따로 존재하는데 이 둘의 차이점이 무엇인지 알아보겠습니다.왜 이런 궁금증이 생기는가...??클릭 이벤트가 클릭을 하는 시점에서 발생하지 않고 마우스를 클릭 후 띄는 액션에 발생하기 때문에 두 가지 모두 동일해보이기 때문입니다. 단순하게(?) 생각해봐도 mouseup 이벤트 발생이 좀 더 효과적일 것으로 기대할 수 있으나 왜 그런지 ~ 무엇이 다른지 확실히 알 필요가 있을 것입니다.일단 이 두 이벤트 함수를 나타내보면 아래와 같을 것입니다.<script type="text/javascript">/* 클릭 이벤트 함수 */$('선택한 요소').on('click', function() { ...});/* 마우스업 이벤트 함수 */$('선택한 요소').on('mouseup', function() {
2016-02-01 10:17:08제이쿼리 이벤트 메소드 중 하나인 hover()에 대하여 알아봅니다.제이쿼리는 다양한 이벤트 관련 메소드를 제공하는데요 만약 마우스를 특정 엘리먼트 위에 올리면 발생하게되는 이벤트 역시 제이쿼리를 사용하여 제어할 수 있습니다. 이때 사용하는 메소드가 바로 hover()입니다.$(jqeuryElement).hover(콜백함수)위는 간단한 문법으로 hover() 메소드 내부에 호출할 콜백을 추가하는 방법으로 사용합니다.# 제이쿼리 hover() 메소드이 메소드 hover()는 CSS의 :hover 선택자를 사용하는 것과 동일한 방식으로 동작합니다. 다만 css에 사용하면 새로운 스타일(style)을 적용하는 것이 목적이지만 hover()는 자바스크립트를 사용하여 다양한 조작이 가능한 점입니다. 즉 콜백 이벤트를 사용해 원하는 함수를 호출할 수 있게됩니다.만약 제이쿼리를 사용하지 않는 경우 순수 자바스크립트의 mouseenter 그리고 mouserover 등의 이벤트와 동일하게 생각하
2015-11-25 14:55:09웹브라우저 안에서 키보드나 마우스 등을 사용하여 다른 영역으로 이동하는 방법은 무엇이 있을까요? 여러가지 방법이 있을 것입니다. 오늘은 사용자가 임의로 스크롤을 이동하는 것을 막기 위한 스크립트 방법을 알아보려합니다.우선 사용자가 페이지 안에서 스크롤을 사용해 이동하는 경우 어떤 방법을 사용할까요?마우스의 휠 버튼을 사용하는 경우 키보드의 커서키를 사용하는 방법 스크롤 바 위에 마우스를 올려 드래그하여 이동하는 방법이처럼 세가지 방법이 가장 보편적입니다. 이 중에서 오늘은 스크롤을 사용한 이동시 이를 블락하는 방법을 알아보겠습니다. 먼저 스크롤을 막는 것이 왜? 그리고 언제 필요할까요?# 스크롤의 이동을 막는 것이 필요한 경우언제 스크롤을 사용한 페이지 이동을 막아야할까요? 먼저 중요한 콘텐츠 화면 영역에서 빠른 스크롤 이동에 의하여 의도한 콘텐츠를 다 못보여주는 경우도 생각해볼 수 있습니다. 이런 경우는 예를 들면... 페이지 스크롤에 따라 화면이 동적으로 변하는 웹사이트의 경우가
2015-01-13 17:45:24
