JS event flow, DOM event flow, IE event processing, cross browser event processing, event object and type

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>

Tags: Javascript IE Mobile Google Firefox

Posted on Sat, 08 Feb 2020 08:46:01 -0500 by Chef-Mars