12、JavaScript-事件

每天一句 : 让思考成为一种习惯。

一、事件捕获

• 事件绑定方式一(同一事件会被覆盖)

  oBox.onclick = fn1;
  oBox.onclick = fn2;  // 覆盖掉fn1

• 事件绑定方式二(同一事件可以多个处理)

  addEventListener(事件名词，事件函数，是否捕获)
  参数3: true表示采用事件捕获，若false事件冒泡
  oBox.addEventListener('click', fn, true);

注1: 事件冒泡是从里到外的传递方式，即是从事件目标(target)开始，往上冒泡直到页面的最上一级标签; 事件捕获是从外到里的传递方式，即是从最上一级标签开始往下查找，直到捕获到事件目标(target);
注2: IE中不支持事件捕获;

二、DOM事件流

事件捕获阶段 ⇒ 目标元素阶段 => 事件冒泡阶段

DOM事件流

三、事件取消

• 事件取消方式一

  document.onclick = null;

• 事件取消方式二

  IE: obj.detachEvent(事件名称， 事件函数);
  非IE: obj.removeEventListener(事件名称, 事件函数, 是否捕获);
  document.removeEventListener('click', fn1, false);
  window.removeEventListener ? document.removeEventListener('click', fn1, false) : document.detachEvent('click', fn1);

四、键盘事件

• onkeydown: 当键盘按键按下时
• onkeyup: 当键盘按钮释放(弹起)时
• event.keyCode: 数字类型(键盘按钮的值) ASCII值
• ctrlkey/shiftkey/altkey: 当一个事件发生时，如果是按下状态，返回true，否则返回false

案例: 键盘控制元素移动

五、事件默认行为

当一个事件发生时，浏览器自己会默认做的事情;

• 如何阻止事件默认行为
  a、当前这个行为是什么事件触发的
  b、在这个事件的处理函数中(高版本中只需要 return false;即可)
  ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;

• 右键菜单事件oncontextmenu

六、鼠标样式

  cursor： 其他取值   
  auto：标准光标   
  default：标准箭头   
  hand：手形光标   
  wait：等待光标   
  text：I形光标   
  vertical-text：水平I形光标   
  no-drop：不可拖动光标   
  not-allowed：无效光标   
  help：帮助光标   
  all-scroll：三角方向标   
  move：移动标   
  crosshair：十字标

  例如1: 
    oBox.style.cursor = 'crosshair';

  例如2： 
  #box h3{
     // 鼠标的样式设置
    cursor: move;
  }

七、拖拽

• 拖拽原理

<script>
            window.onload = function(){
                var oBox = document.getElementById("box");
                
                oBox.onmousedown = function(ev){
                    // 保存鼠标相对于oBox元素的位置
                    ev = event || ev;
                    var dowX = ev.offsetX;
                    var dowY = ev.offsetY;
                    
                    // 鼠标移动范围是整个document
                    document.onmousemove = function(ev){
                        ev = event || ev;
                        
                        // 元素距离浏览器左边位置 = ev.clientX(鼠标距离浏览器左边位置) - dowX(鼠标相对于元素的位置)
                        oBox.style.left = ev.clientX - dowX + 'px';
                        oBox.style.top = ev.clientY - dowY + 'px';
                    }
                    
                    document.onmouseup = function(){
                        document.onmousemove = document.onmouseup = null;
                    }
                }
            }
        </script>

拖拽原理

• 完美拖拽

  思路：
  1）拖拽效果
    <1>给元素#box定位（absolute,relative,fixed）
    <2>拖拽原理
      - 给#box绑定onmousedown,并记录按下的光标位置（offsetX,offsetY），然后给document绑定onmousemove事件，在onmousemove事件内不断改变#box的top,left值
        left = e.clicentX - offsetX + 'px';
        top = e.clientY - offsetY + 'px';
        - 鼠标松开时清除document的onmousemove事件
2）回放效果
    <1>在拖拽过程中记录移动过的每一个坐标在数组pos里
    <2>点击回放
        点击a标签时，#box窗口按原路径返回原来的位置
        遍历arr,不断改变#box的top,left值
    <3>回放完成后清空数组arr
     */