再谈preventDefault与stopPropagation

什么是 preventDefault()

简单的来说

就是取消事件的默认动作

具体说法：

该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的* 动作）。例如，如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

preventDefault用法

preventDefault方法的起什么作用呢？比如<a href="https://www.baidu.com">百度,就是点击链接跳转页面,这是属于<p>标签的默认行为，而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。看一段代码大家就明白了：

下面来看例子

<div class="parentbox">
  我是父容器

  <a class="childbox" href="https://www.baidu.com" target="_blank">
    我是子容器
  </a>

</div>

// 子容器元素
var childBox = document.querySelectorAll('.childbox');

// 点击弹出内容
[].forEach.call(childBox, function(el){
  el.addEventListener('click', function(event){
  
     alert('我是子容器');
     
     // 阻止事件的默认行为
     // 如果不添加“event.preventDefault()”，则会弹出alert，在进行页面跳转
     event.preventDefault();
  }, false)
})

什么是 stopPropagation

简单的来说

就是不再派发事件

具体说法：

终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

stopPropagation

事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说，其目标元素都是原始元素，在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待事件从它的子级元素里冒泡上来，并且可以很方便地判断出这个事件是从哪个元素开始的。

下面来看例子

<div class="parentbox">
  我是父容器

  <p class="childbox">我是子容器</p>

</div>

// 父容器元素
var parentBox = document.querySelector('.parentbox');
// 子容器元素
var childBox = document.querySelectorAll('.childbox');


// 点击子容器弹出内容
[].forEach.call(childBox, function(el) {
  el.addEventListener('click', function(event) {
    alert('我是子容器');

    // 浏览器下阻止冒泡
    // 如果不添加“event.stopPropagation()”，会触发父容器的事件
    event.stopPropagation();
  }, false)
});

// 点击子容器弹出内容
parentBox.addEventListener('click', function(event) {

  alert('我是父容器');

}, false)