JS事件

在DOM中定义了一些事件， 而响应某个事件的函数就叫事件处理程序（或事件侦听器）。
事件处理程序的名字一般以“on”开头，例如：onclick等
事件流指的是页面中接收事件的顺序，IE，火狐和chrome浏览器都是事件冒泡，

是事件冒泡指的是事件最开始由最具体的元素接收，然后逐级向上传播到不具体的节点。而事件捕获则正好相反

        window.onload = function () {
            var aUl = document.getElementById("bubble");
            var aLi = aUl.getElementsByTagName("li");

            //正常处置方式
            //for (var i = 0; i < aLi.length; i++) {
            //    aLi[i].onmouseover = function () {
            //this指向当前元素
            //        this.style.backgroundColor = "blue";
            //    };
            //    aLi[i].onmouseout = function () {
            //        this.style.backgroundColor = "";
            //    }
            //}
            //事件委托实现方式，去掉for循环，提高性能
            aUl.onmouseover = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if (target.nodeName.toLowerCase() == "li") {
                    target.style.background = "blue";
                }
            }
            aUl.onmouseout = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if (target.nodeName.toLowerCase() == "li") {
                    target.style.background = "";
                }
            }
        };

 <div>
    <ul id = "bubble">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

冒泡事件

//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比）
        function showMsg(obj, e) {
            alert(obj.id);
            stopBubble(e)
        }
        //阻止事件冒泡函数
        function stopBubble(e) {
            if (e && e.stopPropagation)
                e.stopPropagation()
            else
                //阻止冒泡
                window.event.cancelBubble = true
        }

<div οnclick="showMsg(this,event)" id="outSide" style="width: 100px; height: 100px; background: #000; padding: 50px">
        <div οnclick="showMsg(this,event)" id="inSide" style="width: 100px; height: 100px; background: #CCC"></div>
    </div>

EVENT对象，通过event对象来获取到大量当前事件相关的信息：

  type (String) — 事件的名称
  target (node) — 事件起源的DOM节点
  currentTarget?(node) — 当前回调函数被触发的DOM节点（后面会做比较详细的介绍）
  bubbles (boolean) — 指明这个事件是否是一个冒泡事件（接下来会做解释）
  preventDefault(function) — 这个方法将阻止浏览器中用户代理对当前事件的相关默认行为被触发。比如阻止<a>元素的click事件加载一个新的页面
  cancelable (boolean) — 这个变量指明这个事件的默认行为是否可以通过调用event.preventDefault来阻止。
  stopPropagation (function) — 取消事件的进一步捕获或冒泡，bubbles为true使用这个方法
  eventPhase：返回一个数字，表示事件目前所处的阶段，0为事件开始从DOM表层向目标元素传播，1为捕获阶段，2为事件到达目标元素，3为冒泡阶段。

添加、删除事件

//指定和删除事件处理程序的操作：addEventListener()和removeEventListener()
//参数：事件名，作为事件处理程序的函数，布尔值（true表示捕获阶段调用事件处理程序，false表示冒泡阶段）
var btn = document.getElementById('myDiv');
btn.addEventListener('click', function () {
    console.log(this.id);
}, false);

//鼠标事件
click：当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。
dbclick：用户双击鼠标时触发
mousedown：当用户按下鼠标任意一个键都会触发，这个事件是不能够通过键盘触发的。
mousemove：当鼠标在某元素周围移动时重复触发，该事件不能通过键盘事件触发。
mouseout：当鼠标离开元素时触发，这个事件不能通过键盘触发。
mouseover：当鼠标进入元素时触发，这个事件不能够通过键盘触发。
mouseenter：类似“mouseover”，但不冒泡，而且当光标移到后代元素上不会触发。
mouseleave：类似“mouseout”，但不冒泡。在元素上方是不触发。
mouseup：当用户释放鼠标按键时触发，不能够通过键盘触发。
//拖拉事件
drag事件: 源对象被拖拉过程中触发
dragstart事件: 在用户开始用鼠标拖拉某个对象时触发
dragend事件: 在结束拖拉时触发
dragenter事件:在源对象拖拉进目标对象后，在目标对象上触发。
dragleave事件: 在源对象离开目标对象后，在目标对象上触发
dragover事件: 在源对象拖拉过另一个对象上方时，在后者上触发。
drop事件:当源对象被拖拉到目标对象上方，用户松开鼠标时，在目标对象上触发

1

 

//鼠标事件
click：当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。
dbclick：用户双击鼠标时触发
mousedown：当用户按下鼠标任意一个键都会触发，这个事件是不能够通过键盘触发的。
mousemove：当鼠标在某元素周围移动时重复触发，该事件不能通过键盘事件触发。
mouseout：当鼠标离开元素时触发，这个事件不能通过键盘触发。
mouseover：当鼠标进入元素时触发，这个事件不能够通过键盘触发。
mouseenter：类似“mouseover”，但不冒泡，而且当光标移到后代元素上不会触发。
mouseleave：类似“mouseout”，但不冒泡。在元素上方是不触发。
mouseup：当用户释放鼠标按键时触发，不能够通过键盘触发。
//拖拉事件
drag事件: 源对象被拖拉过程中触发
dragstart事件: 在用户开始用鼠标拖拉某个对象时触发
dragend事件: 在结束拖拉时触发
dragenter事件:在源对象拖拉进目标对象后，在目标对象上触发。
dragleave事件: 在源对象离开目标对象后，在目标对象上触发
dragover事件: 在源对象拖拉过另一个对象上方时，在后者上触发。
drop事件:当源对象被拖拉到目标对象上方，用户松开鼠标时，在目标对象上触发

