Javascript Tetikleyici Olaylar (Events)
HTML'de onclick olay dinleyicisidir, myFunction ise olay işleyicisidir:
<button onclick="myFunction()">Click me</button>
JavaScript'te click olaydır, myFunction ise olay işleyicisidir:
button.addEventListener("click", myFunction);
Çok Kullanılan Olaylar
onblur - When a user leaves an input field
onchange - When a user changes the content of an input field
onchange - When a user selects a dropdown value
onfocus - When an input field gets focus
onselect - When input text is selected
onsubmit - When a user clicks the submit button
onreset - When a user clicks the reset button
onkeydown - When a user is pressing/holding down a key
onkeypress - When a user is pressing/holding down a key
onkeyup - When the user releases a key
onkeyup - When the user releases a key
onkeydown vs onkeyup - Both
Fare Olayları
Olay | İşlevi | Örnek |
onmouseover/onmouseout | Farenin elemanın üzerine gelmesi veya üzerinden gitmesi | <div class="alan1" onmouseover="alert('üstümden git')" onmouseout="alert('Yine gel')"></div> |
onmousedown/onmouseup | Farenin elemanın üzerinde tuşlarına basılması veya bırakılması |
onmousedown - When mouse is clicked: Alert which element
onmousedown - When mouse is clicked: Alert which button
onmousemove/onmouseout - When moving the mouse pointer over/out of an image
onmouseover/onmouseout - When moving the mouse over/out of an image
Klikleme Olayları
Olay | İşlevi | Örnek |
onclick | Farenin elemanın üzerinde tıklaması | <h1 onclick="this.style.color='#FF0000'">Merhabalar</h1> |
ondblclick | Farenin elemanın üzerinde çift tıklaması |
Load Events
onload - When the page has been loaded
onload - When an image has been loaded
onerror - When an error occurs when loading an image
onunload - When the browser closes the document
onresize - When the browser window is resized
Others
What is the keycode of the key pressed?
What are the coordinates of the cursor?
What are the coordinates of the cursor, relative to the screen?
Was the shift key pressed?
Which event type occurred?
Event | Occurs When | Belongs To |
---|---|---|
abort | The loading of a media is aborted | UiEvent, Event |
afterprint | A page has started printing | Event |
animationend | A CSS animation has completed | AnimationEvent |
animationiteration | A CSS animation is repeated | AnimationEvent |
animationstart | A CSS animation has started | AnimationEvent |
beforeprint | A page is about to be printed | Event |
beforeunload | Before a document is about to be unloaded | UiEvent, Event |
blur | An element loses focus | FocusEvent |
canplay | The browser can start playing a media (has buffered enough to begin) | Event |
canplaythrough | The browser can play through a media without stopping for buffering | Event |
change | The content of a form element has changed | Event |
click | An element is clicked on | MouseEvent |
contextmenu | An element is right-clicked to open a context menu | MouseEvent |
copy | The content of an element is copied | ClipboardEvent |
cut | The content of an element is cut | ClipboardEvent |
dblclick | An element is double-clicked | MouseEvent |
drag | An element is being dragged | DragEvent |
dragend | Dragging of an element has ended | DragEvent |
dragenter | A dragged element enters the drop target | DragEvent |
dragleave | A dragged element leaves the drop target | DragEvent |
dragover | A dragged element is over the drop target | DragEvent |
dragstart | Dragging of an element has started | DragEvent |
drop | A dragged element is dropped on the target | DragEvent |
durationchange | The duration of a media is changed | Event |
ended | A media has reach the end ("thanks for listening") | Event |
error | An error has occurred while loading a file | ProgressEvent, UiEvent, Event |
focus | An element gets focus | FocusEvent |
focusin | An element is about to get focus | FocusEvent |
focusout | An element is about to lose focus | FocusEvent |
fullscreenchange | An element is displayed in fullscreen mode | Event |
fullscreenerror | An element can not be displayed in fullscreen mode | Event |
hashchange | There has been changes to the anchor part of a URL | HashChangeEvent |
input | An element gets user input | InputEvent, Event |
invalid | An element is invalid | Event |
keydown | A key is down | KeyboardEvent |
keypress | A key is pressed | KeyboardEvent |
keyup | A key is released | KeyboardEvent |
load | An object has loaded | UiEvent, Event |
loadeddata | Media data is loaded | Event |
loadedmetadata | Meta data (like dimensions and duration) are loaded | Event |
loadstart | The browser starts looking for the specified media | ProgressEvent |
message | A message is received through the event source | Event |
mousedown | The mouse button is pressed over an element | MouseEvent |
mouseenter | The pointer is moved onto an element | MouseEvent |
mouseleave | The pointer is moved out of an element | MouseEvent |
mousemove | The pointer is moved over an element | MouseEvent |
mouseover | The pointer is moved onto an element | MouseEvent |
mouseout | The pointer is moved out of an element | MouseEvent |
mouseup | A user releases a mouse button over an element | MouseEvent |
mousewheel | Deprecated. Use the wheel event instead | WheelEvent |
offline | The browser starts working offline | Event |
online | The browser starts working online | Event |
open | A connection with the event source is opened | Event |
pagehide | User navigates away from a webpage | PageTransitionEvent |
pageshow | User navigates to a webpage | PageTransitionEvent |
paste | Some content is pasted in an element | ClipboardEvent |
pause | A media is paused | Event |
play | The media has started or is no longer paused | Event |
playing | The media is playing after being paused or buffered | Event |
popstate | The window's history changes | PopStateEvent |
progress | The browser is downloading media data | Event |
ratechange | The playing speed of a media is changed | Event |
resize | The document view is resized | UiEvent, Event |
reset | A form is reset | Event |
scroll | An scrollbar is being scrolled | UiEvent, Event |
search | Something is written in a search field | Event |
seeked | Skipping to a media position is finished | Event |
seeking | Skipping to a media position is started | Event |
select | User selects some text | UiEvent, Event |
show | A <menu> element is shown as a context menu | Event |
stalled | The browser is trying to get unavailable media data | Event |
storage | A Web Storage area is updated | StorageEvent |
submit | A form is submitted | Event |
suspend | The browser is intentionally not getting media data | Event |
timeupdate | The playing position has changed (the user moves to a different point in the media) | Event |
toggle | The user opens or closes the <details> element | Event |
touchcancel | The touch is interrupted | TouchEvent |
touchend | A finger is removed from a touch screen | TouchEvent |
touchmove | A finger is dragged across the screen | TouchEvent |
touchstart | A finger is placed on a touch screen | TouchEvent |
transitionend | A CSS transition has completed | TransitionEvent |
unload | A page has unloaded | UiEvent, Event |
volumechange | The volume of a media is changed (includes muting) | Event |
waiting | A media is paused but is expected to resume (e.g. buffering) | Event |
wheel | The mouse wheel rolls up or down over an element | WheelEvent |
Kaynak:
- http://www.w3schools.com/js/js_events_examples.asp
- https://www.w3schools.com/jsref/dom_obj_event.asp