JavaScript知识总结——事件（2）

2017-08-23  本文已影响0人  More_5897

Web 浏览器中可能发生的事件有很多类型。如前所述，不同的事件类型具有不同的信息，而 DOM3 级事件规定了以下几类事件。

UI事件

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

焦点事件

当元素获得或失去焦点时触发；

window.onfocus = function () {
  console.log('focus'); //focus
  console.log(document.hasFocus()); //True
}
window.onblur = function () {
  console.log('blur'); //blur
  console.log(document.hasFocus()); //False
}

鼠标事件

当用户通过鼠标在页面上执行操作时触发；

mouseover 
<script type="text/javascript">
document.onmousedown=function (ev)
{
    var oEvent=ev||event; //IE浏览器直接使用event或者window.event得到事件本身。
    alert(oEvent.button);// IE下鼠标的 左键是1 ，  右键是2   ff和chrome下 鼠标左键是0  右键是2
};
</script>

滚轮事件

当使用鼠标滚轮（或类似设备）时触发；

document.addEventListener('click',function(event){
    document.title=event.clientX+' , '+event.clientY;
},false);

给document指定了onclick事件处理程序，单击页面时在title中可以看到客户端的坐标信息。
注意：这些值中不包括页面滚动的距离，因为这个位置并不表示鼠标在页面上的位置。

document.addEventListener('click',function(event){
    console.log(event.clientX+' , '+event.clientY);
    console.log(event.pageX+' , '+event.pageY);
},false);

在页面没有滚动的情况下，pageX和pageY的值与clientX和clientY的值相等。

IE8及更早版本不支持事件对象上的页面坐标，不过使用客户区坐标和滚动信息可以计算出来。这时候需要用到document.body(混杂模式)或document.documentElement（标准模式）中的scrollLeft和scrollTop属性。如下：

<script type="text/javascript">
var div=document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
    event=EventUtil.getEvent(event);
    var pageX=event.pageX,
          pageY=event.pageY;
    if(pageX==undefined)          {
        pageX=event.clientX+(document.body.scrollLeft || document.documentElement.scrollLeft);
    }
    if(pageY==undefined){
        pageY=event.clientY+(document.body.scrollTop || document.documentElement.scrollTop);
    }
    alert("Page coordinates:" +pageX+" , "+pageY);
});
</script>

document.addEventListener('click',function(event){
    console.log("Client coordinates"+event.clientX+' , '+event.clientY);
    console.log("Page coordinates "+event.pageX+' , '+event.pageY);
    console.log("Screen coordinates "+event.screenX+' , '+event.screenY);
},false);

文本事件

当在文档中输入文本时触发；

键盘事件

当用户通过键盘在页面上执行操作时触发；
当用户按下一个键盘上的字符键时，首先会触发keydown事件，然后紧跟着是keypress事件，最后会触发keyup事件。
keydown和kepress都是在文本框发生变化之前触发的，keyup事件则是在文本框已经发生变化之后触发的。
如果用户按下一个字符键不放，就会重复触发keydown和keypress事件，直到用户松开该键为止。
如果用户按下的是一个非字符键，那么首先会触发keydown事件，然后就是keyup事件。如果按住这个非字符键不放，那么就会一直重复触发keydown事件，直到用户松开这个键，此时会触发keyup事件。

var textbox=document.getElementById("myText");
EventUtil.addHandler(textbox,"keyup",function(event){
    event=EventUtil.getEvent(event);
    console.log(event.keyCode);
});

兼容性：在Firefox和Opera中，按分号键时keyCode值为59，也就是ASCII中分号的编码；但IE和Safari返回186，即键盘中按键的键码。
键码表：http://www.cnblogs.com/wuhua1/p/6686237.html

getCharCode:function(event){
    if(typeof event.charCode=="number"){//在不支持的浏览器中值是undefined
        return event.charCode;
    }else{
        return event.keyCode;
    }
}

在取得了字符编码之后，就可以使用String.fromCharCode()将其转换成实际的字符。

触摸事件

function handlerTouchEvent(event){
    //只跟踪一次触摸
    if(event.touches.length==1 || event.touches.length==0){//书上这里有错
        var output=document.getElementById("output");
        switch(event.type){
            case "touchstart":
                output.innerHTML="Touch started ( "+event.touches[0].clientX+", "+event.touches[0].clientY+")";
                break;
            case "touchend":
                output.innerHTML+="<br/>Touch ended ("+event.changedTouches[0].clientX+", "+event.changedTouches[0].clientY+")";
                break;
            case "touchmove":
                event.preventDefault(); //阻止滚动
                output.innerHTML+="<br/>Touch moved ("+event.changedTouches[0].clientX+", "+event.changedTouches[0].clientY+")";
        }
    }
}

EventUtil.addHandler(document,"touchstart",handlerTouchEvent);
EventUtil.addHandler(document,"touchend",handlerTouchEvent);
EventUtil.addHandler(document,"touchmove",handlerTouchEvent);
315302-20170317110948354-1520843247.png
以上代码会跟踪屏幕上发生的一次触摸操作。为简单起见，只会在有一次活动触摸操作的情况下输出信息。
当touchstart事件发生时，会将触摸的位置信息输出到<div>元素中。
当touchmove事件发生时，会取消其默认行为，阻止滚动（触摸移动的默认行为是滚动页面），然后输出触摸操作的变化信息。
而touched事件则会输出有关触摸操作的最终信息。
注：在touched事件发生时，touches集合中就没有任何Touch对象了，因为不存在活动的触摸操作；此时，就必须转而使用changedTouches集合。

/当触发touchstart和touchmove事件的时候没有问题，程序能正确的进入 if 然后根据case执行对应的语句，但是当触发touchend事件的时候，event.touches.length已经等于0了，不能再进入if 中，也就不能执行case中的语句，所以触发touchend的时候永远不会执行程序。所以判断条件要加上 event.touches.length==0./

手势事件

当两个手指触摸屏幕时就会产生手势，手势通常会改变显示项的大小，或者旋转显示项。有三个手势事件，

function handleGestureEvent(event){
   var output=document.getElementById("output");
    switch(event.type){
         case "gesturestart":
                output.innerHTML="Gesture started ( "+event.ratation+", scale"+event.scale+")";
                break;
            case "gestureend":
                output.innerHTML+="<br/>Gesture ended ("+event.rotation+", scale"+event.scale+")";
                break;
            case "gesturechange":
                event.preventDefault(); //阻止滚动
                output.innerHTML+="<br/>Gesture changed ("+event.rotation+",scale "+event.scale+")";
    }
}
EventUtil.addHandler(document,"gesturestart",handleGestureEvent);
EventUtil.addHandler(document,"gestureend",handleGestureEvent);
EventUtil.addHandler(document,"gesturechange",handleGestureEvent);
上一篇 下一篇

猜你喜欢

热点阅读