Removal of events
removeEventListener()
The second parameter needs to specify the event handle to be removed. It cannot be an anonymous function because it is not recognized
To remove successfully, the three parameters must be exactly the same as those in addEventListener
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var btn1 = document.querySelector("#btn1"); function click1(){ alert("hello1~"); } btn1.addEventListener("click", click1, false); //Remove bound events btn1.removeEventListener("click", click1, false); }); </script> </head> <body> <button id="btn1">Button 1</button> </body> </html>
IE event stream
attachEvent(event, function) event starts with on
Browser compatibility mainly refers to the compatibility of IE browser, especially the lower version of IE (IE6-8)
IE does not support event capture. It is bubbling by default, so there is no third parameter
detachEvent() remove event
DOM0 compatible with all browsers
Level DOM2
addEventListener is mainly compatible with Google, Firefox and IE9+
attachEvent is mainly compatible with IE6-8
attachEvent can be bound to multiple event types, and the latter is executed first
There is also a very contrary point of knowledge to add that this in anonymous function points to window
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var btn1 = document.querySelector("#btn1"); function click1(){ alert("hello1~"); } function click2(){ alert("hello2~"); } btn1.attachEvent("onclick", click1); btn1.attachEvent("onclick", click2); //First pop-up hello2，Pop up again hello1 //Remove bound events btn1.detachEvent("onclick", click1); //Unbind hello1，Only pop-up hello2 //this point window btn1.attachEvent("onclick", function(){ alert(this===window);//true }); }); </script> </head> <body> <button id="btn1">Button 1</button> </body> </html>
Cross browser event handling
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } } } var btn1=document.getElementById("btn1"); var click=function(){ alert("I was clicked!"); } EventUtil.addHandler(btn1, "click", click); EventUtil.removeHandler(btn1, "click", click); }); </script> </head> <body> <button id="btn1">Button 1</button> </body> </html>
Event bubble and event capture
Lineal tree
Event bubbling: when the click event of an element is triggered, the element on its immediate family tree will be triggered (from bottom to top) as long as the event is added due to bubbling
Event capture: when the click event of an element is triggered, the element on its immediate family tree will be triggered (from top to bottom) as long as the event is added due to capture
In most cases, event bubbling is used
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var parent=document.getElementById("parent"); var child=document.getElementById("child"); //Event bubbling child，Reappear parent parent.addEventListener("click", function(){ alert("parent"); }); child.addEventListener("click", function(){ alert("child"); }); //Event capture, first parent，Reappear child // parent.addEventListener("click", function(){ // alert("parent"); // }, true); // child.addEventListener("click", function(){ // alert("child"); // }, true); }); </script> </head> <body> <div id="parent"> <div id="child">click child</div> </div> </body> </html>
Using event bubbling mechanism to realize event delegation
Event binding consumes performance, and event delegation is a great choice
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var ul=document.getElementById("ul"); // father ul Binding events // son li No event // Pawn element( li)When clicked, all elements in the child element's immediate family tree are bound to the event( ul)Will be triggered ul.addEventListener("click", function(event){ // event,target You can get the clicked element console.log(event.target.innerHTML); if(event.target.id==="li1"){ alert("It's 1 oh."); }else if(event.target.id==="li2"){ alert("It's 2 oh."); }else if(event.target.id==="li3"){ alert("It's 3 oh."); }else if(event.target.id==="li4"){ alert("It's 4 oh."); } }); }); </script> </head> <body> <ul id="ul"> <li id="li1">li1</li> <li id="li2">li2</li> <li id="li3">li3</li> <li id="li4">li4</li> </ul> </body> </html>
The javascript standard event model developed by w3c, first event capture from windows > document to specific event nodes, then event processing, then event bubbling, from specific nodes to higher level, this complete process.
Event capture - > Event Processing - > event bubbling
Common properties and methods of event object
Parameter event object of event handle
event.type event type
event.target clicked element
event.currentTarget the element of the bound event
event.preventDefault() prevents default behavior
event.stopPropagation() prevents event capture or bubbling and needs to be added to child elements
The position from the top and bottom of the client browser to the mouse
Page Y: the position of the bottom edge of the browser to the mouse + the distance of page scrolling
Screen from the top of the screen to the mouse position (if the browser zooms out, screen is still calculated based on the computer screen, regardless of the browser)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } #scroll{ height:1000px; background:#abcdef; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var ul=document.getElementById("ul"); ul.addEventListener("click", function(event){ console.log(event.type);//click console.log(event.target);//<li id="li3">li3</li> console.log(event.currentTarget); /* <ul id="ul"> <li id="li1">li1</li> <li id="li2">li2</li> <li id="li3">li3</li> <li id="li4">li4</li> </ul> */ alert(event.target.innerHTML); }); var a=document.getElementById("a"); a.addEventListener("click", function(event){ event.preventDefault();//Stopped a Jump of link alert("hello"); }) //Prevent child element from bubbling to parent element when executing var parent=document.getElementById("parent"); var child=document.getElementById("child"); parent.addEventListener("click", function(event){ alert("parent"); event.stopPropagation(); }); child.addEventListener("click", function(event){ alert("child"); event.stopPropagation(); }); var scroll=document.getElementById("scroll"); scroll.addEventListener("click", function(event){ console.log(event.pageY);//813 console.log(event.clientY);//480 console.log(event.screenY);//535 }) }); </script> </head> <body> <ul id="ul"> <li id="li1">li1</li> <li id="li2">li2</li> <li id="li3">li3</li> <li id="li4">li4</li> </ul> <a id="a" href="http://www.baidu.com">Click link</a> <div id="parent"> <div id="child">This is my son.</div> </div> <div id="scroll">This is the scroll area</div> </body> </html>
event object in IE (attachEvent)
event.type event type
event.returnValue=false; block default behavior
event.cancelBubble=true; prevent bubbling and need to be added to child elements
event.srcElement clicked element
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } #scroll{ height:1000px; background:#abcdef; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var ul=document.getElementById("ul"); ul.attachEvent("onclick", function(event){ alert(event.type);//click alert(event.srcElement.innerHTML);//click li1，Eject li1 }); var a=document.getElementById("a"); a.attachEvent("onclick", function(event){ //Block default behavior event.returnValue=false; alert("hello"); }); //Prevent the child element from bubbling to the parent element when it is executed. It needs to be added to the child element var parent=document.getElementById("parent"); var child=document.getElementById("child"); parent.attachEvent("onclick", function(event){ alert("parent"); }); child.attachEvent("onclick", function(event){ alert("child"); event.cancelBubble=true; }); }); </script> </head> <body> <ul id="ul"> <li id="li1">li1</li> <li id="li2">li2</li> <li id="li3">li3</li> <li id="li4">li4</li> </ul> <a id="a" href="http://www.baidu.com">Click link</a> <div id="parent"> <div id="child">This is my son.</div> </div> </body> </html>
Cross browser compatibility of Event
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } #scroll{ height:1000px; background:#abcdef; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } } var a=document.getElementById("a"); EventUtil.addHandler(a, "click", function(event){ alert("hello"); EventUtil.mypreventDefault(event);//Block default behavior }); var parent=document.getElementById("parent"); EventUtil.addHandler(parent, "click", function(event){ alert("parent"); }); var child=document.getElementById("child"); EventUtil.addHandler(child, "click", function(event){ var target=EventUtil.mycurrentTarget(event); alert(target.id);//<div id="child">This is my son.</div> EventUtil.mystopPropagation(event);//Prevent bubbling to parent }) }); </script> </head> <body> <ul id="ul"> <li id="li1">li1</li> <li id="li2">li2</li> <li id="li3">li3</li> <li id="li4">li4</li> </ul> <a id="a" href="http://www.baidu.com">Click link</a> <div id="parent"> <div id="child">This is my son.</div> </div> </body> </html>
UI event load
load event of window
img load event
script's load event
load event of css
window's unload event: the user switches from one page to another
resize event window size of window
scroll event of window
Because resize and scroll are executed repeatedly, performance is especially lost
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:2000px; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } } // window Of load Event EventUtil.addHandler(window, "load", function(){ //alert("window Of load Event!"); }); //img Image loading completed var img=document.createElement("img"); EventUtil.addHandler(img, "load", function(){ //alert("img Image loading completed!"); }); img.src="source/cat.jpg"; //img Picture preload (in memory) var img=new Image(); EventUtil.addHandler(img, "load", function(){ //alert("img Image pre loading completed!"); }); img.src="source/cat.jpg"; //Dynamic loading js var script=document.createElement("script"); EventUtil.addHandler(script, "load", function(){ //alert("js Loading finished!"); }); script.src="jquery.js"; //document.body.appendChild(script); //Dynamic loading css var link=document.createElement("link"); link.type="text/css"; link.rel="stylesheet"; EventUtil.addHandler(link, "load", function(){ //alert("css Loading finished!"); }); link.href="style.css"; //document.getElementsByTagName[0].appendChild(link); //window unload EventUtil.addHandler(window, "unload", function(){ //alert("unload!"); }); //window resize EventUtil.addHandler(window, "resize", function(){ //alert("resize"); }); //window scroll EventUtil.addHandler(window, "scroll", function(){ //alert("scroll"); }); }); </script> </head> <body> </body> </html>
Focus events
On focus
onblur loses focus
Mouse event
onclick mouse click
Ondbllick double click
onmousedown mouse down
onmousemove mouse in target area (repeated execution affects performance)
onmouseup mouse release
mousedown+mouseup=click
onmouseover mouse move in (enter element or child element of element)
onmouseout mouse move out (move out elements or children of elements)
Onmousenter mouse in (into the element itself)
OnMouseMove mouse out (move element itself out)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; } #div{ width:200px; height:200px; margin:50px auto; background:#abcdef; position: relative; } #child{ width:80px; height:80px; background:pink; font-size:14px; position: absolute; left:50%; top:50%; margin-left:-40px; margin-top:-40px; line-height:80px; text-align: center; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } } //Focus of attention var inout=document.getElementById("text"); EventUtil.addHandler(inout, "focus", function(){ //console.log("Focus of attention"); }); //Lose focus var inout=document.getElementById("text"); EventUtil.addHandler(inout, "blur", function(){ //console.log("Lose focus"); }); //Mouse click var div=document.getElementById("div"); EventUtil.addHandler(div, "click", function(){ //console.log("Mouse click"); }); //Mouse double click var div=document.getElementById("div"); EventUtil.addHandler(div, "dblclick", function(){ //console.log("Mouse double click"); }); //Mouse down var div=document.getElementById("div"); EventUtil.addHandler(div, "mousedown", function(){ //console.log("Mouse down"); }); //Mouse loose var div=document.getElementById("div"); EventUtil.addHandler(div, "mouseup", function(){ //console.log("Mouse loose"); }); //Mouse movement var div=document.getElementById("div"); EventUtil.addHandler(div, "mousemove", function(){ //console.log("Mouse movement"); }); //Mouse entry var div=document.getElementById("div"); EventUtil.addHandler(div, "mouseover", function(){ console.log("mouseover Mouse entry"); }); //Mouse away var div=document.getElementById("div"); EventUtil.addHandler(div, "mouseout", function(){ console.log("mouseout Mouse away"); }); //Mouse entry var div=document.getElementById("div"); EventUtil.addHandler(div, "mouseenter", function(){ console.log("mouseenter Mouse entry"); }); //Mouse away var div=document.getElementById("div"); EventUtil.addHandler(div, "mouseleave", function(){ console.log("mouseleave Mouse away"); }); }); </script> </head> <body> <input type="text" id="text" value="text"> <div id="div"> <div id="child">This is a child element</div> </div> </body> </html>
event.shiftKey shift + Click
Event.ctrl key Ctrl + Click
event.altKey alt + Click
event.metaKey meta + Click
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; } #box{ width:200px; height:200px; margin:50px auto; background:#abcdef; position: relative; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } } var box=document.getElementById("box"); EventUtil.addHandler(box, "click", function(e){ var keys=[]; if(e.shiftKey){ keys.push("shift"); } if(e.ctrlKey){ keys.push("ctrl"); } if(e.altKey){ keys.push("alt"); } if(e.metaKey){ keys.push("meta"); } console.log(keys.join(","));//Array to string }); }); </script> </head> <body> <div id="box"></div> </body> </html>
For mousedown, there is an event.button
Advanced browser:
event.button=0 left mouse button
event.button=1 middle mouse button
event.button=2 right mouse button
IE8 and below:
event.button=0 mouse not pressed
event.button=1 press the left key
event.button=2 right click
event.button=3 press left and right at the same time
event.button=4 press middle key
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; } #box{ width:200px; height:200px; margin:50px auto; background:#abcdef; position: relative; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } } var box=document.getElementById("box"); EventUtil.addHandler(box, "mousedown", function(e){ console.log(e.button); }); }); </script> </head> <body> <div id="box"></div> </body> </html>
Keyboard events
keydown press any key keyup release key event.keyCode (obtained through keydown)
Keypress press the character key charCode ascii (obtained through keypress)
textInput textinput the text entered by data
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; } #box{ width:200px; height:200px; margin:50px auto; background:#abcdef; position: relative; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }, getCharCode:function(event){ if(typeof event.charCode == "number"){ return event.charCode; }else{ return event.keyCode; } } } var input=document.getElementById("input"); EventUtil.addHandler(input, "keydown", function(e){ //console.log(e.keyCode+"keydown"); }); EventUtil.addHandler(input, "keyup", function(e){ //console.log(e.keyCode+"keyup"); }); EventUtil.addHandler(input, "keypress", function(e){ //console.log(e.charCode+"keypress"); }); EventUtil.addHandler(input, "textInput", function(e){ console.log(e.data+"textInput"); }); }); </script> </head> <body> <input type="text" id="input"> </body> </html>
DOM related events
DOMNodeRemoved an element in DOM is deleted
DOMNodeRemovedFromDocument is triggered before it is deleted from the document (event handle must be added to the element to be operated, browser support is poor, not recommended)
DOMNodeInserted an element in DOM is added
DOMNodeInsertedIntoDocument is triggered before it is added from the document (event handle must be added to the element being operated, browser support is poor, not recommended)
DOMSubtreeModified DOM structure changed
DOMContentLoaded DOM tree can be loaded
The loaded DOM tree is loaded, and other resources such as image + js+css are also loaded
So DOMContentLoaded is faster than loaded
The value after hashchange ා changes and can only be bound to the window object
event.oldURL original url
event.newURL new url
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; } #box{ width:200px; height:200px; margin:50px auto; background:#abcdef; position: relative; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }, getCharCode:function(event){ if(typeof event.charCode == "number"){ return event.charCode; }else{ return event.keyCode; } } } var ul=document.getElementById("ul"); //DOM An element in is deleted EventUtil.addHandler(document, "DOMNodeRemoved", function(e){ //console.log("removed");//removed }); //ul.removeChild(ul.children[3]); //DOM An element in is added var li=document.createElement("li"); EventUtil.addHandler(document, "DOMNodeInserted", function(e){ //console.log("inserted");//inserted }); //ul.appendChild(li); //DOM Triggered before the structure is removed from the document //addHandler The deleted element is filled in var li=ul.children[3]; EventUtil.addHandler(li, "DOMNodeRemovedFromDocument", function(e){ //console.log("DOM Triggered before the structure is removed from the document");//Triggered before DOM structure is removed from the document }); //ul.removeChild(li); //DOM Triggered before the structure is added from the document //addHandler The element to be added is filled in var li=document.createElement("li"); EventUtil.addHandler(li, "DOMNodeInsertedIntoDocument", function(e){ //console.log("DOM Triggered before the structure is added from the document");//Trigger before DOM structure is added from the document }); //ul.appendChild(li); //DOM Structural change EventUtil.addHandler(document, "DOMSubtreeModified", function(e){ //console.log("DOM Structural change");//DOM structure changes }); //ul.removeChild(ul.children[3]);//4 deleted //DOM Structural change EventUtil.addHandler(document, "DOMSubtreeModified", function(e){ //console.log("DOM Structural change");//DOM structure changes }); //ul.removeChild(ul.children[3]);//4 deleted //DOM Tree loading EventUtil.addHandler(document, "DOMContentLoaded", function(e){ //console.log("DOM Tree loading");//DOM structure changes }); //hash Value change EventUtil.addHandler(window, "hashchange", function(e){ console.log(e.oldURL + "\n" + e.newURL);//DOM Structural change //file:///C:/Users/96579/Desktop/index.html#11 //file:///C:/Users/96579/Desktop/index.html# }); }); </script> </head> <body> <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>
Common event types of mobile terminal
Touch start touch screen
touchmove fingers move on the screen
touchend finger off screen
Triggered when the touchcancel system stops touch tracking
First, add the mobile terminal adaptation settings on the head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
event object of touch
event.touches the number of touch points on the screen
event.changedTouches number of touch points moved on the screen
event.targetTouches the number of touchpoints in the target area
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ width:100%; } #div{ width:100px; height:100px; background:#abcdef; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }, getCharCode:function(event){ if(typeof event.charCode == "number"){ return event.charCode; }else{ return event.keyCode; } } } var div=document.getElementById("div"); EventUtil.addHandler(div, "touchstart", function(e){ console.log("touchstart"); console.log(e.touches); console.log(e.changedTouches); console.log(e.targetTouches); }); EventUtil.addHandler(div, "touchmove", function(e){ console.log("touchmove"); }); EventUtil.addHandler(div, "touchend", function(e){ console.log("touchend"); }); }); </script> </head> <body> <div id="div"></div> </body> </html>
A small case:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ width:100%; } #div{ width:400px; height:400px; border:1px solid; margin:50px; } #ul{ list-style: none; } #ul li{ width:100px; height:30px; line-height:30px; text-align: center; border-radius:5px; display: inline-block; cursor:pointer; } #ul li:hover{ color:#fff; } #ul li:first-child{ background:pink; } #ul li:nth-child(2){ background:#abcdef; } #ul li:nth-child(3){ background:lightgreen; } #ul li:last-child{ background:orange; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var EventUtil={ addHandler:function(ele, type, handler){ if(ele.addEventListener){ ele.addEventListener(type, handler, false); }else if(ele.attachEvent){ ele.attachEvent("on"+type, handler); }else{ ele["on"+type]=handler; } }, removeHandler:function(ele, type, handler){ if(ele.removeEventListener){ ele.removeEventListener(type, handler, false); }else if(ele.detachEvent){ ele.detachEvent("on"+type, handler); }else{ ele["on"+type]=null; } }, mycurrentTarget:function(event){ return event.Target || event.srcElement; }, mypreventDefault:function(event){ if(event.preventDefault()){ event.preventDefault(); }else{ event.returnValue=false; } }, mystopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }, getCharCode:function(event){ if(typeof event.charCode == "number"){ return event.charCode; }else{ return event.keyCode; } } } var ul=document.getElementById("ul"); var div=document.getElementById("div"); EventUtil.addHandler(ul, "click", function(event){ var e=event.target;//cache if(e.innerHTML=="Fairy powder"){ div.style.background="pink"; }else if(e.innerHTML=="Temperament blue"){ div.style.background="#abcdef"; }else if(e.innerHTML=="Peppermint Green"){ div.style.background="lightgreen"; }else if(e.innerHTML=="Vitality orange"){ div.style.background="orange"; } }); }); </script> </head> <body> <div id="div"></div> <ul id="ul"> <li>Fairy powder</li> <li>Temperament blue</li> <li>Peppermint Green</li> <li>Vitality orange</li> </ul> </body> </html>
