JS事件02（鼠标事件、拖拽、focus和input事件、组织默认事件、按键事件、滚轮事件）

鼠标事件

<style>
    body{
        margin: 0;
    }
    .div0
    {
        100px;
        height:100px;
        
        position: relative; 
            left:100px; 
            top:800px;
        /* margin: 100px; */
        
    }
    .div1
    {
         50px;
        height: 50px;
        
        position: absolute;
        left:50px;
        top:50px;
        /* margin: 50px; */
    
    }
    .span0
    {
        display: none;
        
        position: absolute;
        padding: 0px 5px;
        border-radius: 50px;
        font-size: 12px;
        z-index: 999;
    }
</style>
<span class="span0">aaaaa</span>
<div class="div0">
    <div class="div1"></div>
</div>
<script>
    /*  clientX: 33  距离可视区域左上角位置
        clientY: 31
​
        layerX: 28   如果目标对象是定位方式，值于offset相似
        layerY: 20   如果目标对象是非定位方式，
        // 取父容器的左上角位置，如果父容器未定位，继续向上取
​
        offsetX: 16  相对事件目标对象的左上角位置
        offsetY: 9
​
        movementX: 0  仅用于mousemove事件  这个值是鼠标移动时相对上次获取坐标的距离
        movementY: 0
​
        pageX: 28 相对页面顶端左上角位置
        pageY: 25
​
        screenX: 38  相对屏幕左上角位置
        screenY: 107
​
        x: 32   和clientX，clientY相同
        y: 33
​
        按下键点击鼠标时变为true
        altKey: false 
        ctrlKey: false
        metaKey: false
        shiftKey: false
​
        针对mousedown事件的属性，判断按下的键
                左键    中键   右键
        button:  0     1       2
        buttons: 0     4       2
        which:   1     2       3
        */
​
    var div=document.querySelector(".div0");
    // div.addEventListener("mousedown",clickHandler);
    // div.addEventListener("mouseup",clickHandler);
    // div.addEventListener("click",clickHandler);
    // div.addEventListener("mouseover",clickHandler);
    // div.addEventListener("mouseout",clickHandler);
    // div.addEventListener("mouseenter",clickHandler);
    // div.addEventListener("mouseleave",clickHandler);
    // mouseover mouseout具有冒泡功能可以收到鼠标滑入滑出子元素的冒泡事件
    // mouseenter mouseleave仅对侦听的对象起到事件接收作用
    // div.addEventListener("mousemove",mouseHandler);
    // div.addEventListener("mouseover",mouseHandler);
    // div.addEventListener("mouseout",mouseHandler);
    div.addEventListener("contextmenu",mouseHandler);
    // var span0=document.querySelector(".span0");
​
    function clickHandler(e){
        console.log(e.type);
        // console.log(e.clientX,e.clientY)
    }
​
    /*  function abc(){
        console.log(e.clientX,e.clientY);
    } */
​
    /* 
        click  点击左键
        dblclick  双击左键
        mousedown  按下键
        mouseup    释放键
        mouseover  滑过
        mouseout   滑出
        mouseenter  进入
        mouseleave  离开
        mousemove  移动
        contextmenu 右键菜单
        */
​
        function mouseHandler(e){
            e.preventDefault();
            console.log(e);
        /*  switch(e.type){
                case "mouseout":
                span0.style.display="none";
                break;
                case "mouseover":
                span0.style.display="inline-block";
                case "mousemove":
                span0.textContent="这是"+getComputedStyle(e.target).backgroundColor+"颜色";
                span0.style.left=e.pageX+"px";
                span0.style.top=e.pageY+"px";
                break;
            } */
        }
    //  tooltip
</script>

拖拽

