标签占位、鼠标和键盘事件

1,获取标签的占位

                (1),通过属性值方式获取标签对象的对应属性
                    标签对象.sytle.width
                (2),通过标签对象的属性来获取
                    offsetHeight   offsetWidth
                    高/宽 + padding + border

                    clientHeight   clientWidth
                    高/宽 + padding

                    clientLeft   clientTop
                    左/上 边框线

                    offsetLeft   offsetTop
                    左/上 定位父级元素的间距

2,DOM操作,内容的设定

        写入
            标签对象.innerHTML = '内容'   支持解析标签
            标签对象.innerText = '内容'   不支持,不解析标签
        获取
            var 变量 = 标签对象.innerHTML    获取标签的所有内容,包括标签
            var 变量 = 标签对象.innerText    获取标签的所有文本内容,没有标签

3,事件

    鼠标事件:
        左键单击   click
        左键双击   dblclick
        右键单击   contentmenu
        鼠标移入   
                    mouseover    当前标签,子级标签边界线,都会触发
                    mouseenter   只有当前标签边界线,会触发
        鼠标移出
                    mouseout     当前标签,子级标签边界线,都会触发
                    mouseleave   只有当前标签边界线,会触发
        鼠标移动
                    mousemove

    表单事件
        获取焦点           focus
        失去焦点数值改变    change
        输入事件           input
        提交事件           submit

4,事件对象

    标签对象.绑定的事件类型 = function(e){
        e = e || window.event
    }

1,button按钮
        是H5专门强化的标签,实际项目中,推荐使用button标签,替换input按钮
        样式设定更方便,功能更加强大

        在一般情况下,button按钮默认没有任何功能,配合JavaScript使用

        在form标签中
            button 按钮默认是提交功能 type="submit"
                   重置标签恢复默认值 type="reset"
                   普通按钮没有功能   type="button"

    2,键盘事件
        keydown    按键按下,如果一直按下,会一直触发
        keyup      按键抬起

        (1),键盘事件只能绑定给特殊的对象
            window   document
            特殊标签:可以被选中的标签
                    input   select   textarea   button   a...

        (2),按键事件对象的常用属性
            e.key       按键名称
                        数值和小键盘数值会重复,不推荐使用
            e.keyCode   按键编码,全世界所有的计算机语言都是统一的
                        每个按键都有自己独立的编码不会重复
                        兼容性:低版本的火狐浏览器,现在一般不用
                        var 变量 = e.keyCode || e.which
            按键组合
            e.ctrlKey   判断ctrl键是否按下
                           true   按下
                           false  没按
            e.altlKey   判断alt键是否按下
                           true   按下
                           false  没按
            e.shiftKey  判断shift键是否按下
                           true   按下
                           false  没按
            所谓的按键组合  ctrl / alt / shift + 其他按键

    3,触摸事件和特殊事件
        触摸事件:应用与移动端,对PC端无效
            touchstart     触摸开始
            touchend       触摸结束
            touchmove      触摸移动
        
        特殊事件:
            transitionend  当过渡结束时    
            animationend   当动画结束时

    4,事件对象的目标
        e.target    以对象的形式,来存储触发事件目标的相关信息
        兼容语法:    var 变量 = 事件对象.target || 事件对象.srcElement;   
            
        e.target.tagName   触发事件标签的名称
                           都是大写英文字母
        e.target.id        触发事件标签的id属性值 
        e.target.className 触发事件标签的class属性值 
        e.target.getAttribute('属性')    触发事件标签的属性的属性值


    小总结: 事件对象相关的兼容   有3个兼容
        1,兼容事件对象
            标签.事件 = function(形参){
                参数 = 参数 || window.event
            }                            

        2,兼容事件对象目标
            
            标签.事件 = function(形参){
                参数 = 参数 || window.event

                var 变量 = 参数.target || 参数.srcElement;
            } 

        3,兼容按键编码
            
            window.onkeydown = function(形参){
                参数 = 参数 || window.event
                var 变量 = 参数.keyCode || 参数.which;
            }

事件委托

        给父级添加事件类型,通过判断触发事件的目标,不同的触发目标,执行不同的程序

        往往是动态添加标签时,使用事件委托,给动态添加的标签,定义事件

        优点:
            1,不用循环遍历所有的标签,只要给一个一直存在的,不是动态生成的父级标签添加事件即可
            2,不用管代码的执行顺序,也就是添加事件时,动态标签是否已经生成
              因为是给一直存在的父级标签添加的事件
              不用管动态的子级标签是否已经生成了