event
The so-called event, meaning something happened, a complete flow of events starting from the window object, and finally back to a window in the process.
Event stream is divided into three stages, the capture phase, the goal stage, as well as the bubbling phase.
Event Listeners
Something happened there is a need to have to have a corresponding response event listener (function), the event listener to determine whether to respond accordingly based on the analysis of the events.
We commonly used event listener following installation Listeners (create a listener function) methods: 1, dom0 grade, 2, dom2 grade 3, other third-party libraries encapsulation method (is based on a native JS do)
first-class listening dom0 installation function in fact very simple to operate, he has not completely abandoned by generations of new versions of the ES standard, because in some cases, the syntax dom0 is actually simpler. For example, let's change the height of the div div case we need to move the mouse, the monitor function can be achieved:
document.querySelector("div").onmouseenter=function(){
document.querySelector("div").style.height="200px"
}
Because the mouse moved into itself it is one thing, this thing called the incident happened, so the corresponding binding event listener function will be triggered, the selected height of the div element becomes 200px.
Of course, the listener binding method previously mentioned dom2 follows:
document.querySelector("div").addEventListener('mouseenter',function(){
document.querySelector("div").style.height="200px"
})
Of course events into mouse events is just one of the many common events only, please refer to learning more events: Click Go: runoob
Front briefly what event, and add events, remove events described below under
1, dom0 level events removed:
document.querySelector("div").onmouseenter = null;
Personally, I think this is very violent but also very simple and practical means of removing the event.
2, dom2 level events removed:
Event first dom2 created using the above method is not to be removed, such as the following code, remove the event is not in force;
function changeHeight(){
document.querySelector("div").style.height="200px"
}
document.querySelector("div").addEventListener('mouseenter',changeHeight);
document.querySelector("div").onmouseenter=null;
So use the following method to remove the event:
function changeHeight(){
document.querySelector("div").style.height="200px"
}
document.querySelector("div").addEventListener('mouseenter',changeHeight);
document.querySelector("div").onmouseenter=null;//无效
document.querySelector("div").removeEventListener('mouseenter',changeHeight)//有效
Event agency
As the name suggests, the event broker is exhausted to do more agents on an object, usually delegating to the parent or ancestor element-level elements, for example, now have a request, there is a element ul li element, id respectively li0 ~ li9 ; now the demand is for each click on a li, li id value of the print.
Analysis: 10 li body of the event is similar but not identical (because of their different id values, so different print results), this time we certainly can bind a function of time listening to each li element, but that its a typical scenario is cumbersome and not conducive to enhancing performance, so at this time is the event proxy applications: code is as follows:
<body>
<ul>
<li id="li0">我是li0</li>
<li id="li1">我是li1</li>
<li id="li2">我是li2</li>
<li id="li3">我是li3</li>
<li id="li4">我是li4</li>
<li id="li5">我是li5</li>
<li id="li6">我是li6</li>
<li id="li7">我是li7</li>
<li id="li8">我是li8</li>
<li id="li9">我是li9</li>
</ul>
<script>
document.querySelector("ul").onclick=function(event){
let idOfLi = event.target.id;
console.log(idOfLi);
}
</script>
</body>
This way to achieve a simple event agency:
over the next as follows:
Finally herein, this simply describes the next event, but can use this entry to explore more interesting events.
