dom事件

dom事件级别：

dom0：DOM0就是直接通过 onclick写在html里面的事件

<input onclick="alert(1)" />

dom2：通过addEventListener绑定的事件

element.addEventListener("click",function(){},false)

dom3：对dom2的扩展，新添加了一些事件

element.addEventListener("keyup",function(){},false)

dom事件模型：捕获，冒泡

//捕获
element.addEventListener("click",function(){},true)

//冒泡
element.addEventListener("click",function(){},false)

dom事件流：捕捉，目标，冒泡

捕捉阶段 
当某个事件被触发时，浏览器会找到涉及的元素。涉及的元素称为目标。浏览器会找出body元素和目标之间所有的元素并分别检查它们，看其有没有事件绑定。浏览器会先触发外层事件的处理器，最后才会轮到目标的事件处理器。

目标阶段 
当捕捉阶段完成后，浏览器会触发目标元素上任何已添加的事件类型监听器，这里的先后顺序是按照事件定义的先后顺序来的。

冒泡阶段 
冒泡阶段的顺序与捕捉阶段的顺序刚好相反，在此阶段，浏览器会优先处理目标的事件处理器，然后一层层往外处理其余的事件处理器。

事件捕获的具体流程

window -> document -> html -> body -> ... -> 目标元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Event</title>
  </head>
  <body>
      <button id="ev">流程</button>
      <script type="text/javascript">
        var ev = document.getElementById('ev');

        ev.addEventListener('click', function (e) {
            console.log('ev captrue');
        }, true);

        window.addEventListener('click', function (e) {
            console.log('window captrue');
        }, true);

        document.addEventListener('click', function (e) {
            console.log('document captrue');
        }, true);

        document.documentElement.addEventListener('click', function (e) {
            console.log('html captrue');
        }, true);

        document.body.addEventListener('click', function (e) {
            console.log('body captrue');
        }, true);
      </script>
  </body>
</html>

事件冒泡流程与事件捕获流程刚好相反。

event常见应用

event.preventDefault() //阻止默认行为
event.stopPropagetion() //阻止冒泡
event.stopImmediatePropagation()  //同一元素绑定多个事件，如果某个事件中执行了改方法，其余事件不再执行
event.target  //返回触发事件的元素
event.currentTarget  //返回绑定事件的元素

自定义事件

两种方式：new Event 和 new CustomEvent

//new Event方式自定义事件

var myev = new Event("test");
targetEl.addeventListener("test",function(){},false);
targetEl.dispatchEvent(myev);

//如需传递额外的对象，需要使用new CustomEvent

var customEv = new CustomEvent('custom',{
  "detail" : {  //可携带额外的数据
    age : 18
  }
});
targetEl.addeventListener("customEv",function(){},false)
targetEl.dispatchEvent(custom)
posted @ 2018-09-13 15:54  枫叶布  阅读(181)  评论(0)    收藏  举报