事件对象的理解

定义：举例：鼠标移动是事件，而鼠标移动有位置，对应的坐标就是事件对象；键盘输入是事件，而键盘输入的字母数字等就是键盘输入的对象，也就是事件对象。

元素节点.事件名称= function(事件){}，事件一般用e来表示。

鼠标移动的事件对象是鼠标的位置

    <div id=" box"></div>
    <p id="para"></p>
    <script>
           var box =document.getElementById(" box");
        var p =document.getElementById("para");
        box.onmousemove=function(e){
           p.innerHTML="物体内部距离x,y"+e.offsetX+","+e.offsetY+"<br>"+
           "一整张网页不管显示不显示x,y"+e.pageX+","+e.pageY+"<br>"+
           "显示的浏览器x,y"+e.clientX+","+e.clientY+"<br>";

        }
    </script>

键盘事件

对于键盘的元素节点一般是<input>，也可以是documet.

事件名称有：1）onkeyspress，有大小写的字母，数字，对应的事件对象，e.charCode

2）onkeydown，不分大小写的字母，上下键等，对应的事件对象，e.keyCode

对应的案例，键盘上下键控制盒子移动fan

 <div id="box"></div>
    <input type="text" name="" id="oinput">

    <script>
        var box = document.getElementById("box");
        var oinput = document.getElementById("oinput");
        // 起始位置
            var zuoyou=200;
            var  shangxia=200;

           document.onkeydown=function(e){
            switch(e.keyCode){
                         // #向左移动
                         
                case 37: zuoyou-=3;
                break;
                case 38: shangxia-=3;
                break;
                case 39: zuoyou+=3;
                break;
                case 40: shangxia+=3;
                break;
                
            }
            box.style.left= zuoyou +"px";
            box.style.top= shangxia +"px"

        }
        

    </script>

防止默认输入e.preventDefault()

案例一：文本只可以输入小写字母和数字

  <input type="text" id="wenben">
    <script>
        var wenben =document.getElementById("wenben");
        wenben.onkeypress=function(e){
           var shuru= e.charCode;
            if(!(shuru>=48&&shuru<=57||shuru>=97&&shuru<=122)){
                e.preventDefault();
            }
        }
    </script>

案例二：鼠标在盒子内部滚动，数字改变

使用事件阻止默认，是组织鼠标滚动控制了浏览器窗口的滚动。

 <div id="box">
    </div>
    <p id="para"></p>
    <script>
        var box =document.getElementById('box');
        var para =document.getElementById('para');

        var i=0;
        box.onmousewheel=function(e){
            e.preventDefault();

            if(e.deltaY>0){
                i++;

            }else{
                i--;
            }
            // console.log(i);
            para.innerHTML=i;
        }
      
    </script>

阻止事件传递  e.preventPrapation()

将代码放置哪一层就阻止该层于下一层之间的传递。

    <div id="box">
        <button id="btn"></button>
    </div>
    <script>
        oBox=document.getElementById("box");
        oBtn=document.getElementById("btn");

        // 阻止冒泡阶段的传播
        // oBox.onclick=function(){
        //     console.log("我是盒子");
        // }
        // oBtn.onclick=function(e){
        //     console.log("我是按钮");
        //     e.stopPropagation();
        // }

        oBox.addEventListener("click",function(e){
            console.log("我是盒子");
            e.stopPropagation();
        
        },true)
        oBtn.addEventListener("click",function(){
            console.log("我是按钮");
            
        },true)
    </script>

案例：按按钮出现盒子，按页面其他地方（不包括盒子本身）盒子消失

<div id="box"></div>
    <button id="btn">按钮</button>

    <script>
         var oBox=document.getElementById("box");
        var oBtn=document.getElementById("btn");
        oBtn.onclick=function(e){
            oBox.style.display= "block";
            // 切断按钮对网页冒泡阶段传播
            e.stopPropagation();
        }
        document.onclick=function(){
            oBox.style.display= "none";
        }
        oBox.onclick=function(e){
      // 切断盒子对网页冒泡阶段传播
            e.stopPropagation();
        }
    
    </script>