Event listening and deleting events - event object - default event - cancel bubbling event - event delegation - default trigger

Event listening and deleting events

DOM0 level ：

• The same event of a tag can only be bound to one event function
• Events can be added directly in the line
• All major browsers support , There is no compatibility issue

DOM2 level

• The same event of a tag can be bound to multiple event functions

event object

function	function
pageX	The horizontal position of the cursor relative to the web page
pageY	The vertical position of the cursor relative to the web page
screenX	The horizontal position of the cursor relative to the screen
screenY	The vertical position of the cursor relative to the screen
clientX	The horizontal position of the cursor relative to the web page （ Current visible area ）
clientY	The vertical position of the cursor relative to the web page （ Current visible area ）

Default event

Range	Method
DOM in ：	event.preventDefault() Blocking default behavior
IE in :	event.returnValue=false Return value =false

Cancel bubbling

project	Value
In standard browser DOM in :	event.stopPropagation() Stop spreading
IE8 And the following ：	event.cancelBubble=true Cancel the bubbling

Now it's usually ：e.stopImmediatePropagation();// Prevent the execution of subsequent functions of the same event type

var div1 =document.querySelector('.div1')
var div2 =document.querySelector('.div2')
var div3 =document.querySelector('.div3')
div1.addEventListener('click',clickHandler1)
div2.addEventListener('click',clickHandler2)
div3.addEventListener('click',clickHandler3,{
    once:true,capture:true})


function clickHandler1(e){
    
   e.stopPropagation();// To prevent a bubble 
   console.log('div1');
} 
function clickHandler2(e){
    
   e.stopPropagation();// To prevent a bubble 

   console.log('div2');
   // e.stopImmediatePropagation();// Prevent the execution of subsequent functions of the same event type 
} 
function clickHandler3(e){
    
   e.stopPropagation();
   console.log('div3');
}  

Event delegation

• Delegate the listening event of the child element to the parent element for listening , such , Events triggered by all child elements
• Will pass bubbles to the parent element , Reduced memory overhead
  So how to confirm which one is clicked to trigger the event ：

e.target e.srcElement(IE8) Finally, click on the target element e.currentTarget this Object elements that listen for events

console.log("div1",e.target,e.currentTarget,e.srcElement,this);

Default trigger

Event name	function
change event	Mainly for forms and form elements , The form element trigger event will bubble to form After modification, out of focus trigger

<form action="">
	<input type="text">
	<input type="checkbox">
	<textarea name="" id="" cols="30" rows="10"></textarea>
	<button type="reset"> Reset </button>
</form>
<div></div>
<script>

	var input=document.querySelector("[type=text]");
	var checkbox=document.querySelector("[type=checkbox]");
	var form =document.querySelector("form");
	
	input.addEventListener("change",changeHandler);
	checkbox.addEventListener("change",changeHandler);
	form.addEventListener("change",changeHandler);
	
	function changeHandler(e){
    
	    console.log(e)
	}
</script>	

Event name	function
submit	Submit Form
reset	Reset form
above	All aimed at form Events of the form
e.preventDefault();	Prevent default Events （ Reset / Submit ）

var form=document.querySelector("form");
// form.addEventListener("submit",submitHandler);
form.addEventListener("reset",submitHandler);
function submitHandler(e){
    
   // e.preventDefault(); 
   console.log(e);
}

Event name	function
resize event	Mainly aimed at window, instead of textarea
Trigger	An event is triggered when the window is zoomed

function resizeHandler(e){
    
// console.log(e)
//  Screen width screen.width
//  Window width  outerWidth 
//  Window width / Screen width *100( original 100% Width fontSize Size )
//  The window shrinks , The proportion will be reduced , Reset the text size according to the scale 
document.documentElement.style.fontSize=outerWidth/screen.width*100+"px"
}

Event name	function
select	Selected events
Trigger	Triggered when the text content entered in the text box is selected

var input=document.querySelector("[type=text]");
input.addEventListener("select",selectHandler);

function selectHandler(e){
    
	console.log(input.selectionStart);// Get the starting subscript of the character in the selected text box 
	console.log(input.selectionEnd);// Get the ending subscript of the character in the selected text box 
}

Event name	function
scroll	The event is triggered when the scroll bar scrolls

window.addEventListener("scroll",scrollHandler);
function scrollHandler(e){
    
	console.log(document.documentElement.scrollTop)
}

error error	load load
window load DOM The tree is rendered	load Events trigger
ajax Communication loading When the communication load is completed	load Events trigger
Loading pictures 、js、css、 video ,	Trigger after loading
When loading fails	Trigger error event

The incident was distributed

In the event this