JavaScript事件

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;
        }
    }
}
 
 
//事件应用:
 

                                       

posted @ 2018-10-25 23:58  0恋晨曦0  Views(162)  Comments(0Edit  收藏  举报