JS事件总结

2020-01-09 本文已影响0人前端辉羽

1.鼠标事件

onmousedown ⿏标按下的时候触发的事件

onmouseup 当⿏标按下后抬起的时候发⽣的事件

onmousemove 当⿏标移动的时候发⽣

onmouseover 当⿏标移⼊的时候触发

onmouseout 当⿏标移出对象的时候触发

onclick 当⿏标单击的时候触发

ondblclick 当⿏标双击的时候触发

2.键盘事件

onkeydown 当键盘按下的时候触发

onkeyup 当键盘按下抬起的⼀瞬间触发

3.表单事件

onsubmit 当⽤户点击submit按钮来提交表单时，就会触发onsubmit事件，如果事件处理程序返回⼀个false，就会阻⽌表单提交，表单就不会发送数据到服务器。

onchange 修改表单字段的时候触发该事件

onfocus 当获取到焦点到时候触发

onblur 当失去焦点的时候触发

4.窗⼝事件

onload 元素加载完成时触发,常⽤的就是window.onload

window.onload = function(){
//等⻚⾯加载完成时执⾏这⾥的代码
}

onresize 当浏览器窗⼝改变的时候触发

window.onresize = function(){
alert(1)
}

5.event对象

event对象代表事件的状态，当事件发⽣的时候⽤来记录事件的详细信息，类似于⻜机的⿊匣⼦。
在ie和chrome中，事件对象（event）是⼀个内置的全局对象，必须在事件调⽤的时候才有值，如果没有事件调⽤，event没有值，在firefox中event对象没有被定义，如果⼀个函数被事件调⽤，那么这个事件函数中的第⼀个参数就是event对象，这也是标准浏览器下的处理⽅式，在⾮标准下，这种⽅式不被采⽤.

总结：在⾮标准下，使⽤被定义好的event内置对象，在标准下使⽤事件函数中的第⼀个参数，假设传⼊的第⼀个参数为e，可以⽤逻辑或做兼容，var e = e || event

5.1.event对象上的属性 clientX,clientY

clientX 事件属性返回当事件被触发时⿏标指针向对于浏览器⻚⾯（或客户区）的⽔平坐标。clientY 事件属性返回当事件被触发时⿏标指针向对于浏览器⻚⾯（客户区）的垂直坐标。

5.2.event对象上的keycode属性

对于 keypress 事件，该属性声明了被敲击的键⽣成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使⽤的键盘的布局相关。

示例：用方向键控制box元素移动

//通过键盘控制⽅向
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
    window.onload = function(){
      //获取到box对象
      var oBox = document.getElementById('box');
      //定义x y轴的增量
      var x = y= 0;
      //键盘按下事件
      document.onkeydown = function(e){
      //事件兼容
      var e = e || event;
      //上38 下 40 左37 右39
      switch(e.keyCode){
        case 38:
        y -= 10;
        break;
        case 40:
        y += 10;
        break;
        case 37:
        x -= 10;
        break;
        case 39:
        x += 10;
        break;
      }
      //改变偏移量
      oBox.style.left = x + "px";
      oBox.style.top = y + "px";
    }
  }
</script>
<style type="text/css">
  #box{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
  }
</style>
</head>
<body>
  <div id="box">
  </div>
</body>
</html>

5.3.阻止事件冒泡

当⼀个元素接收到⼀个事件以后，会将事件传播给它的⽗级元素，它的负级元素会⼀层⼀层往上传播，直到最顶层window，这种事件传播机制叫作事件冒泡。

在实际开发中我们通常需要阻止事件冒泡，做法是将event对象上的cancelBubble属性设置成true、

兼容性写法：

function stopBubble(e) { 
   if(e && e.stopPropagation) { //非IE 
       e.stopPropagation(); 
   } else { //IE 
       window.event.cancelBubble = true; 
   } 
}

w3c：event.stopPropagation()