2020.11.18第十三章 事件（事件处理程序；事件对象；事件类型：UI事件；焦点事件；鼠标与键盘事件 变动事件 模拟事件）

事件处理程序

html事件处理程序（直接在html中书写script）

 <!-- //#### 事件处理程序 //html时间程序 可以直接在HTML文件中写,而且还可以引用其他地方的方法和函数 -->
    <input type="text" name="account">

    <button value="echo Username" onclick="alert(account.value)">查看内容</button>
    <!-- /*HTML事件程序可以直接调用HTML中的属性如这里的username.value就是输入框username的值 -->

可以直接调用html中的属性不需要捕捉节点
HTML事件处理程序的缺点:需要同时修改HTML文件和JAVAscript文件
//
/
/
//

DOM0级事件处理程序

 //**DOm0级事件处理程序(普通方法)**
        var btns = document.querySelectorAll('button');
        btns[2].onclick = function() {
                alert(this.name); //可以访问事件对象btns[2]的属性

            }
            //删除事件
        btns[2].onclick = null; //点击按钮好无反应了

DOM2级事件处理程序（监听器）

 //DOM2级处理时程序(监听器)
        btns[3].addEventListener("click", function() {
            alert(this.id); //!!!!!注意 : click后面前面都不能有空格
        }, false);
        btns[3].addEventListener("click", function() {
                alert(this.name);
            }, false)
            //DOM2级处理程序的好处是可以设置事件流,true为捕获事件流,false为冒泡事件流,还可以添加多个事件给同一个节点,
            //注意第一个接受的参数click没有on
            //多个处理程序按添加的顺序触发

删除事件：

//删除事件
        //dom2级事件处理程序只能用removeEvenListner()删除
        // removeEventListener("事件",函数名,true or false);删除的三个参数必须跟addeventlistner完全一样  ,其中函数不能用匿名函数funcion(),必须要用函数表达式funtion fn();
        function fn() {
            alert("删除监听程序");
        }
        btns[4].addEventListener("click", fn, false);

        btns[4].removeEventListener("click", fn, false);

事件对象

event.type的应用

//事件对象
        //event对象,每个事件都有一个event对象,event.type就是事件的类型


        //通过event.type属性可以使一个函数控制多个事件
        var div = document.querySelector('div');
        var handler = function(event) {
            switch (event.type) {
                case "click":

                    alert('clicked');
                    break;
                case "mouseover":
                    event.target.style.backgroundColor = "red";
                    break;
                case "mouseout":
                    event.target.style.backgroundColor = " white";
                    break;

            }
        }
        div.onclick = handler;
        div.onmouseover = handler;
        div.onmouseout = handler;

阻止事件的发生（阻止链接生效 阻止事件 阻止事件冒泡捕捉）

 // event.preventDefault(); //阻止链接或者什么事件的发生
        var link = document.querySelector('a');
        console.log(link);
        link.onclick = function(event) {
                event.preventDefault();
            }
            //阻止点击div显示clicked

        div.onclick = function(event) {
                event.preventDefault();
            }
            //阻止事件流向上或向下传播
            // event.stopImmediatePropagation();不会冒泡事件和捕获时间了

//
/
/
/

事件类型

UI事件 不一定与用户操作相关的事件

 //页面加载
        window.onload = function() {
                alert('loaded');
            }
            //图片加载
        var Image = document.querySelector('#img');
        Image.addEventListener("load", function(event) {

            alert('picture has loaded');
        });
        //onunload事件
        window.onunload = function() {
            alert('页面已销毁');
        };

        //resize事件   当调整页面宽度和高度时触发
        window.addEventListener("resize", function() {
            alert('resized');
        });
        scroll事件   滚动页面时触发
         window.onscroll = function() {

          console.log(document.documentElement.scrollTop);//反应垂直方向的滚动位置
        }

焦点事件（常用于文本框）；

不需用药flag了

 var focu = document.querySelector('#focus');
        focu.onfocus = function(event) {
            focu.value = " ";
        };
        focu.onblur = function() {
            focu.value = "请输入用户名";
        }

鼠标与滚动事件

click点击时触发 当 mousedown 或 mouseup被取消是就不会触发click

mousedown 按下任意鼠标时触发

mouseup 用户释放鼠标按钮时触发

dblclick事件双击鼠标时触发

mouseenter 鼠标移入某个元素时触发

mouseout 鼠标移出某个元素时触发

mouseover 当鼠标（首次）从外部移到元素内部时触发

onmouseover 当鼠标指针在元素内部移动时（重复的）触发

    **
    //event.offsetX/ offsetY   鼠标到目标元素边界的距离
       //offsetLeft  offsetRight  子元素相对于父元素的距离
    //offsetWidth   元素的宽度属性   offsetHeight  元素的高度属性
    //客户区坐标位置  clientX，clientY相对于浏览器的坐标，不包括滚动的距离
    //页面坐标位置    pageX , pageY相对于整个浏览器页面的坐标
    //屏幕坐标位置    screenX,screenY相对于整个屏幕而言的坐标   浏览器缩小后坐标也不会变**

修改键得到 是否在执行某个事件时同时按下了某些键

    //shiftkey,ctrlkey,altkey,metakey

相关元素 mouseover 和 mouseout 都有相关元素 通过 event.relatedTarget属性可以查看相关属性（某些浏览器不可用）

    //chore可以 在 mouseover中用  event.fromElement     mouseout中用event.toElement
    var relate = document.querySelector('.relate');
    relate.onmouseover = function(event) {
        console.log(event.fromElement);
    }

event.button属性

event.button = 0左键
event.button = 1中间滚轮键
event.button =2右键

 // 鼠标按钮  event.button
        //mousedown 和 mouseup事件  对象中有一个button属性
        //在高级版本浏览器中 button==0表示左键   button ==1 表示滚轮键   button == 2表示右键
        //低级版本分为了七类
        var mousebutton = document.querySelector('.mousebutton');
        mousebutton.onmousedown = function() {
            console.log(event.button);
        }
        mousebutton.onmouseup = function() {
            console.log(event.button); //表示放下的鼠标键是哪个
        }

event.detail 反映的是点击的次数

鼠标滚轮事件

 document.onmousewheel = function() {
            console.log('鼠标滚动了' + event.wheelDelta + event.detail); //event.wheelDelta可以返回出移动的距离每次150
        }

/
/
/
/

键盘与文本事件

键盘与文本事件 常用于输入文本框时

//触发顺序：keydown（按下任意按键都会触发）>keypress(按下字符键如 abc等才会触发)>keyup(松开键时触发)

        
        var textandkeyboard = document.querySelector('#textandkeyboard');
        //每个keyup都会触发keyCode属性   event.keyCode返回输入键的阿斯卡码(低版本浏览器) 注意keycode只返回小写字母不分大小写  
        textandkeyboard.addEventListener('keyup', function() {
            console.log(event.keyCode);
        });

        //一些高版本浏览器中当触发了onkeypress时按下的 键就保存在charCode中 高版本浏览器中charCode属性保存了ASCII码
        textandkeyboard.addEventListener('keypress', function() {
            console.log(event.charCode);
        }); //给同一个节点用两个事件时先触发后一个事件


       

textInput事件 只能用DOM3事件处理程序(适用于高版本浏览器)

//textinput 和 keypress的区别：1.只有在可编辑区域可以写入得地方才能触发textInput，而keypress可以再任何节点触发2.textInput只有在输入有实际符号的值时才会触发，
//而keypress只要是对文本有影响的值就会触发例如 delete键

   
        var text = document.querySelector('#textInput');
        text.addEventListener('textInput', function(event) {
            alert(event.data); //event.data中储存了输入的字符不是阿斯卡码
            console.log(event.inputMethod); //只有IE浏览器支持

        });
        //textinput中的属性  inputMethod表示文本输入到文本框中的方式    当inputmethod值为 0：表示浏览器不知道怎么入数的  1：表示用键盘输入的 2：表示文本是粘贴进来的 3：表示文本数拖进来的等等

变动事件

删除节点

// 在使用removeChild() 或replaceChild() 从DOM中删除节点时 首先会触发DOMNoderRemoved() 事件这个事件会冒泡在页面上任意节点都会收到

 // 1. 删除节点
       
        var variation = document.querySelector('#variation');
        var deletes = document.querySelector('#delete');
        var body = document.querySelector('body');
        //必须要设置删除节点的操作而不是直接删除
        deletes.onclick = function() {
            body.removeChild(variation);
        }
        variation.addEventListener('DOMNodeRemoved', function() {
            alert('触发了DOMNodeRemoved事件');
        });
        // 第二个触发的事件是DOMNodeRemovedFromDocument 目标是被删除的节点和每一个子节点

        variation.addEventListener('DOMNodeRemovedFromDocument', function() {
            alert('触发了DOMNodeRemovedFromDocument');
        });
        //最后触发的是在document.body触发的DOMSubtreeModified事件

添加节点

//在使用appendChild replaceChild insertBefore()向DOM中插入节点时，首先会触发DOMNodeinserted事件 目标是被插入（被新节点插入）的节点 事件冒泡

//#### 插入节点
        
        var insert = document.querySelector("#insert");
        var lis = document.createElement('li');
        insert.addEventListener('click', function() {
            variation.appendChild(lis);

        });
        variation.addEventListener(
            'DOMNodeInserted', //注意大小写啊！！
            function() {
                alert('触发了DOMNodeinserted事件');
            });
        //第二 会触发DOMNodeInsertedIntoDocument事件   目标是被插入的节点（新插入的那个节点）事件不会冒泡
        lis.addEventListener(
            'DOMNodeInsertedIntoDocument', //注意大小写啊！！
            function() {
                alert('触发了DOMNodeInsertedIntoDocument事件');
            });
        //最后是DOMSubtreeModified 事件   触发于新插入节点的父节点
        variation.addEventListener(
            'DOMSubtreeModified',
            function() {
                alert('触发了DOMSubtreeModified事件');
            }
        );

html5事件

contextmenu事件：右键点击出菜单栏事件

//contextmenu事件   设置自定义上下文菜单  contextmenu事件处理程序只能用监听器模式
        var box = document.querySelector('.box');
        var menu = document.querySelector('.menu');

        box.addEventListener('contextmenu', function() {
            event.preventDefault();//使系统自带的菜单栏不能出现
            menu.style.left = event.clientX + "px";
            menu.style.top = event.clientY + "px";
            menu.style.visibility = 'visible';
        });
        window.onclick = function() {
            menu.style.visibility = 'hidden'; 
        }

beforeunload事件：在退出页面时触发

//beforeunload事件
        window.addEventListener('beforeunload', function() {
            event.returnValue = '请确认是否退出该页面';
            return event.returnValue; //必须将提示的event.returnValue返回
        });

DOMContentLoaded事件 在 load前面触发

//DOMContentLoaded事件  该事件会在load前  触发，不理会图像JavaScript文件 CSS文件是否下载完毕    可以使用户更早的实现交互  该事件冒泡实际对象是document
        document.addEventListener('DOMContentLoaded', function() {
            alert('DOM树已经加载完毕 但图像和javascript文件还没加载');
        });

模拟事件

模拟鼠标点击事件

createEllement（）；

  var box = document.querySelector('.box');
        box.onclick = function() {
                box.style.backgroundColor = "red"; //设置属性颜色的方法
            }
            //模拟鼠标点击事件
        var event = document.createEvent("MouseEvent");
        event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //设置鼠标点击类型前面四个参数是最基本的参数
        box.dispatchEvent(event); //最后必须通过dispatchEvent(event)触发

        //模拟键盘事件