event
CSS Style:
pointer-events:none
Do not receive click events
Event principle (capture, target, bubble)
1. Capture phase
Features: from outside to inside,
2. Objective stage
3. Bubbling stage
Features: from inside to outside
addEventListener
DOM object addEventListener("time type", callback function after event departure, whether to capture phase trigger / configuration object)
once:true
addEventListener third parameter {once:true}
Receive events only once
When an event is triggered, two situations are encountered:
1. Event listening object 2 The object to which the event is ultimately triggered
If the monitored DOM has no child elements, the event listening object is the same as the final trigger target object
If the listening DOM has a child element and happens to click on the child element, the listening object is the external parent element, and the object clicked by the target is the child element.
Event listening object e.currenttarget this
Target object e.target e.srclelement (ie) eventually triggered by the event
When multiple child elements in the container need to listen for events, we only need to listen for events for the parent element, and judge the actual target object clicked through e.target. This method is called event delegate, which delegates the events of the child element to the parent element
Example:
div1.addEventListener("click",clickhandler1);
div2.addEventListener("click",clickhandler2);
div3.addEventListener("click",clickhandler3);
function clickhandler1(e){
console.log("div1--","e.target:",e.target,"e.srcElement:",e.srcElement,"e.currentTarget:",e.currentTarget,"this:",this)
console.log(e.target)
}
function clickhandler2(e){
console.log("div2--","e.target:",e.target,"e.srcElement:",e.srcElement,"e.currentTarget:",e.currentTarget,"this:",this)
}
function clickhandler3(e){
console.log("div3--","e.target:",e.target,"e.srcElement:",e.srcElement,"e.currentTarget:",e.currentTarget,"this:",this)
e.stopPropagation();
}
.stopPropagation
Stop bubbling
e.preventDefault
Remove the default event behavior (such as canceling the mail menu, submitting a form, jumping...)
e.stopImmediatePropagation( ) ;
If the DOM object listens for the same event type for multiple times and executes different event functions, using this method in an event function can organize subsequent method execution. Event who listens first and who executes first.
.removeEventListener
DOM object removeEventListener("event type", the execution function of the listening event to be deleted);
Difference of events
Event type
onclick, addEventListener attachEvent ,removeEventListener detachEvent
document.onclick=function(){
// Delete event
document.onclick=null;
}
document.addEventListener("click",clickHandler);
document.attachEvent("onclick",clickHandler);
function clickHandler(){
document.removeEventListener("click",clickHandler);
document.detachEvent("onclick",clickHandler);
}
The function of the event in the tag must be written as an execution function
1. onclick will cause callback hell
2.addEvenListener allows capture phase triggering, but onclick does not allow capture phase triggering
3.onclick only allows the function of the last assignment to be executed, and events can only execute one function independently. addEventListenter can execute multiple functions
4.addEventListener supports listening and throwing custom events. on has no custom event listening
5.on supports all browsers, and addEventListener supports ie8 or above
6. The on code is simple to write and easy to understand programming. addEventListener is suitable for functional programming
------Case
var n=1;
div1.addEventListener("click",clickHandler1);
div1.addEventListener("click",clickHandler2);
div1.addEventListener("click",clickHandler3);
function clickHandler1(e){
console.log("a")
div1.removeEventListener("click",clickHandler1)
}
function clickHandler2(e){
console.log("b")
if(n===2){
div1.removeEventListener("click",clickHandler2)
}
}
function clickHandler3(e){
n++;
console.log("c")
}
Case - sequential execution click event
var bn1=document.querySelector("#bn1")
var bn2=document.querySelector("#bn2")
var bn3=document.querySelector("#bn3")
bn1.addEventListener("click",clickHandler);
function clickHandler(e){
if(this===bn1){
bn2.removeEventListener("click",clickHandler);
bn2.addEventListener("click",clickHandler);
}else if(this===bn2){
bn3.removeEventListener("click",clickHandler);
bn3.addEventListener("click",clickHandler);
}else{
console.log("aaa")
}
}
bn.addEventListener('click',clickHandler,true);
Event event
change
Mainly for forms. When a form or form element changes, this event is triggered after out of focus
All forms must write name, and checkbox es and radio s must write value
You can listen for the form and its elements
error
error
load
Load complete
var img=document.createElement("img");
//Create Img tag
var img=new Image();
img.src="./img/1.jpg";
document.body.appendChild(img);
img.addEventListener("load",loadHandler);
img.addEventListener("error",errorHandler)
// console.log(img.width);//1. It must be placed in the body. 2. It must have width and height
function loadHandler(e){
console.log(this.width);
}
function errorHandler(e){
console.log(e)
}
Note: the preconditions for obtaining offsetwidth, clientwidth and scrollwidth: 1. Must be placed in the body; 2. Must have width and height
Case - preload picture
var n=2;
var arr=[];
function loadImage(){
var img=new Image();
img.addEventListener("load",loadHandler);
img.src="./img/"+n+".jpg";
}
function loadHandler(e){
this.removeEventListener("load",loadHandler)
arr.push(this);
n++;
if(n>6){
loadFinishHandler();
return;
}
loadImage();
}
function loadFinishHandler(){
arr.forEach(function(item){
console.log(item.src)
})
}
loadImage();
reset - for forms
Reset listen reset form event
submit - for the form
Submit listen to submit form events
var form=document.querySelector("form");
form.addEventListener("submit",submitHandler);
form.addEventListener("reset",submitHandler);
function submitHandler(e){
e.preventDefault();
console.log(e)
}
resize - for window s
When the resized window changes,
Case - the picture changes according to the window size
window.addEventListener("resize",resizeHandler);
function resizeHandler(e){
document.documentElement.style.fontSize=document.documentElement.clientWidth/screen.width*100+"px";
}
select
Select to use for the input text box or textarea text field. Triggered when the text is selected
var input=document.querySelector("input");
input.addEventListener("select",selectHandler);
function selectHandler(e){
console.log(e)
}
scroll
Scroll bar triggered when the scroll bar scrolls. Any with a scroll bar can be triggered. Only document or window can be used for window