본문 바로가기

[IT/Programming]/HTML related

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 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 에서 따로 처리해서 알아내야 하나?
  10. Slider

  11. jQuery UI - Slider
  12. foundation.zurb.com - Range Slider
반응형