事件对象

事件对象 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 = "";
    }