前端随心记---------Javascript系列（第十一节.事件event）

Posted 2021-03-25 叩首问路 码梦人生

 事件对象（event）

事件 ： 对某个元素的某种操作
事件对象： 当触发某个事件，产生的对象。就是事件对象，event使用的前提，必须有事件操作 var e=e || event ;

坐标属性：
pageX /pageY 相对于文档顶部和左侧的坐标 ie8为undefined;
clientX /clientY 相对于document窗口的顶部和左侧的坐标，如果出现滚动条，pageY=clienY+页面滚动的距离
offsetX /offsetY 相对于操作的元素内部偏移量
var disx=e.offsetX || e.layerX//layerX:火狐
var disx=e.offsetY || e.layerY//layerY:火狐使用

 

鼠标事件对象的button属性
button 控制用户按键
左键：0
滚轮：1
右键：2
ie下的按键
左键：1
滚轮：4
右键：2

 鼠标的兼容：

document.onmousedown = function(eve){
            var e = eve || event;
            var button = getButton(eve);
            console.log(button);    
                }
     function getButton(eve){
            //如何判断是ie8浏览器
            //根据事件对象来判断
            if(eve){
                return eve.button;
            }else{
                //这里是ie8执行
                var button = window.event.button;
                switch(button){
                    case 1:
                      return 0;
                    case 4:
                      return 1;
                    case 2:
                      return 2; 
                }
            }
        }

 

键盘事件对象属性

keyCode
ctrlKey shiftKey altKey 功能按键，当键盘按下时会返回布尔值
默认回车键的keyCode值是13，

例如用法：

  document.onkeydown = function(eve){
            var e = eve || event;
            var code = e.keyCode || e.which || e.charCode;
            var cVal = content.value;
            if(e.altKey && e.ctrlKey && code == 13){
                box.innerhtml += cVal + "<br>";}
                }

 

在onkeypress事件中，如果功能键ctrl+回车键，回车键的keyCode值为10在onkeypress事件中的ctrlKey和enter的组合键设置，.功能键属性一般不用于onkeypress。onkeypress这个事件下除了空格和回车键以外的其它功能键都不触发。
e.keyCode的兼容：
低版本的火弧中，onkeypress事件中e.keyCode值都为的0
火弧中使用e.which e.charCode
var code = e.keyCode || e.which || e.charCode;

例如用法：

  document.onkeypress = function(eve){
                    var e = eve || event;
                    var code = e.keyCode || e.which || e.charCode;
                    var cVal = content.value;
                    if(e.ctrlKey && code == 10){
                        box.innerHTML += cVal + "<br>";
                        //alert(1)
                    }
                }