var Utils=(function(){
/* 
    拖拽方法
        拖拽元素
        参数:
            elem：被拖拽的HTML标签DOM元素   HTMLElement
            parentOut:是否不允许拖拽到容器外
                类型 Boolean：true 不允许拖拽到父容器外
                                false 允许拖拽到父容器外
                    Object  示例：{Number,height:Number};
                            width和height限制拖拽的范围
                            如果为0，该方向不能拖拽
        返回：无
​
        1、完成拖拽的起始侦听事件，当侦听在元素上按下mousedown事件时
            执行当前对象的函数mousedownHandler
        2、将当前对象存储在这个元素的obj属性中，用于在后面按下时调用
            到当前对象
        3、设置这个元素的定位为绝对定位
        4、设置document对象的属性是当前带入参数是否不允许拖拽到容器外这个值
            用来在后续中判断该元素是否允许拖拽脱离当前容器
    */
    dragElem:function(elem,parentOut){
        elem.obj=this;
        elem.style.position="absolute";
        document.parentOut=parentOut;
        elem.addEventListener("mousedown",this.mousedownHandler);
    },
    /* 
        鼠标按下键和鼠标移动，释放的事件函数
        参数：
            e  MouseEvent 鼠标对象 由鼠标事件自动创建该参数
        1、鼠标按下时
            鼠标按下时 this,e.currentTarget   针对标签元素  this->按下的标签元素
                1、取消默认事件行为，可以解决拖拽时产生禁止拖拽图标
                2、将当前按下鼠标左键相对元素左上角的坐标存储在document的对象属性X和y上
                用于后面调用时使用
                3、将当前this，也就是按下的元素存储在document对象属性div中
                4、将当前Utils这个对象存在document对象属性obj中，用于后面的调用
            5、针对document侦听鼠标移动和释放事件，执行的函数是Utils对象，这个对象存在this.obj
                也就是按下元素的obj属性
        2、鼠标移动时
            this，因为鼠标是侦听document上移动的事件，所以，this是document
            1、获取当前按下元素的父元素，this.div就是document.div,这个在按下时做了存储
                并且求出它的父元素的范围矩形，这个返回矩形包括父元素的相对可视窗口的坐标和父元素宽高
            2、计算出x，y是当前鼠标移动位置相对当前元素父元素的左上角位置 
            3、判断 parentOut传入参数属性是不是允许拖拽到父元素外，如果是true，不允许拖拽到父元素外
                如果是对象就需要设置拖拽的范围
                如果是true，拖拽时禁止x和y小于0，限制右侧和下侧不出容器
                如果时对象，限制不出对象宽高的范围，
            4、设置这个元素的位置是调整过后坐标
        3、鼠标释放时
            删除document上所有的mousemove事件和mouseup事件
    
    */
    mousedownHandler:function(e){
        // 1、事件函数中的this会覆盖普通对象中函数this的指向
        // 2、事件函数中，针对e.type事件类型所有对应的事件侦听对象才是this
​
        if(e.type==="mousedown"){
            e.preventDefault();
            document.x=e.offsetX;
            document.y=e.offsetY;
            document.div=this;
            document.obj=this.obj;
            document.addEventListener("mousemove",this.obj.mousedownHandler)
            document.addEventListener("mouseup",this.obj.mousedownHandler)
        }else if(e.type==="mousemove"){
            var left,top;
            var rect=this.div.parentElement.getBoundingClientRect();
            var x=e.clientX-this.x-rect.x;
            var y=e.clientY-this.y-rect.y;
            if(this.parentOut===true){
                if(x<0) x=0;
                if(x>=rect.width-this.div.offsetWidth)x=rect.width-this.div.offsetWidth;
                if(y<0) y=0;
                if(y>=rect.height-this.div.offsetHeight) y=rect.height-this.div.offsetHeight;
            }else if(typeof this.parentOut==="object"){
                if(x<0) x=0;
                if(x>=this.parentOut.width-this.div.offsetWidth)x=this.parentOut.width-this.div.offsetWidth;
                if(y<0) y=0;
                if(y>=this.parentOut.height-this.div.offsetHeight) y=this.parentOut.height-this.div.offsetHeight;
                if(this.parentOut.width===0) x=0;
                if(this.parentOut.height===0) y=0;
            }
            this.div.style.left=x+"px";
            this.div.style.top=y+"px";
        }else{
            document.removeEventListener("mousemove",this.obj.mousedownHandler)
            document.removeEventListener("mouseup",this.obj.mousedownHandler)
        }
    },
    dragOff:function(elem){
        elem.obj=null;
        document.obj=null;
        elem.removeEventListener("mousedown",this.mousedownHandler);
    }
}
})();

