@tsingwong 2016-04-12T02:57:35.000000Z 字数 3868 阅读 887

DOM事件

DOM JavaScript

DOM事件

1. 事件流

事件流指的是描述从页面中接受事件的顺序。其中，IE的事件流是事件冒泡流，Netscape 的事件流是事件捕获流。

1.1 事件冒泡

事件冒泡，即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的节点（文档）。

1.2 事件捕获

事件捕获，不太具体的节点应该最早接收到事件，而最具体的节点最后接收到事件。（注：老版本浏览器不支持）

2. 事件处理程序

2.1 HTML事件处理程序

<input type="button" value="按钮" onlick="alert('hello')"/>
<input type="button" value="按钮2" onlick="showmessage()"/>
<script>
    function showmessage(){
        alert('hello');
        }
</script>

HTML事件的缺点：HTML代码与JS代码紧密的耦合在一起，一旦出错需要修改的地方过多。

2.2 DOM0级事件处理程序

DOM0级事件处理程序是比较传统的方式，把一个函数赋值给一个事件的处理程序属性，在传统的事件处理中经常被使用。其使用起来较为简单，且具有跨浏览器的优势。

<input type="button" value="按钮2" id="btn2"/>
<script>
    var btn 2 = document.getElementById('btn');
    // 通过DOM0级创建事件
    btn2.onclick = function(){
        alert('这是通过DOM0级添加的事件');
    ｝
    // 删除事件
    btn2.onclick = null;
</script>

2.3 DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作分别是addEventListener()和removeEventListner()。函数接受三个参数，要处理的事件名，作为事件处理程序的函数和布尔值。其中true表示在捕获阶段调用该程序，false表示在冒泡阶段调用该程序。

<input type="button" value="按钮" id="btn">
    <script type="text/javascript">
    var btn = document.getElementById('btn');
    function showMessage() {
        alert('这是通过DOM2级添加的事件');
    }
    //  DOM2级事件
    btn.addEventListener('click', showMessage, false);
    //  删除事件
    btn.removeEventListener('click', showMessage, false);
    </script>

注：之前添加要处理的事件名时都是on开头的，如onclick、onmouseover，但在DOM2级事件中不需要加on。还有就是通过addEventListener()方法创建的事件，只能通过removeEventListener()方法删除事件。

DOM0级与DOM2级都可以添加多个事件函数，将会依次运行。但HTML事件不可以添加多个事件函数。

2.4 IE事件处理程序

类似上面方法，IE也提供了两种方法分别是attachEvent()添加事件和detachEvent()删除事件，接受两个参数：事件处理程序的名称和事件处理程序的函数。

注：这里没有第三个参数的原因是IE8以及更早的浏览器版本只支持事件冒泡。支持该方法的只有IE和opera浏览器。

    <input type="button" value="按钮" id="btn">
    <script type="text/javascript">
    var btn = document.getElementById('btn');
    function showMessage() {
        alert('这是通过IE事件处理程序添加的事件');
    }
    btn.attachEvent('onclick', showMessage);
    btn.detachEvent('onclick', showMessage);
    </script>

注：此处的事件类型，也是带有on的，onclick、onmouseover等。

2.5 跨浏览器的事件处理程序

通过将添加和删除封装为对象的两个方法，分别检测对于上述方法的支持与否来选择事件处理程序。

    <input type="button" value="按钮" id="btn">
    <script type="text/javascript">
    var btn = document.getElementById('btn');
    function showMessage() {
        alert('这是通过跨浏览器事件处理程序添加的事件');
    }
    // 跨浏览器事件处理程序
    var eventUtil = {
        // 添加句柄
        addHandler: function(element, type, handler) {
            if (element.addEventListener) {
                // DOM2级事件处理程序判断
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                // IE事件处理程序判断
                element.attachEvent('on' + type, handler);
            } else {
                // DOM0级事件处理程序判断
                element['on' + type] = handler;
            }
        },
        // 删除句柄
        removeHandler: function(element, type, handler) {
            if (element.removeEventListener) {
                // DOM2级事件处理程序判断
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                // IE事件处理程序判断
                element.detachEvent('on' + type, handler);
            } else {
                // DOM0级事件处理程序判断
                element['on' + type] = null;
            }
        }
    }
    eventUtil.addHandler(btn, 'click', showMessage);
    eventUtil.removeHandler(btn, 'click', showMessage);
    </script>

注：在JS中所有点操作都可以用中括号来代替。即

index.onclick === index['onclick']

3. 事件对象

3.1 DOM中的事件对象

事件对象（Event），即在触发DOM上的事件时都会产生的一个对象。

type属性：用于获取事件类型；
target属性：用于获取事件目标；
stopPropagation()方法：用于阻止事件冒泡；
preventDefault()方法：用于阻止事件的默认行为，如超链接的跳转；

3.2 IE中的事件对象

type属性：用于获取事件类型；
srcElement属性：用于获取事件的目标；
cancleBubble属性：用于阻止事件冒泡，true表示阻止冒泡，false表示不阻止；
returnValue属性：用于阻止事件的默认行为，false表示阻止；

4. QQ面板的拖动

需要先封装一个通过类名获取节点的方法，返回一个数组。（注：getElementsBYClassName()是HTML5才出现的，IE10之前不支持）

function getByClass(clsName,parent){
  var oParent = parent?document.getElementById(parent):document,
      eles =[],
      elements = oParent.getElementsByTagName('*');
  for(var i=0,l = elements.length;i<l;i++){
    // 此处可以使用正则以获取各种形式的类名
    if (elements[i].className == clsName) {
      eles.push(elements[i]);
    }
 }
  return eles;
}

拖动过程主要分为三个步骤：
1. 在标题区域按下；
2. 在页面中移动
3. 释放鼠标时停止移动

其中鼠标按下需要调用onmousedown事件：在用户按下任何鼠标按键时出发。鼠标移动需要onmousemove事件：当鼠标指针在元素内部移动时重复地触发。鼠标释放时需要调用onmouseup事件：当用户释放鼠标按键时触发。

鼠标事件是在浏览器窗口中的特定位置发生的。位置信息保存在事件的clientX和clientY属性中，所有浏览器都支持这两种属性，他们的值表示事件发生时鼠标指针在视口中的水平坐标和垂直坐标。不包括页面滚动的距离。

5. 键盘事件

keyDown：当用户按下键盘上的 任意键 时触发，如果按住不放，会重复触发此事件。

keyPress：当用户按下键盘上的 字母键 时触发，如果按住不放，会重复触发此事件。

keyUp：当用户释放键盘上的键时触发。

event对象的keyCode属性用于得到键盘对应键的键码值。