阻止默认事件
有一些html元素默认的行为,比如说a标签,点击后有跳转动作;form表单中的submit类型的input有一个默认提交跳转事件;reset类型的input有重置表单行为。
如果你想阻止这些浏览器默认行为,JavaScript为你提供了方法。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{list-style:none;}
a{text-decoration: none}
.elist>li{
width:150px;
height:30px;
line-height:30px;
text-align:center;
border:1px solid #c00;
margin:10px;
font-size:14px;
}
.elist>.selected{
background-color:#c00;
}
</style>
</head>
<body>
<ul class="elist">
<li><a href="http://baidu.com">百度</a></li>
<li><a href="http://baidu.com">百度</a></li>
<li><a href="http://baidu.com">百度</a></li>
<li><a href="http://baidu.com">百度</a></li>
<li><a href="http://baidu.com">百度</a></li>
</ul>
</body>
<script>
//需求1:阻止超链接,点击超链接不跳转,而是alert网址
var elist = document.getElementsByClassName('elist')[0];
var link = elist.getElementsByTagName('a');
for(let i = 0;i < link.length;++i){
link[i].onclick = function(e){
e.preventDefault();
alert(link[i].href);
}
}
</script>
</html>
默认事件没有了。
既然return false 和 e.preventDefault()都是一样的效果,那它们有区别吗?当然有。
仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。
在DOM2中return false是不能阻止默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{list-style:none;}
a{text-decoration: none}
.elist>li{
width:150px;
height:30px;
line-height:30px;
text-align:center;
border:1px solid #c00;
margin:10px;
font-size:14px;
}
.elist>.selected{
background-color:#c00;
}
</style>
</head>
<body>
<ul class="elist">
<li><a href="http://baidu.com">百度</a></li>
<li><a href="http://baidu.com">百度</a></li>
<li><a href="http://baidu.com">百度</a></li>
<li><a href="http://baidu.com">百度</a></li>
<li><a href="http://baidu.com">百度</a></li>
</ul>
</body>
<script>
//需求1:阻止超链接,点击超链接不跳转,而是alert网址
var elist = document.getElementsByClassName('elist')[0];
var link = elist.getElementsByTagName('a');
for(let i = 0;i < link.length;++i){
//DOM2方式
link[i].addEventListener('click',function(e){
alert(link[i].href);
return false;
})
}
</script>
</html>
事件委托
1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,只定义一个事件完成类似功能,不需要为每个元素加一个事件。
也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。
好处呢:1,提高性能。
我们可以看一个例子:需要触发每个li来改变他们的背景颜色(常规思路可能是为每个LI元素添加一个onclick事件,但比较耗性能)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{list-style:none;}
a{text-decoration: none}
.elist>li{
width:150px;
height:30px;
line-height:30px;
text-align:center;
border:1px solid #c00;
margin:10px;
font-size:14px;
}
.elist>.selected{
background-color:#c00;
}
</style>
</head>
<body>
<ul class="elist">
<li><a href="http://baidu.com">百度</a></li>
<li><a href="http://baidu.com">百度</a></li>
<li><a href="http://baidu.com">百度</a></li>
<li><a href="http://baidu.com">百度</a></li>
<li><a href="http://baidu.com">百度</a></li>
</ul>
</body>
<script>
//需求2:只定义一个事件,完成类似功能,事件定义在父元素上,事件委托
var elist = document.getElementsByClassName('elist')[0];
elist.onclick = function(e){
if(e.target.nodeName == 'LI'){
if(e.target.className == 'selected')
e.target.classList.remove('selected');
else
e.target.classList.add('selected');
}
}
</script>
</html>
这样只给父元素添加事件,然后只需要判断点击的是否为LI 元素,如果是,则为其改变样式
冒泡和捕获都是DOM2中新增的概念,所谓DOM0其实就是注册一个onclick事件,形式一般为在html元素中加一个οnclick=""或者在js中onclick = function(){}的形式。DOM2形式为addEveneListener('click',function(){})
冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<h2>Javascript<span>事件</span></h2>
</div>
</body>
<script>
//定义DOM2事件
var box = document.getElementById('box');
var h2 = document.getElementsByTagName('h2')[0];
var span = document.getElementsByTagName('span')[0];
span.addEventListener('click',function(e){
alert('span');
//只适用DOM2
//e.stopPropagation();
});
h2.addEventListener('click',function(){
alert('h2');
});
box.addEventListener('click',function(){
alert('box');
});
</script>
</html>
此时点击span,会依次弹出span,h2,box,这就是浏览器默认的冒泡事件,在DOM2中如何阻止呢?将注释删除,即可阻止冒泡事件
捕获
就是和冒泡顺序相反执行,从子元素->父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<h2>Javascript<span>事件</span></h2>
</div>
</body>
<script>
//定义DOM2事件
var box = document.getElementById('box');
var h2 = document.getElementsByTagName('h2')[0];
var span = document.getElementsByTagName('span')[0];
span.addEventListener('click',function(e){
alert('span');
// //只适用DOM2
// e.stopPropagation();
});
h2.addEventListener('click',function(){
alert('h2');
},true);
box.addEventListener('click',function(){
alert('box');
},true);
</script>
</html>