Event monitoring
Event monitoring is to let the computer wait for an event to occur, and when this event occurs, make a response to it, such as waiting for the mouse to click the button, click to open a new page when it occurs; but the monitoring event you wrote found this After the event, it will be blocked so that it cannot jump.
Event monitoring involves three class objects
1. EventSource (event source) where the event occurred
2. Event (event): event encapsulates specific events that occur on interface components
3. EventListener (event listener): responsible for monitoring events from the event source
Event monitoring usage
1. When the same object uses .onclick to trigger multiple methods, the latter method will overwrite the previous method, that is, when the object's onclick event occurs, only the last bound method will be executed. With event monitoring, there will be no coverage, and every bound event will be executed.
window.onload = function(){
var btn = document.getElementById("yuanEvent");
btn.onclick = function(){
alert("第一个事件");
}
btn.onclick = function(){
alert("第二个事件");
}
btn.onclick = function(){
alert("第三个事件");
}
}
2. After the event listener is used to bind the object method, the corresponding binding can be released.
var eventOne = function(){
alert("第一个监听事件");
}
function eventTwo(){
alert("第二个监听事件");
}
window.onload = function(){
var btn = document.getElementById("yuanEvent");
btn.addEventListener("click",eventOne);
btn.addEventListener("click",eventTwo);
btn.removeEventListener("click",eventOne);
}
3. When unbinding the event, you must use the handle of the function. It is impossible to unbind the entire function by writing it.
btn.addEventListener("click",eventTwo);
btn.removeEventListener("click",eventOne);
Event model
There are two event models in javascript: DOM0 and DOM2.
The DOM0-level event model is an early event model, supported by all browsers, and its implementation is relatively simple.
<p id = 'click'>click me</p>
<script>
document.getElementById('click').onclick = function(event){
alert(event.target);
}
</script>
This event model is to register the event name directly on the dom object. This code is to register an onclick event on the p tag, and output the click target inside the event function. Dismissing the event is even simpler, which is to copy null to the event function, as follows:
document.getElementById('click'_).onclick = null;
From this we can know that in dom0, a dom object can only register one function of the same type, because if multiple functions of the same type are registered, overwriting will occur, and the previously registered function will be invalid.
The DOM2 level event model is a capture and bubbling model, which is an event. It must be captured first, and then bubbling the
DOM2 level registration and release events.
In the DOM2 level, addEventListener and removeEventListener are used to register and release events. Compared with the previous method, the advantage of this function is that a dom object can register multiple events of the same type, no event coverage will occur, and each event function will be executed in sequence.