Common Javascript monitor events
Event listener mechanism
- Concept: Some components is performed certain operations, trigger the execution of some code.
- Event: certain operations. Such as: click, double click, press the keyboard, the mouse moved
- Event Source: components. Such as: the button text input box ...
- Listener: Code.
- Sign Monitor: The combination of events, event source, the listener. When an event occurs on the event source, then trigger the execution of a listener code.
- Common events:
-
Click event:
- onclick: Click Event
- ondblclick: Double-click event
-
Focus Events
- onblur: lose focus
- onfocus: element receives the focus.
-
Load event:
- onload: a page or an image has finished loading.
-
Mouse events:
- onmousedown mouse button is pressed.
- onmouseup mouse button is released.
- onmousemove mouse is moved.
- onmouseover mouse over an element.
- onmouseout mouse is moved off an element.
-
-
Keyboard events:
1. onkeydown a keyboard key is pressed.
2. onkeyup a keyboard key is released.
3. onkeypress a keyboard key is pressed and released.-
Select and change
- Onchange field content is changed.
- onselect text is selected.
-
Form events:
- onsubmit confirmation button is clicked.
- onreset reset button is clicked.
-
-
How to bind event
-
Directly on the html tag, attribute specifies the event (operation), is the attribute value js code
- Event: onclick- click event
-
Element object acquired by js, specify the event properties, set a function
- Code:
-
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script>
function fun(){
alert('我被点了');
alert('我又被点了');
}
function fun2(){
alert('咋老点我？');
}
//1.获取light2对象
var light2 = document.getElementById("light2");
//2.绑定事件
light2.onclick = fun2;
</script>
</body>
