您的位置：首页 > 其它

冒泡事件、默认事件、事件委托、事件监听和事件捕获

2017-06-27 20:42 225 查看

知识点：

1. 冒泡事件；

2. 默认事件；

3. 事件委托；

4. 事件监听；

5. 事件捕获；

冒泡事件：

个人理解，以点击事件为例说明，在父子元素中都有点击事件，当仅获取子元素的点击事件时，这时父元素的点击事件也会发生，这种情况是在js中不想要的，所以我们要阻止冒泡事件。

函数效果：

1：点击子元素是父子元素同时出现的效果。

2：阻止父元素的事件效果。

函数思路：

1：构建一个父子元素div，同时给div添加事件；

2：点击子div查看事件效果；

3：阻止冒泡事件；

点击粉色div查看事件的效果这里为了视觉效果我使用console.warn(‘big’)；

<script>
var oSmall=document.getElementById('small');
oSmall.onclick=function(e){
console.warn('small')
</script>

这里我想点击small div时出现一个 console.warn(‘small’)；但是由于父元素同时也有点击事件，当点击small div同时触发了其父元素的点击事件，所以才会出现上图中的现象，这在开发中不是我们想要的结果所以要阻止冒泡事件，

阻止冒泡事件的方法：

1：e.stopPropagation()；//w3c兼容；

2：event.returnValue = false;//IE兼容；

<script>
var oSmall=document.getElementById('small');
oSmall.onclick=function(e){
console.error('small')
var e = e || window.event;
if ( e && e.stopPropagation ){
e.stopPropagation();
}else{
event.cancelBubble = true;
}
}
</script>

这里为了视觉效果我用 console.error(‘small’)，多次点击效果如图，

这里已经阻止了冒泡事件。

默认事件

像链接

<a>

，提交按钮

<input type=”submit”>

这样的有自己默认的事件。如

<a>

有默认的跳转事件，但是在实际的应用中可能当点击时用不到这种默认的事件时，这种默认事件就会带来麻烦，所以要阻止默认事件的发生。

知识点：

1：w3c的方法是e.preventDefault()；

2：IE则是使用event.returnValue = false;

函数的效果：当点击delete时不会发生跳转；

<a href="http://www.taobao.com" id="post"><b border:1px solid red>delete</b></a>

delete

函数的思路：

1：创建一个a链接；

2：阻止默认事件；

<script>
var oA=document.getElementById('post');
oA.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}
</script>

这里还有两种方法可以实现，一种时直接在点击事件结束时添加retrue

false还有一种时直接在herf里面加JavaScript：0；这样也是可以的。

事件的委托

事件委托在JS中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。（简单来说就是可以把多个子元素的事件添加给其父元素来实现效果）；

知识点：

event.srcElement和event.target

IE:有srcElement属性，没有target属性。

firefox:有target属性，没有srcElement属性。

event.srcElement和event.target的作用是一样的，获取事件作用的元素。

IE下的event.srcElement=firefox下的event.target；

函数实现效果：

给有序列表添加背景颜色，同时点击按钮增加子元素同时子元素有添加背景的效果；

函数思路：

1：首先构建一个html的ul li架构和点击按钮，

2：用原生的js来鼠标划过时给ul li 添加背景颜色，

3：点击按钮动态添加 li；

4：让新添加的了li 元素同时有鼠标划过时添加背景颜色的效果；

5：注意事项。

hello

hello

hello

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<button type="" id="btn">create</button>
<ul id="list">
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</body>
</html>

下面是js：

<script>
var oList=document.getElementById('list');
var aLi=document.getElementsByTagName('li');
var oBtn=document.getElementById('btn')
oBtn.onclick=function(){
var li =document.createElement('li');
li.innerHTML='new';
oList.appendChild(li);
}
oList.onmouseover=function(e){
var e=e||window.event;
var target=e.srcElement||e.target;
// alert('target.nodeName')
if (target.nodeName.toLowerCase='li') {
target.style.backgroundColor='red'
}
}
oList.onmouseout=function(e){
var e=e||window.event;
var target=e.srcElement||e.target;
// alert('target.nodeName')
if (target.nodeName.toLowerCase='li') {
target.style.backgroundColor='';
}
}
</script>

这里要注意的就是IE兼容问题。上面已经做了兼容。

事件监听

函数的效果：点击一个div，触发两个点击事件；

函数思路：

1.新建一个HTML框架，新定义一个div；

2.给div一个点击事件；让其一次alert两个不同的数值；

这里在原有的基础上做了函数的分装，下面是直接分装完成后的函数；

function bind(elem,e,fun,type){
if (elem.attachEvent) {
elem.attachEvent('on'+e,fun,type)
}else{
elem.addEventListener(e,fun,type);
}
}
bind(oBox,'click',function(){
alert('hello')
},false)
bind(oBox,'click',function(){
alert('hello world')
},false)

上面的if判断是处理兼容问题；

事件捕获：

说到事件捕获我第一事件想到的就冒泡事件，和冒泡事件相反捕获事件，以点击事件为例，父子元素同时都有点击事件时且事件监听时我们点击父元素时同时也会触发子元素的点击事件。这种现象同样和冒泡事件一样不是我们想要的，那么怎么解决捕获事件呢？

首先我们要知道怎样才能会出现捕获事件，当我们给同时给子元素和父元素添加监听事件时，这时就会出现捕获事件。

怎么解决？

上面事件监听时有一个分装好的函数：

function bind(elem,e,fun,type){
if (elem.attachEvent) {
elem.attachEvent('on'+e,fun,type)
}else{
elem.addEventListener(e,fun,type);
}
}

上面函数的 elem是添加监听事件的元素，e是事件，fun是函数function（）{}而type是状态true or false；这里的type是true时会出现捕获事件，false时会出现冒泡事件；所以处理捕获事件的方法会就很简单了，上面已经提到了阻止冒泡事件，这里只需要把捕获事件变成冒泡事件然后在阻止冒泡事件就可以了；

<script>
var oBig=document.getElementById('big');
var oMid=document.getElementById('mid');
var oSmall=document.getElementById('small');
//事件监听分装函数
function bind(elem,e,fun,type){
if (elem.attachEvent) {
elem.attachEvent('on'+e,fun,type)
}else{
elem.addEventListener(e,fun,type);
}
}
bind(oBig,'click', function(e) {
var e = e || window.event;
if ( e && e.stopPropagation ){
e.stopPropagation();
}else{
event.cancelBubble = true;
}
alert('1');
},false)
bind(oMid,'click', function(e) {
var e = e || window.event;
if ( e && e.stopPropagation ){
e.stopPropagation();
}else{
event.cancelBubble = true;
}
alert('2');
},false)
bind(oSmall,'click', function(e) {
var e = e || window.event;
if ( e && e.stopPropagation ){
e.stopPropagation();
}else{
event.cancelBubble = true;
}
alert('3');
},false)
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航