HTML event handler

# HTML event handler HTML event handler. Javascript/jQuery 로 HTML 에서 일어나는 여러가지 event 들을 처리해서 interactive 한 페이지를 만들 수 있음. 그런데 헷갈리는 것들이 많고, 어떤 event 들이 있는지도 다 기억하기 힘들어서 정리하는 중. ## PH

• 2016-02-01 : Smart phone touch event 관련 정리.
• 2015-12-10 : 조금 더 정리.
• 2014? : First posting.

## TOC ## Mouse and Touch event ### On click event (getting event position)

```[#mouse-event-result.scrollable] mouse-event-result ```/ ```[#pre-code-mouse-event.scrollable] ```/

### On mousemove event

```[#mousemove-event-result.scrollable] mousemove-event-result ```/ ```[#pre-code-mousemove-event.scrollable] ```/

### On touchstart event

```[#touchstart-event-result.scrollable] touchstart-event-result ```/ ```[#pre-code-touchstart-event.scrollable] ```/

### On touchmove event

```[#touchmove-event-result.scrollable] touchmove-event-result ```/ ```[#pre-code-touchmove-event.scrollable] ```/

### On drag event

w3schools - HTML ondrag Event Attribute 에서 가져온 얘제.

Drag the div element back and forth between the two rectangles:

Drag me!

Note: drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.

사파리 5.1 에서는 안되는거 확인.

### Drag (mousemove, touchmove) and Click event (5 stars) Firefox 에서 svg 가 drag 되네? 이거 막을 수 없나?

test-5stars-result1

```[#test-5stars-result.scrollable] test-5stars-result ```/

#### SVG - polygon 이건 그냥 SVG (Scalable Vector Graphic) 테스트. 별 모양 만드려고.

\begin{align*} &(x_n , y_n) = (x_{\text{center}} , y_{\text{center}}) + r ( \cos \theta_n , \sin \theta_n ) \\ &\text{where } ~~ \theta_n = - \frac{\pi}{2} + \frac{2 \pi}{5} n ~~ \text{ where } ~~ n = 0 \sim 4 \end{align*}

## Keyboard event Keyboard input 을 받을 수 있는 html element 들에는 다음과 같은 것들이 있음. ```[.lang-html] <input type="text"> <textarea name="" id="" cols="30" rows="10"></textarea> <select name="" id=""></select> <div contentEditable="true"></div> ```/ input : textarea : select : div contentEditable :

### On input (IE<9 에서는 안먹히네) IE<9 에서는 on input 이 안먹히네? IE 에서도 동작하면 이게 딱 내가 원하는 거긴 한데... paste by mouse 에도 잘 반응하고.

on input

#### On input + On propertychange 이것도 IE 에서 안먹히네. 그런데 이렇게 두개 이상에 handler 묶어놓으면 2번 실행되는건가???

on input

#### On input + On keyup 이러면 해결 될래나??? 크롬에서는 event 가 두 번 실행될때가 많음.

on input

#### On input + On keyup + On paste 중복으로 fire 될때가 많아서 이걸 처리해줘야 할듯?

on input

### On change The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements.

<div contenteditable="true"> 에서는 event 가 발생하지 않음. 또한 값이 변화하고 나서 focus 가 바뀌거나 해야 trigger 되는듯.

on change

### On keydown 키가 눌려졌을때 event 가 발생함. key 값은 e.keyCode 같은걸로 뽑아낼 수 있음. 딱 눌렸을때 event 가 발생하는거라 값이 변하기 전의 text 가 나타남.

on keydown

### On keyup 키가 눌리고 값이 변한 후에 event 가 발생함. On input 이랑 같은듯 다른가? 뭐가 다른건지 정확히 모르겠네;;; On input 은 IE 에서 안먹히니 이걸 씁시다? On input 은 내용이 바뀔때만 trigger 되지만, 이놈은 ctrl 키든 alt 키든 keyup 일땐 언제나 trigger 되는듯. 대신 마우스로 복붙, 잘라내기, 삭제 같은걸 수행할땐 trigger 되지 않음. (요게 은근 귀찮게 하네;;;)

on keyup

#### On keyup + On paste Paste by mouse 의 경우 붙여넣기 이전 text 가 나오네;;;

on keyup

#### On keyup + On paste with clearTimeout and setTimeout clearTimeout and setTimeout 이용해서 해결합시다? mouse 로 cut, delete 등도 다 처리해줘야 하는거 같은데... 그냥 keyup, cut, paste 만 넣고 나머지는 포기하자. input 되는데에선 이걸로 하도록 하고.

on keyup

### Selection ``` var sel=window.getSelection(); sel.removeAllRanges(); var newRange=document.createRange(); newRange.setStart(this.childNodes[2], 10); newRange.collapse(true); sel.addRange(newRange); ```/

test dffjfkd k dkf osd kj sl dfkj soidfj lsdf
keyboard something is entered.
And asdfasdf asdf asdf asdf asdfasdfasdfasdf

```[#test-keyboard-result.scrollable] test-keyboard-result ```/

```[#input-test-result.scrollable] input-test-result ```/ ### Keyboard event handling by javascript (Enter, Delete, Back space) 해야하는 것들이...

• Selection 이 범위일때 엔터, 벡스페이스, 딜리트 처리.
• Caret 위치가 key 입력 이후 이동한 위치에 red dot 이 찍히는게 아니라 이전 위치에 찍힘. (이건 뭐 큰 문제는 아닌듯도.)
• 화살표나 엔터로 scroll 이 잘 동작 안하는거 해결. (border 때문인가? 마지막 엔터도 문제이긴 한듯?)
• keypress (upper/lower case 구분) 랑 keydown (upper/lower 구분없음.) 이랑도 약간 다르게 동작하는듯? 복잡하네 ㅡ..ㅡ
• Tab 치면 자동완성? Auto completion, and Fuzzy search.

해놓은 것들은

• Caret 위치에 빨간 점 찍기. 이건 in-pop-up 띄우기 위한 전초작업.
• Delete, Back space 로 지울때, text object 가 갈리는거 해결.
• 엔터쳐서 줄바꿈할 때, 다음 text 첫 글자가 space 이면 사라지는거 해결.
• 엔터치면 <br>으로 붙이기.
• 입력 이후 caret 위치 적절히 이동.
• Direct children element 만 처리할까나? Caret or Selection 이 더 하위 child elem 에 있을수도 있어서 복잡해 지는듯?

test dffjfkd k dkf osd kj sl dfkj soidfj lsdf
 keyboard something is entered.
 And asdfasdf asdf asdf asdf asdfasdfasdfasdf

```[#test-keyboard-1-result.scrollable] test-keyboard-result ```/ ## RRA

1. MDN - API - Event; and event.clientX
2. MDN - Selection and Range
3. MDN - document.caretPositionFromPoint
4. w3schools - HTML DOM Events - MouseEvent Object 부분
5. jQuery API - on(); and off()
6. w3schools - SVG polygon
7. kirupa.com - html5 - Getting the mouse click position, 2013-01-01, by kirupa
8. Vishal Monpara's Blog - Javascript : Getting and Setting Caret Position in Textarea, 2005-12-27
9. developer.apple.com - library - SafariWebContent/HandlingEvents/HandlingEvents
   // Apple Safari 쪽만 mouse event 가 뭔가 다르게 동작함;;; 클릭후 드레그인지 그냥 mousemove 인지 구분이 안되네. mousedown, mouseup event 에서 따로 처리해서 알아내야 하나?

Slider

10. jQuery UI - Slider
11. foundation.zurb.com - Range Slider