11.25 冒泡事件 form表单事件

事件2
onselsect 在文本框中的文本被选中时发生
onsubmint 在表单中的提交按钮被点击时触发
onreset 在表单中的重置按钮被点击时触发
onerror 在文档或图像加载中发生错误时被触发
阻止默认事件 preventDefault() 低浏览器
        return flase;

阻止冒泡事件: cancelBubble=true 低浏览器
      stopPropagetion()

案例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div{
200px;
height: 200px;
background: red;
position: relative;
}
#box{
display: block;
100px;
height: 100px;
background: #f0f;
position: absolute;
top:50%;
left:50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
<script>
window.onload=function(){
var ipt =document.getElementById('ipt');
ipt.onselect = function () {
console.log(ipt.value)
};
var formBox = document.getElementById('formBox');
var skip = document.getElementById('skip');
// 阻止默认事件
formBox.onsubmit=function (event) {
if(event){
event.preventDefault()
}else{
return false;
}
};
formBox.onreset = function (e) {
if(e){
e.preventDefault()
}else{
return false;
}
};
skip.onclick = function (e) {
e = e ||window.event;
e.preventDefault()
// if(e){
// e.preventDefault()
// }else{
// return false;
// }
};

//阻止冒泡
var div = document.getElementById('div');
var box = document.getElementById('box');
box.onclick=function(e){
if(e){
e.stopPropagation()
}else{
cancelBubble = true;
}
console.log('我是span')
};
div.onclick=function(){

console.log('我是div');
}
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="skip">百度</a><br/>
<input id="ipt" type="text">
<form action="" id="formBox">
账号:<input type="text"><br/>
密码:<input type="password"><br/>
<input type="submit">
<input type="reset">
</form>
<div id="div">
<span id="box"></span>
</div>
</body>
</html>
原文地址:https://www.cnblogs.com/xiaoxiongv1/p/7894744.html