TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

12、JavaScript-事件

zyz
2018-05-17
/
0 评论
/
729 阅读
/
正在检测是否收录...
05/17

一、事件捕获

  • 事件绑定方式一(同一事件会被覆盖)
  oBox.onclick = fn1;
  oBox.onclick = fn2;  // 覆盖掉fn1
  • 事件绑定方式二(同一事件可以多个处理)
  addEventListener(事件名词,事件函数,是否捕获)
  参数3: true表示采用事件捕获,若false事件冒泡
  oBox.addEventListener('click', fn, true);

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

二、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
     */
赞(0)
评论 (0)