event.stopPropagation与event.preventDefault的区别

2、event.preventDefault

attachEvent与addEventListener的区别?

  • 参数个数不相同,这个最直观,addEventListener有三个参数,attachEvent只有两个,attachEvent添加的事件处理程序只能发生在冒泡阶段,addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理(我们一般为了浏览器兼容性都设置为冒泡阶段)
  • 第一个参数意义不同,addEventListener第一个参数是事件类型(比如click,load),而attachEvent第一个参数指明的是事件处理函数名称(onclick,onload)
  • 事件处理程序的作用域不相同,addEventListener的作用域是元素本身,this是指的触发元素,attachEvent事件处理程序会在全局变量内运行,this是window,所以刚才例子才会返回undefined,而不是元素id
  • 为一个事件添加多个事件处理程序时,执行顺序不同,addEventListener添加会按照添加顺序执行,而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的,但是添加的多了就无规律了),所以添加多个的时候,不依赖执行顺序的还好,若是依赖于函数执行顺序,最好自己处理,不要指望浏览器

  停止事件的传播,阻止它被分配到其它Dom节点。但是不能阻止同一Dom节点上的其它事件句柄被调用。

有如下代码,要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
    var ct = document.querySelector('.ct');
    ct.addEventListener('click', function(e){
        console.log(e.target.innerText);
    });
</script>

1、event.stopPropagation

DOM0 事件和DOM2级在事件监听使用方式上有什么区别?

Dom0级事件处理程序是将一个函数赋值给一个事件处理程序属性,而通过将事件处理程序设置为null删除绑定在元素上的事件处理程序。这种方法无法给一个事件添加多个事件处理程序,后面的程序会覆盖前面的程序。

// 添加事件处理程序
var btn=document.querySelector("#btn");
btn.onclick=function () {
    alert(this.id);
}
// 删除事件处理程序
btn.onclick=null;

而Dom2级定义了addEventListener()removeEventListener()金沙官网线上,用于处理指定和删除事件处理程序。所有Dom节点都包含这两个方法,并且它们都接受3个参数,要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。

var btn=document.querySelector("#btn");
var handler=function(){
    alert(this.id);
}
// 指定事件处理程序
btn.addEventListener("click",handler,false);
// 删除事件处理程序
btn.removeEventListener("click",handler,false);

但是通过removeEventListener()函数来移除事件处理程序时,移除时的参数必须与添加处理程序时使用的参数相同,这也意味着通过addEventListener()添加的匿名函数将无法移除。如:

var btn=document.querySelector("#btn");
// 指定事件处理程序
btn.addEventListener("click",function(){
    alert(this.id);
},false);
// 删除事件处理程序,不会生效
btn.removeEventListener("click",function(){
    alert(this.id);
},false);

二者区别:

  • 使用Dom2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序,而Dom0级为一个事件添加多个事件处理程序时,后面的程序会覆盖前面的。

  阻止与事件关联的默认动作。

补全代码,要求:当鼠标放置在li元素上,会在img-preview里展示当前li元素的data-img对应的图片。

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
var ct = document.querySelector('.ct'),
    li = ct.querySelectorAll('li'),
    imgPreview = document.querySelector('.img-preview');

for(var i=0; i<li.length; i++){
    li[i].addEventListener('mouseenter', function(){
       var dataImg = this.getAttribute('data-img');
       imgPreview.innerHTML = '![](' + dataImg + ')'
    });
};
</script>

本文由金沙官网线上发布于Web前端,转载请注明出处:event.stopPropagation与event.preventDefault的区别

您可能还会对下面的文章感兴趣: