JavaScript事件

Posted 2021-01-15 0恋晨曦0

javascript事件类型：

UI事件：当用户与页面上的元素交互时触发；

　　load： 当页面加载后在window上触发， 图像加载完成后再<img />上触发

　　unload：

　　abort：当用户停止加载过程时，如果嵌入内容没有加载完，则在<object>上触发

　　error：发生JavaScript错误时在window上触发，当无法加载图像时在<img />上触发， 无法加载嵌入内容时则在<object>上触发

　　select：当用户选择文本框（input / textarea）中的字符时触发

　　resize：当窗口或框架的大小变化时在window或框架上面触发

　　scroll：当用户滚动带滚动条的元素中的内容时，在该元素上触发

scroll事件：

Event.addHandler(window, "scroll", function() {

　　if(document.comPatMode == "CSS1Compat"){

　　　　console.log(document.documentElement.scrollTop);

　　}else{

　　　　console.log(document.body.scrollTop);

　　}

})

 

焦点事件：页面元素获得或失去焦点是触发；

　　blur：不冒泡

　　focus：不冒泡

　　focusin：高版本才支持（IE5.5+、Safari5.1+、Opera11.5+、chrome）

 

鼠标事件：

　　click：

　　dblclick：（移动端不支持）

　　mousedown：

　　mouseenter：不冒泡，光标移到后代元素上不会触发

　　mouseleave：不冒泡，光标移到后代元素上不会触发

　　mousemove：

　　mouseout：

　　mouseover：

　　mouseup：

EventUtil.addHandler(document.body, ‘click‘, function() {
　　var event = EventUtil.getEvent();

　　//获取相对于客户区左顶角的鼠标指针的坐标：(event.clientX/Y)
　　console.log(‘Client coordinates: ‘ + event.clientX + ‘,‘ +event.clientY );

　　//获取相对于页面左顶角鼠标指针坐标：（event.pageX/Y; IE8及更早版本不支持）
　　//在页面没有滚动的情况下pageX/y === clientX/y
　　var pageX = event.pageX;
　　var pageY = event.pageY;
　　if(!pageX){
　　　　pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
　　　　pageY = event.clientY + (document.body.scrollTop || document.documentElementScrollTop); 
　　}
　　console.log(‘page coordinates: ‘ + pageX + ‘,‘ + pageY );

})

 鼠标滚轮事件：mousewheel

 

键盘与文本事件：

　　keydown：

　　keyup：

　　keydown和keyup事件的event.keyCode，数字和字母(不区分大小写)键盘直接对应ASCII表，0: 48  A：65，数字小键盘第一个0:96

 

　　keypress：当用户按下能够插入或删除字符的键时触发

　　String.fromCharCode() 字符编码转为字符：

 

 

 

 

 

 

JavaScript事件函数：

var EventUtil = {

    addHandler: function(element, type, handler) {

        if(element.addEventListener){

            element.addEventListener(type, handler, false);//标准和IE9+（false表示指定事件在冒泡阶段处理， true表示事件在捕获阶段处理）

        }else if(element.attachEvent){

            element.attachEvent("on"+type, handler);//IE8-；（注意this指向window， 事件在冒泡阶段调用，IE8-不支持事件捕获，事件处理的顺序与事件绑定顺序相反）

        }else{

            element["on" + type] = handler;//所有浏览器均支持（将函数复制给一个事件处理程序属性）

        }

    },

    getEvent: function(event) {

        return event ? event:window.event;//兼容IE（window）

    },

    getTarget: function() {

        return event.target || event.srcElement;

    },

    preventDefault: function(event) {

        if(event.preventDefault){

            event.preventDefault();

        }else{

            event.returnValue = false;

        }

    },

    removeHandler: function(element, type, handler) {

        if(element.removeEventListener){

            element.removeEventListener(type, handler, false);

        }else if(element.detachEvent){

            element.detachEvent("on"+type, handler);

        }else{

            element["on"+type] = null;

        }

    },

    stopPropagation: function(event) {

        if(event.stopPropagation){

            event.stopPropagation();

        }else{

            event.cancleBubble = true;

        }

    }

}

 

 

//事件应用：