焦距和Input事件

<input type="text" id="input0" placeholder="用户名">
<input type="text" id="input1">
<script>
    /* 
        FocusEvent  焦距事件
            focus  汇聚焦距
            blur   失去焦距
            所有的表单元素，例如文本框
            超链接
            focus汇聚焦距的方式有点击，tab切换
    
    */
​
    var input0=document.querySelector("#input0");
    var input1=document.querySelector("#input1");
    input0.addEventListener("focus",focusHandler);
    input1.addEventListener("focus",focusHandler);
    input1.addEventListener("blur",focusHandler);
​
    function focusHandler(e){
        console.log(e);
        // e.relatedTarget  上次汇聚焦距的元素
    }
​
    // inputEvent  input事件
    var input0=document.querySelector("#input0");
    input0.addEventListener("input",inputHandler);
​
    function inputHandler(e){
        console.log(e);
        
            /*   e.data: "o"  输入的内容
            e.inputType: "insertText" 输入的类型  insertCompositionText
                            包括插入文本，删除文本，插入输入法文本，剪切粘贴文本等等
            e.isComposing: true   是否是输入法文本   
        */
        if(!isNaN(e.data)) input0.value=input0.value.replace(e.data,"");
    }
​
    // 节流
​
    var input0=document.querySelector("#input0");//拿到input0这个标签
    var ids;//定义一个ids计数器
    input0.addEventListener("input",inputHandler);//给input标签加一个事件监听
​
    function inputHandler(e){//当input事件发生时，执行这个函数
        if(ids!==undefined) return;//当ids有值时，即setTimeout创建后ids计数器有值，此时直接return 
        ids=setTimeout(function(){//如果未赋值，创建一个setTimeout
            clearTimeout(ids);//首先清除ids计数器
            ids=undefined;
            console.log(input0.value);//打印此次节流500ms后的input的值
        },500);
    }
</script>

阻止默认事件

<style>
    div
    {
         100px;
        height: 100px;
        
    }
</style>
<form action="#">
    <input type="text" name="user">
    <input type="password" name="pass">
    <input type="submit">
    <input type="reset">
</form>
<div>askjdjksad</div>
<img src="./img/1.png">
<script>
    // 1、表单事件中的submit reset 使用阻止默认事件可以取消提交和重置
    /* var form=document.querySelector("form");
    form.addEventListener("submit",formHandler);
    form.addEventListener("reset",formHandler);
​
    function formHandler(e){
        e.preventDefault();        
    } */
​
    // 2、当使用contextmenu事件，取消鼠标右键菜单
    /* document.addEventListener("contextmenu",mouseHandler);
    function mouseHandler(e){
        e.preventDefault();      
    } */
​
    // 3、当针对元素拖拽时，元素内有文本，文本会被选中
    /* var div=document.querySelector("div");
    document.addEventListener("mousedown",mouseHandler);
​
    function mouseHandler(e){
        e.preventDefault();       
    } */
​
    // 4、图片拖拽时产生禁止拖拽图标
    /* var img=document.querySelector("img");
    img.addEventListener("mousedown",mouseHandler);
​
    function mouseHandler(e){
        e.preventDefault();
    } */
</script>

按键事件

<style>
    textarea
    {
         800px;
        height: 400px;
    }
    input
    {
         600px;
    }
    div
    {
         500px;
        height: 400px;
        border:1px solid #000000;
        word-wrap: break-word;
    }
