JavaScript事件相关

1、事件的绑定方式：内联模式、外联模式/脚本模式

2、事件的类型：

1）鼠标事件：click：当用户点击某个对象时调用的事件句柄

                        dblclick：当用户双击某个对象时调用的事件句柄

                        mousedown：鼠标按钮被按下

                        mouseup：鼠标按键被松开

                        mouseover：鼠标移到某元素之上

                        mouseout：鼠标从某元素移开

                        mousemove：鼠标被移动

2）键盘事件：keydown：某个键盘按键被按下

                        keypress：某个键盘按键被按下并松开

                        keyup：某个键盘按键被松开

3）HTML事件：load：一张页面或一幅图像完成加载

                          unload：用户退出页面

                          scroll：当文档被滚动时发生的事件

                            scrollTop：返回被选元素的垂直滚动条位置

                            scrollLeft：返回被选元素的水平滚动条位置

                          resize：窗口或框架被重新调整大小

                          blur：元素失去焦点时触发

                          focus：元素获取焦点时触发

                          select：用户选取文本时触发 (<input>和<textarea>)

                          change：表单元素的内容改变时触发(<input>、<keygen>、<select>和<textarea>)

                          submit：表单提交时触发

                          reset：表单重置时触发

语法：元素节点.on + 事件类型 = 函数;

---

3、获取事件对象：

document.getElementById("id").onclick = function(even){
    var e = even || window.event;
    alert(e);
}

---

4、事件对象的属性：

1）鼠标事件对象：button：返回当事件被触发时，哪个鼠标按钮被点击

      参数0：指定鼠标左键

      参数1：指定鼠标中键

      参数2：指定鼠标右键

      clientX/Y：返回当事件被触发时鼠标指针相对于浏览器页面（或当前窗口）的水平/垂直坐标

      screenX/Y：返回当事件被触发时鼠标指针相对于屏幕的水平/垂直坐标

      pageX/Y：返回当事件被触发时鼠标指针相对于文档的左边缘/上边缘坐标

      shiftKey：返回一个布尔值，指示当事件发生时，Shift键是否被按下并保持住

      ctrlKey：返回一个布尔值，指示当事件发生时，Ctrl键是否被按下并保持住

      altKey：返回一个布尔值，指示当事件发生时，Alt键是否被按下并保持住

      metaKey：返回一个布尔值，指示当事件发生时，windows/command键是否被按下并保持住

2）键盘事件对象：keyCode：返回onkeypress事件触发键值的字符代码或onkeydown/onkeyup事件触发键的代码

      字符代码：ASCII字符的数字

      键盘代码：键盘上真实键的数字

      charCode：返回onkeypress事件触发键值的字符代码

3）target：返回事件的目标节点（触发该事件的节点）

document.getElementById("id").onclick = function(even){
    var e = even || window.event;
    var target = e.target || window.event.srcElement;
    alert(target);
}

---

5、事件流：

事件流是描述的从页面接受事件的顺序。当几个都具有事件的元素层叠在一起的时候，点击其中一个元素，并不是只有当前被点击的元素会触发事件，而是层叠在点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获

      1）事件冒泡：根据层级由里向外逐层触发

      2）事件捕获：根据层级由外向里逐层触发     

阻止事件冒泡：

function stopBubble(e){
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
}

---

6、阻止右键菜单：

document.oncontextmenu = function(){
    return false;
}

     阻止默认行为：

function preDef(e){
    if(e.preventDefault){
        e.preventDefault();
    }else{
        window.event.returnValue = false;
    }
}

---

7、事件委托：

利用冒泡的原理，把事件加到父级上，触发执行效果

     流程：1）找到当前节点的父节点或祖先节点

                2）将要添加的事件添加在找到的节点上

                3）找出触发对象，如果触发对象符合条件，进行后续操作

---

8、拖拽：

function drag(node){
    var offsetX = 0;
    var offsetY = 0;
    node.onmousedown = function(ev){
        var e = ev || window.event;
        //记录相对位置
        offsetX = e.clientX - node.offsetLeft;
        offsetY = e.clientY - node.offsetTop;
        //添加鼠标移动
        document.onmousemove = function(ev){
            var e = ev || window.event;
            node.style.left = e.clientX - offsetX + 'px';
            node.style.top = e.clientY - offsetY + 'px';
        }
     }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
}

---

9、事件监听器：

1）addEventListener()：用于向指定元素添加事件句柄

element.addEventListener(event, function, useCapture)

                               event：字符串，指定事件名

                               function：指定要事件触发时执行的函数

                               useCapture：布尔值，指定事件是否在捕获或冒泡阶段执行

                                                     true：事件句柄在捕获阶段执行

                                                     false：默认。事件句柄在冒泡阶段执行

2）removeEventListener()：用于移除由addEventListener()方法添加的事件句柄

element.removeEventListener(event, function, useCapture)

                               event：要移除的事件名称

                               function：指定要移除的函数。

                               useCapture：布尔值，指定移除事件句柄的阶段

                                                     true：在捕获阶段移除事件句柄

                                                     false：默认。在冒泡阶段移除事件句柄

3）IE事件处理函数及浏览器兼容：

 A、添加事件                                   

function addEvent(node, eventType, func){
    if(node.addEventListener){
        node.addEventListener(eventType, func, false);
    }else{
        node.attachEvent("on" + eventType, func);
    }
}

B、删除事件                                   

function removeEvent(node, eventType, func){
     if(node.removeEventListener){
        node.removeEventListener(eventType, func);
     }else{
        node.detachEvent("on" + eventType, func)
     }
}