事件（JS）

事件对象

onmousemove

• 该事件将会在鼠标在元素中移动时被触发

事件对象

• 当事件的相应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
  • 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘那个按键被按下 鼠标滚轮滚动的方向
• 在IE8中，相应函数被处罚时，浏览器不会传递事件对象
  • 在IE8及以下的浏览器中，是将事件对象作为 window对象的属性保存的

clientX可以获取鼠标指针的水平坐标
clientY可以获取鼠标指针的垂直坐标
clientX和clientY
- 用于获取鼠标在当前的可见窗口的坐标
pageX和pageY
- 可以获取鼠标相对于当前页面的坐标
- 但是这两个属性在IE8中不支持，所以如果需要兼容IE8，则不能使用

获取滚动条滚动的距离

• chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
• 火狐等浏览器认为浏览器的滚动条是html的

target

• event中的target表示的触发事件的对象

whellDelta

• event.wheelDelta可以获取鼠标滚轮滚动的方向
• 向上滚120 向下滚-120（这个值我们不看大小，只看正负）

---

---

事件冒泡（Bubble）

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

var box2 = document.getElementById("box2");
            box2.onmousemove = function(event){
                event = event || window.event;
                // 取消冒泡
                event.cancelBubble = true;
            };

事件的委派

• 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的时间触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

---

事件的绑定

1. 使用 对象.事件 = 函数 的形式绑定响应函数
   • 它只能同时为一个元素的一个事件绑定一个响应函数
     • 不能绑定多个，如果绑定多个，则后边会覆盖掉前边的
2. addEventListener() 标准模型方式
   • 通过这个方法设置监听器也可以为元素绑定响应函数
   • 参数：
     1. 事件的字符串，不要on
     2. 回调函数，当事件触发时该函数会被调用
     3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false
   • 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个相应函数，这样当事件被触发时，相应函数将会按照函数的绑定顺序执行
   • 这个方法不支持IE8及以下的浏览器
3. attachEvent() IE8中及以下使用
   • 在IE8中可以使用attachEvent() 来绑定事件
   • 参数：
     1. 事件的字符串，要on
     2. 回调函数
   • 这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反

• addEventListener()中的this，是绑定事件的对象
• attachEvent()中的this，是window

4. 定义一个函数，用来为指定元素绑定响应函数
   • 参数：
     obj 要绑定事件的对象
     evenStr 事件的字符串（不要on）
     callback 回调函数

// 统一 this
function bind(obj , eventStr , callback){
                if(obj.addEventListener){
                    //大部分浏览器兼容的方式
                    obj.addEventListener(eventStr , callback , false);
                }else{
                    /*
                       this是谁由调用方式决定
                       callback.call(obj)
                     */
                    //IE8及以下
                    obj.attachEvent("on"+eventStr , function(){
                        //在匿名函数中调用回调函数
                        callback.call(obj);
                    });
                }
            }

---

事件的传播

• 关于事件的传播网景公司和微软公司有不同的理解
  • 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行（事件冒泡）
  • 网景公司认为事件应该是由外向内传播，也就是当事件触发时，应该先触发当前元素的最外层祖先元素的事件，然后再向内传播给后代元素（事件捕获）
• W3C综合了两个公司的方案，将事件传播分成了三个阶段
  1. 捕获阶段
     • 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
  2. 目标阶段
     • 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
  3. 冒泡阶段
     • 事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件
  • 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true（一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false）
  • IE8及以下的浏览器中没有捕获阶段

---

拖拽

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

• 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false 来取消默认行为（IE8不支持）

//拖拽效果（IE8及以下不可用）
window.onload = function(){
            var box1 = document.getElementById("box1");
            
            box1.onmousedown = function(event){
                event = event || window.event;
                //div的偏移量 鼠标.clientX - 元素.offsetLeft
                //div的偏移量 鼠标.clientY - 元素.offsetTop
                var ol = event.clientX - box1.offsetLeft;
                var ot = event.clientY - box1.offsetTop;
                
                // 为document绑定一个onmousemove事件
                document.onmousemove = function(event){
                    event = event || window.event;
                    //获取鼠标的坐标
                    var left = event.clientX - ol;
                    var top = event.clientY - ot;
                    //修改box1的位置
                    box1.style.left = left + "px";
                    box1.style.top = top + "px";
                };
                
                // 为document绑定一个onmouseup事件
                document.onmouseup = function(){
                    //取消document的onmousemove事件
                    document.onmousemove = null;
                    //取消document的onmouseup事件
                    document.onmouseup = null;
                };
                return false;
            };
        };

• 当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上

提取一个专门用来设置拖拽的函数

• 参数：开启拖拽的元素

