事件对象-CSDN博客

事件对象 event

所有事件触发，回调函数中都能得到event

DOM：

 d1.onmousemove = function(event){
        e = e || window.event;  // 兼容
        console.log("move",e);
 }                    //输出获取：screenX/screenY，鼠标距离整个屏幕的左上标； clientX/clientY:鼠标相对于网页的可视坐标

在keydown里，keyCode得到键值码

 txt.onkeydown = function(e){
       e = e || window.event;
       console.log("keydown",e.keyCode);  
 }


  txt.onkeyup = function(e){
       e = e || window.event;
       console.log("keyUp",e.keyCode);
  }

在onkeypress里，keyCode得到字符码 (charCode)

  txt.onkeypress = function(e){
        console.log("keypress");
        e = e || window.event;
        console.log("keypress",e.keyCode);
  }

可通过event做到：

阻止事件默认行为

DOM： preventDefault ；相当于触发事件没有结果

IE-阻止默认行为的方法：returnValue

    txt.onkeydown = function(e){
        e = e || window.event;
        console.log("keydown",e.keyCode);

        //阻止事件的默认行为
        e.preventDefault();   // 设置后文本框不能输入
    }



    表单的submit，自带默认提交。

    fm.onsubmit = function(e){
        alert("表单提交");

        //DOM浏览器的阻止默认行为的方法
        e.preventDefault();   // 阻止alert提交

        //IE浏览器的阻止默认行为的方法
        e.returnValue = false;

        //DOM浏览器的阻止事件冒泡的方法
        e.stopPropagation();

        //IE浏览器的阻止事件冒泡的方法
        e.cancelBubble = true;
    }

阻止事件冒泡

DOM ： stopPropagation ： e.stopPropagation();
IE ： cancelBubble： e.cancelBubble = true;

事件委托

target

父元素同一绑定事件处理，子元素不用处理

好处：不用为事件的改变而重新绑定事件

e.target：得到鼠标移入的子节点

e.target.parentNode ：移入父级

建立表格，鼠标移入每行，背景色变化：对父级table设置时间委托,统一处理


let tb = document.getElementById("tb");
    tb.onmouseover = function(e){
        console.log("over",e.target.parentNode);
        e.target.parentNode.style.background = "blue";
    }
    tb.onmouseout = function(e){
        console.log("over",e.target.parentNode);
        e.target.parentNode.style.background = "";
    }