js事件的获取

Posted 2021-01-01 冉庆之

获取元素样式属性

Method	DES
clientWidth	获取元素宽度
clientHeight	获取元素高度（内容+内边距）
document.body.clientWidth	获取body宽度
document.body.clientHeight	获取body高度
offsetWidth	包括边框宽度
offsetHeight	包括边框高度（内容+内边距+边框）
offsetLeft	距离左边距离
offsetTop	距离右边距离，当前元素距离定位父级的

事件对象

作用：捕获用户的操作行为
事件对象的获取：
1、全局event对象--IE9+,chrome
2、形参接收方式--

document.onclick = function(m){
        m = m || event;//兼容ie,chrome及IE8-
        alert(m);
    }

//拖拽
var box = document.getElementById("box");//获取box元素ID
    box.onmousedown = function(m){
        m = m || event;//兼容浏览器
        var initX = m.clientX,//定义鼠标初始位置
            initY = m.clientY,

            initLeft = box.offsetLeft,//box初始位置
            initTop = box.offsetTop;
            document.onmousemove = function(m){
                m = m || event;
                var moveX = m.clientX,//鼠标拖拽位置
                    moveY = m.clientY,

                    changeX = moveX - initX,//拖拽改变距离
                    changeY = moveY - initY;

                    console.log(changeX,changeY);//打印出改变距离

                box.style.left = initLeft + changeX + "px";//box最终显示位置
                box.style.top = initTop + changeY +"px";
            }
    }
    document.onmouseup = function(){//当鼠标释放时，跳出移动操作
        document.onmousemove = null;
    }
//注意：box.onmousemove和document.onmousemove的差别，前者不需要长按住鼠标，而后者需要

冒泡事件

当父元素和子元素都绑定了“相同事件”，
子元素触发事件的时候会传递给父元素，相当于父元素也触发了事件 ——— 事件传播，冒泡事件

var parent = document.getElementById("parent");
    var box = document.getElementById("box");

    box.onmouseover = function(m){
        m = m || event;//兼容模式
        m.cancelBubble = true;//阻止冒泡
        console.log("子节点");
    }
    parent.onmouseover = function(){
        console.log("父节点=======");
    }

监听事件

addEventListener(‘click‘, fn2, false) //chrome、IE9+    
removeEventListener(‘click‘, fn2, false)
        参一：注册的事件的事件名字
        参二：注册事件的函数
        参三：true捕获事件，false冒泡事件(默认值)。

attachEvent(‘onclick‘, fn1) //IE8-执行顺序相反       
detachEvent(‘onclick‘, fn1);
        参一：事件名字
        参二：注册事件的函数

//兼容模式
 function addEvent(dom,eventName,fun){//定义函数
        if(dom.addEventListener){//判断事件兼容的浏览器是否为chrome、IE9+
            dom.addEventListener(eventName,fun);
        }else{//否者执行IE浏览器模式下事件
            dom.attachEvent(‘on‘+eventName,fun);
        }
    }

    addEvent(document,‘click‘,fn1);//调用函数
    addEvent(document,‘click‘,fn2);

键盘事件

根据输入键盘值（keycode）响应事件；

//例：输入上下左右调整模块
var box = document.getElementById("box");

    document.onkeydown = function(m){//传入参数
        m = m || event;//兼容模式
        
        var boxLeft = box.offsetLeft,//定义初始距离
            boxTop = box.offsetTop;

        switch(m.keyCode) {//传递键盘值参数进行循环
            case 37://左键keycode=37
                boxLeft -= 5;//移动距离
                break;
            case 38://上键keycode=38
                boxTop -= 5;
                break;
            case 39://右键keycode=39
                boxLeft += 5;
                break;
            case 40://下键keycode=40
                boxTop += 5;
                break;
            default://其他情况
                console.log("请输入上下左右按键");
        }

        box.style.left = boxLeft + "px";//赋值变换后的距离
        box.style.top = boxTop + "px";
    }