</style>
<!-- <textarea id="texts"></textarea><br>
<input type="text" id="msg">
<button>提交</button> -->
<div></div>
<script>
        /* 
            e.code: "KeyA"
            e.key: "a"
            e.keyCode: 65
            e.which: 65   */
            
    document.addEventListener("keydown",keyHandler);
    function keyHandler(e){
        console.log(e);
        
    }
​
    var texts,msg,bn
    init();
    function init(){
        texts=document.querySelector("#texts");
        msg=document.querySelector("#msg");
        bn=document.querySelector("button");
        bn.addEventListener("click",clickHandler);
        document.addEventListener("keydown",clickHandler);
    }
​
    function clickHandler(e){
        if(e.type!=="click" && e.type!=="keydown") return;
        if(e.keyCode && e.keyCode!==13) return
        if(msg.value.trim().length<1) return;
        texts.value+=msg.value+"
";
        msg.value="";
    } 
​
    // 富文本编辑器
    var div=document.querySelector("div");
    document.addEventListener("keydown",keyHandler);
    // document.addEventListener("keyup",keyHandler);
​
    function keyHandler(e){
        if(e.keyCode<48 || e.keyCode>57 && e.keyCode<65 || e.keyCode>90) return;
​
        div.innerHTML+=e.key;
    }
</script>

人物走路案例

var actor,code;
var bool=false,
    dic="",
    time=0,
    speed=1,
    num=0,
    x=0,
    y=0;
​
init();
function init(){
    actor=createActor();
    document.addEventListener("keydown",keyHandler);
    document.addEventListener("keyup",keyHandler);
    setInterval(animation,16);
}
​
function createActor(){
    var  actor=document.createElement("div");
    Object.assign(actor.style,{
        "32px",
        height:"32px",
        position:"absolute",
        left:0,
        top:0,
        backgroundImage:'url(./img/Actor01-Braver03.png)',
    });
    document.body.appendChild(actor);
    return actor;
}
​
// 37,38,39,40
function keyHandler(e){
    bool=e.type==="keydown";
    code=e.keyCode;
    if(e.type==="keyup"){
        actor.style.backgroundPositionX="0px";
        time=0;
    }
}
​
function animation(){
    if(!bool) return;
​
    actorMove();
    actorAction();
}
​
function actorAction(){
    if(code<37 || code>40) return;
    time--;
    if(time>0)return;
    time=15;
    actor.style.backgroundPositionX=num++%4*-32+"px"
}
​
function actorMove(){
    switch(code){
        case 37:
        if(dic!=="left"){
            actor.style.backgroundPositionY="-33px";
            dic="left"
        }
            x-=speed;
        break;
        case 38:
        if(dic!=="top"){
            actor.style.backgroundPositionY="-99px";
            dic="top"
        }
            y-=speed;
        break;
        case 39:
        if(dic!=="right"){
            actor.style.backgroundPositionY="-66px";
            dic="right"
        }
            x+=speed;
        break;
        case 40:
        if(dic!=="bottom"){
            actor.style.backgroundPositionY="0px";
            dic="bottom"
        }
            y+=speed;
        break;
    }
    actor.style.left=x+"px";
    actor.style.top=y+"px";
}

滚轮事件

/* 向上
google和IE
deltaX: -0
deltaY: -100
deltaZ: 0
detail: 0
wheelDelta: 120
wheelDeltaX: 0
wheelDeltaY: 120
火狐
e.detail: -3
*/
var speed=0;
window.addEventListener("mousewheel",wheelHandler);
window.addEventListener("DOMMouseScroll",wheelHandler)
​
function wheelHandler(e){
    if(e.type==="mousewheel"){
        speed=e.deltaY<0 ? -10 : 10; 
    }else if(e.type==="DOMMouseScroll"){
        speed=e.detail<0 ? -10 : 10;
    }
    console.log(speed);
}