// 拖拽函数  (兼容IE8)
window.onload = function () {
            var box1 = document.getElementById("box1");
            drag(box1);
            
            /* 
                设置一个专门用来设置拖拽的函数
                    参数：开启拖拽的元素
            */
            function drag(obj) {
                // 设置box1捕获所有鼠标按下的事件
                obj.onmousedown = function (event) {
                    /*
                        setCapture()
                          - 只有IE支持，但是在火狐中调用时不会报错，
                               而如果使用chrome调用会报错
                    */
                    // if(box1.setCapture){
                    //     box1.setCapture();
                    // }
                    obj.setCapture && box1.setCapture();
                    
                    event = event || window.event;
                    //div的偏移量 鼠标.clientX - 元素.offsetLeft
                    //div的偏移量 鼠标.clientY - 元素.offsetTop
                    var ol = event.clientX - obj.offsetLeft;
                    var ot = event.clientY - obj.offsetTop;
                    
                    // 为document绑定一个onmousemove事件
                    document.onmousemove = function (event) {
                        event = event || window.event;
                        //获取鼠标的坐标
                        var left = event.clientX - ol;
                        var top = event.clientY - ot;
                        //修改box1的位置
                        obj.style.left = left + "px";
                        obj.style.top = top + "px";
                    };
                    
                    // 为document绑定一个onmouseup事件
                    document.onmouseup = function () {
                    
                        //取消document的onmousemove事件
                        document.onmousemove = null;
                        
                        //取消document的onmouseup事件
                        document.onmouseup = null;
                        
                        //当鼠标松开时，取消对事件的捕获
                        obj.releaseCapture && obj.releaseCapture();
                    };
                    return false;
                };
            };
        };

---

滚轮事件

• onmousewheel
  • 鼠标滚轮滚动的事件，会在滚轮滚动时触发，但是火狐不支持该属性
  • 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件，注意该事件需要通过addEventListener() 函数来绑定
• event.wheelDelta
  • 获取鼠标滚轮滚动的方向
  • wheelDelta这个值我们不看大小，只看正负
  • 这个属性在火狐中不支持
    • 在火狐中使用event.detail来获取滚动的方向
    • 向上滚-3 向下滚3
• 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，如果不希望发生，则可以return false取消默认行为
  • 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false，需要使用event.preventDefault()方法来取消默认行为（不支持IE8及以下）

//滚轮事件
window.onload = function(){
            var box1 = document.getElementById("box1");
            
            box1.onmousewheel = function(event){
                event = event || window.event;
                if(event.wheelDelta > 0 || event.detail < 0){
                    //向上滚 box1变短
                    box1.style.height = box1.clientHeight - 10 + "px";
                }else{
                    //向下滚 box1变长
                    box1.style.height = box1.clientHeight + 10 + "px";
                }
                //兼容浏览器(火狐)
                event.preventDefault && event.preventDefault();
                
                return false;
            };
            
            bind(box1, "DOMMouseScroll", box1.onmousewheel);
            
            //定义一个函数，用来为指定元素绑定响应函数
            function bind(obj , eventStr , callback){
                if(obj.addEventListener){
                    //大部分浏览器兼容的方式
                    obj.addEventListener(eventStr , callback , true);
                }else{
                    /*
                      this是谁由调用方式决定
                      callback.call(obj)   
                     */
                    //IE8及以下
                    obj.attachEvent("on"+eventStr , function(){
                        //在匿名函数中调用回调函数
                        callback.call(obj);
                    });
                }
            }
        };

---

键盘事件

onkeydown
- 键盘被按下
- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快（这种设计是为了防止误操作的发生）
- 在文本框中输入内容，属于onkeydown的默认行为，如果取消该默认行为，则输入的内容不会出现在文本框中

onkeyup
- 键盘被松开

• 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

keycode
- 获取按键的编码
- 通过keycode可以判断哪个按键被按下
- 数字编码 48-57 对应 0-9
- 数字编码 37-40 对应 左上右下

altKey
ctrlKey
shiftKey
- 这三个属性用来判断alt、ctrl、shift是否被按下，如果按下则返回true，否则返回false

//键盘移动div 
<script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            document.onkeydown = function(e){
                e = e || event;
                //定义一个变量 表示速度
                var speed = 100;
                switch(event.keyCode){
                    case 37 :
                        box1.style.left = box1.offsetLeft - speed + 'px';
                        break;
                    case 38 :
                        box1.style.top = box1.offsetTop - speed + 'px';
                        break;
                    case 39 :
                        box1.style.left = box1.offsetLeft + speed + 'px';
                        break;
                    case 40 :
                        box1.style.top = box1.offsetTop + speed + 'px';
                        break;
                };
            };
        };
    </script>

---