事件 - Sukksa's Blog

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

事件的冒泡#

事件的冒泡（Bubble）

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
- 可以将事件对象的 cancelBubble 设置为true，即可取消冒泡，这个需要设置在子元素的事件中，并且大多数都是设置的可以冒泡，除了某些函数默认不冒泡 event.cancelBubble = true;

如果在父元素里面设置了一个事件,而在子元素中也有相同的事件,不想要父元素的事件在子元素的范围内出现时，可以通过多种方式设置取消冒泡

event.cancelBubble = true
event.stopPropagation();

事件的委派#

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

例：为每一个超链接都绑定一个单击响应函数，这里我们为每一个超链接都绑定了一个单击响应函数，这种中操作比较麻烦，而且这些操作只能为已有的超链接设置事件，而新添加超链接必须重新绑定

1
//获取所有的a
2
var allA = document.getElementsByTagName("a");
3
//遍历
4
for(var i=0 ; i<allA.length ; i++){
5
  allA[i].onclick = function(){
6
    alert("我是a的单击响应函数！");
7
  };
8
}

我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素

1
//假设所以的a元素都是由一个父元素包裹，获取a的父元素
2
var parent=document.getElementById("parent");
3
//为a的父元素绑定事件
4
parent.onclick=function(){
5
    alert("我是a的单击响应函数！");
6
}

12345但是这个例子需要判断如果触发的对象是我们期望的元素,就执行该代码,否则不执行,因为如果点击的是a元素之外的其它地方就不触发弹窗效果,这个时候需要使用target 事件对象中的event中的target表示的触发事件的对象

1
parent.onclick=function(event){
2
    event=event||window.event;
3
    if(event.target.nodeName==="A"){  //nodeName返回的标签名全为大写
4
        alert("我是a的单击响应函数！");
5
    }
6
}

事件的绑定#

绑定事件#

使用对象.事件 = 函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
使用addEventListener() （不支持IE8）可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
- 参数： 1.事件的字符串，不要on （onclick -> click） 2.回调函数，当事件触发时该函数会被调用 3.是否在捕获阶段触发事件，需要一个布尔值，true表示事件在捕获阶段执行，flase表示在冒泡阶段执行，默认值为false(可选)，如果想要这两个事件都可以在同一个对象上发生必须添加两次事件
```
1
  btn.addEventListener("click",function(){
2
    alert(1);
3
  },false);
4

5
  btn.addEventListener("click",function(){
6
    alert(2);
7
  },false);
```

事件

事件的冒泡#

事件的委派#

事件的绑定#

绑定事件#

文章分享