美文网首页
常见event对象

常见event对象

作者: Tinky_Winky | 来源:发表于2018-12-15 11:58 被阅读0次

    event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
    event对象只在事件发生的过程中才有效
    兼容处理:

        box.onclick=function(ev){
            var ev=ev||window.event
        }
    

    事件委托

    1.什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件
    原理:利用冒泡的原理,把事件加到父级上,触发执行效果。
    优点:提高性能
    target 事件属性可返回事件的目标节点(触发该事件的节点)//Firefox/Chrome/Opera/Safari
    srcElement 事件属性可返回事件的目标节点(触发该事件的节点)//ie
    兼容处理

    oUl.onmouseover = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        
        if(target.nodeName.toLowerCase() == "li"){
                target.style.background = "red";
            }
      }
    

    事件冒泡

    在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素;

    方法:

    stopPropagation() 阻止事件传播; //Firefox/Chrome/Opera/Safari
    cancelBubble = true 阻止事件传播; //ie
    

    阻止冒泡兼容处理:

    function stopPropagation(e) {  
        e = e || window.event;  
        if(e.stopPropagation) {  //Firefox/Chrome/Opera/Safari   
            e.stopPropagation();  
        } else {  
            e.cancelBubble = true;  //ie  
        }  
    }  
    

    阻止浏览器默认行为

    方法:

     preventDefault() //Firefox/Chrome/Opera/Safari
     returnValue = false  //ie
    

    兼容处理:

    function stopPropagation(e) {
    e = e || window.event;
    if(e.preventDefault) { //Firefox/Chrome/Opera/Safari
    e.preventDefault();
    } else {
    e.returnValue = false; //ie
    }
    }

    鼠标、键盘属性

    altKey 事件属性返回一个布尔值。指示在指定的事件发生时,Alt 键是否被按下并保持住;
    shiftKey 事件属性返回一个布尔值。指示在指定的事件发生时,Shift 键是否被按下并保持住;
    ctrlKey 事件属性返回一个布尔值。指示在指定的事件发生时,Ctrl 键是否被按下并保持住;
    clientX 返回当事件被触发时,鼠标指针的水平坐标;
    clientY 返回当事件被触发时,鼠标指针的垂直坐标;
    screenX 返回当事件被触发时,鼠标指针相对于屏幕的水平坐标;
    screenY 返回当事件被触发时,鼠标指针相对于屏幕的垂直坐标;

    相关文章

      网友评论

          本文标题:常见event对象

          本文链接:https://www.haomeiwen.com/subject/tizohqtx.html