【第二届青训营-寒假前端场】- JavaScript事件的理解

91 阅读1分钟

事件:

document.addEventListener(event, function, useCapture)

useCapture :可选。布尔值,指定事件是否 在捕获或冒泡阶段执行。 可能值:

true - 事件句柄在捕获阶段执行 捕获是从document到真正的事件目标

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

事件冒泡:

JS中当出发某些具有冒泡性质的事件时,首先在触发元素寻找是否有相应的注册事件,如果没有再继续向上级父元素寻找是否有相应的注册事件作出相应,这就是事件冒泡。

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}

事件委托:

利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有:1.减少DOM操作,提高性能。2.随时可以添加子元素,添加的子元素会自动有相应的处理事件。

window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){  // 这样的方式不行   因为 点击这个url也会触发事件   但是我们只要点击li才能触发
        alert(123);
    }
}
window.onload = function(){
  var oUl = document.getElementById("ul1");
  oUl.onclick = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == 'li'){
         alert(123);
         alert(target.innerHTML);
    }
  }
}

事件委托优点:

1.减少内存消耗,不必为大量元素绑定事件 2.为动态添加的元素绑定事件

事件委托的缺点:

1.部分事件如 focus(获取焦点)、blur 等无冒泡机制,所以无法委托。 2.事件委托有对子元素的查找过程,委托层级过深,可能会有性能问题 3.频繁触发的事件如 mousemove、mouseout、mouseover等,不适合事件委托

取消默认事件

原生js取消事件冒泡 w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;

vue.js取消事件冒泡

<div @click.stop="doSomething($event)">vue取消事件冒泡</div>

vue.js阻止默认事件

<div @click.prevent="doSomething($event)">vue阻止默认事件</div>

事件是异步的!

事件(Event)是指一种用于处理在网页的生命周期中发生的各种事件的异步调用的设计模式,也指一些不同种类事件的命名、描述和使用。

异步体现在异步触发上!

  1. 行为触发 (异步)
  2. 事件处理 (同步)

\