1

 

//鼠标事件
click：当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。
dbclick：用户双击鼠标时触发
mousedown：当用户按下鼠标任意一个键都会触发，这个事件是不能够通过键盘触发的。
mousemove：当鼠标在某元素周围移动时重复触发，该事件不能通过键盘事件触发。
mouseout：当鼠标离开元素时触发，这个事件不能通过键盘触发。
mouseover：当鼠标进入元素时触发，这个事件不能够通过键盘触发。
mouseenter：类似“mouseover”，但不冒泡，而且当光标移到后代元素上不会触发。
mouseleave：类似“mouseout”，但不冒泡。在元素上方是不触发。
mouseup：当用户释放鼠标按键时触发，不能够通过键盘触发。
//拖拉事件
drag事件: 源对象被拖拉过程中触发
dragstart事件: 在用户开始用鼠标拖拉某个对象时触发
dragend事件: 在结束拖拉时触发
dragenter事件:在源对象拖拉进目标对象后，在目标对象上触发。
dragleave事件: 在源对象离开目标对象后，在目标对象上触发
dragover事件: 在源对象拖拉过另一个对象上方时，在后者上触发。
drop事件:当源对象被拖拉到目标对象上方，用户松开鼠标时，在目标对象上触发

1

 

//鼠标事件
click：当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。
dbclick：用户双击鼠标时触发
mousedown：当用户按下鼠标任意一个键都会触发，这个事件是不能够通过键盘触发的。
mousemove：当鼠标在某元素周围移动时重复触发，该事件不能通过键盘事件触发。
mouseout：当鼠标离开元素时触发，这个事件不能通过键盘触发。
mouseover：当鼠标进入元素时触发，这个事件不能够通过键盘触发。
mouseenter：类似“mouseover”，但不冒泡，而且当光标移到后代元素上不会触发。
mouseleave：类似“mouseout”，但不冒泡。在元素上方是不触发。
mouseup：当用户释放鼠标按键时触发，不能够通过键盘触发。
//拖拉事件
drag事件: 源对象被拖拉过程中触发
dragstart事件: 在用户开始用鼠标拖拉某个对象时触发
dragend事件: 在结束拖拉时触发
dragenter事件:在源对象拖拉进目标对象后，在目标对象上触发。
dragleave事件: 在源对象离开目标对象后，在目标对象上触发
dragover事件: 在源对象拖拉过另一个对象上方时，在后者上触发。
drop事件:当源对象被拖拉到目标对象上方，用户松开鼠标时，在目标对象上触发

1

 

//鼠标事件
click：当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。
dbclick：用户双击鼠标时触发
mousedown：当用户按下鼠标任意一个键都会触发，这个事件是不能够通过键盘触发的。
mousemove：当鼠标在某元素周围移动时重复触发，该事件不能通过键盘事件触发。
mouseout：当鼠标离开元素时触发，这个事件不能通过键盘触发。
mouseover：当鼠标进入元素时触发，这个事件不能够通过键盘触发。
mouseenter：类似“mouseover”，但不冒泡，而且当光标移到后代元素上不会触发。
mouseleave：类似“mouseout”，但不冒泡。在元素上方是不触发。
mouseup：当用户释放鼠标按键时触发，不能够通过键盘触发。
//拖拉事件
drag事件: 源对象被拖拉过程中触发
dragstart事件: 在用户开始用鼠标拖拉某个对象时触发
dragend事件: 在结束拖拉时触发
dragenter事件:在源对象拖拉进目标对象后，在目标对象上触发。
dragleave事件: 在源对象离开目标对象后，在目标对象上触发
dragover事件: 在源对象拖拉过另一个对象上方时，在后者上触发。
drop事件:当源对象被拖拉到目标对象上方，用户松开鼠标时，在目标对象上触发

1

 

//鼠标事件
click：当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。
dbclick：用户双击鼠标时触发
mousedown：当用户按下鼠标任意一个键都会触发，这个事件是不能够通过键盘触发的。
mousemove：当鼠标在某元素周围移动时重复触发，该事件不能通过键盘事件触发。
mouseout：当鼠标离开元素时触发，这个事件不能通过键盘触发。
mouseover：当鼠标进入元素时触发，这个事件不能够通过键盘触发。
mouseenter：类似“mouseover”，但不冒泡，而且当光标移到后代元素上不会触发。
mouseleave：类似“mouseout”，但不冒泡。在元素上方是不触发。
mouseup：当用户释放鼠标按键时触发，不能够通过键盘触发。
//拖拉事件
drag事件: 源对象被拖拉过程中触发
dragstart事件: 在用户开始用鼠标拖拉某个对象时触发
dragend事件: 在结束拖拉时触发
dragenter事件:在源对象拖拉进目标对象后，在目标对象上触发。
dragleave事件: 在源对象离开目标对象后，在目标对象上触发
dragover事件: 在源对象拖拉过另一个对象上方时，在后者上触发。
drop事件:当源对象被拖拉到目标对象上方，用户松开鼠标时，在目标对象上触发