js-事件/拖拽/滚轮

事件的冒泡（Bubble）
所谓事件冒泡是指事件的向上引导，当后代元素上的事件被触发时，其他祖先元素的相同事件也会被触发；在开发中大部分时间冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡：

事件对象取消方法加在后代上，可以取消祖先元素的事件响应。

box1.onclick = function (even) {
   alert("box1");
};
box2.onclick = function (even) {
   alert("box2");
   //点击box2时，box1就不会再响应事件了
   even.cancelBubble = true;
};

事件的委派
将事件统一绑定给元素的共同的祖先元素，这样后代元素上的元素触发时，会一直冒泡到祖先元素。

事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
只绑定一次事件，即可应用到多个元素上，即使元素是后添加的。

var ul = document.getElementById("ul");
ul.onclick = function (even) {
    if (even.target.className == "link") {
       alert("li");
    }
};

事件的绑定
onclick只能绑定一个事件
使用addEventListener方法绑定多个事件
参数：

1、事件字符串"click"，不要on
2、回调函数
3、是否在捕获阶段触发事件，一般都传false

button.addEventListener("click", function () {
      alert("li2");
}, false);

事件的传播
事件传播三个阶段：

1、捕获阶段：
在捕获阶段时从最外层祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件；
2、目标阶段：
事件捕获到的目标元素，捕获结束开始在目标元素上触发事件；
3、冒泡阶段：
事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。

其他事件方法见：https://www.jianshu.com/p/2565dd160588

拖拽
拖拽流程：

1、当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2、当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3、当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

第一步
创建元素，并把设置绝对定位:position: absolute;

第二步

window.onload = function () {
   var box1 = document.getElementById("box1");
   box1.onmousedown = function (event) {
      var ol = event.clientX - box1.offsetLeft;
      var ot = event.clientY - box1.offsetTop;

      document.onmousemove = function (even) {
         var left = even.clientX - ol;
         var top = even.clientY - ot;
         box1.style.left = left + "px";
         box1.style.top = top + "px";
      };
      document.onmouseup = function () {
         document.onmousemove = null;
      };
      //当页面中还有其他文字，全选后进行拖拽元素会连文字一起拖拽，可以取消浏览器默认行为
       return false;
   };
}

滚轮的事件
onmousewheel和DOMMouseScroll都废弃了
推荐使用wheel

box1.addEventListener("wheel", function () {
      //鼠标滚轮往上滚动deltaY<0,往上滚动deltaY>0
      if (even.deltaY < 0) { 
          //往上滚动变短
           box1.style.height = box1.clientHeight - 10 + "px";
       } else {
           //往下滚动变长
           box1.style.height = box1.clientHeight + 10 + "px";
       }
});

preventDefault可以取消addEventListener事件的默认行为；

键盘的事件
键盘事件一般会绑定给可以获得焦点的元素或document。

input.onkeydown = function (even) {
      //keyCode 编码 
      alert(even.keyCode);
      //altKey是alt键被按下时返回true ctrlKey shiftKey同理
      console.log(even.altKey,even.ctrlKey,even.shiftKey);
      //返回false键盘输入无效
      return false;
};
input.onkeyup = function () {
};

keyCode编码参考：