事件的传播机制？
事件分为2种传播机制（事件流）：
1. 冒泡 （IE提出的事件流是冒泡）
2. 捕获 （谷歌和火狐提出的事件流是捕获）
什么是冒泡事件？
1:冒泡事件是由微软公司提出的，从触发底部事件一直延续到最外层，这个现象就是冒泡！
2:只有嵌套关系的标签和都是一样的事件才可能产生冒泡！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width:400px;
height: 400px;
background: red;
}
p{
width:200px;
height: 200px;
background: yellow;
}
span{
display: block;
width:100px;
height: 100px;
background: yellowgreen;
}
</style>
</head>
<body>
<div>
<p>
<span>
<button>点击
</button>
</span>
</p>
</div>
</body>
<script type="text/javascript">
var obtn=document.getElementsByTagName('button')[0];
var osapn=document.getElementsByTagName('span')[0];
var op=document.getElementsByTagName('p')[0];
var odiv=document.getElementsByTagName('div')[0];
obtn.onclick=function(){
alert('我是按钮')
}
osapn.ondblclick=function(){
alert('我是span')
}
op.ondblclick=function(){
alert('我是p')
}
odiv.onclick=function(){
alert('我是div')
}
</script>
</html>
阻止冒泡事件的方法：
evt.stopPropagation() 无法阻止 IE 低版本事件冒泡； evt.cancelBubble = true; 兼容 IE 低版本冒泡；
阻止冒泡事件的兼容写法：
if(evt
.cancelBubble
){
evt
.cancelBubble
=true;
}else{
evt
.stopPropagation();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width:400px;
height: 400px;
background: red;
}
p{
width:200px;
height: 200px;
background: yellow;
}
span{
display: block;
width:100px;
height: 100px;
background: yellowgreen;
}
</style>
</head>
<body>
<div>
<p>
<span>
<button>点击
</button>
</span>
</p>
</div>
</body>
<script src="js/stop.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var obtn=document.getElementsByTagName('button')[0];
var osapn=document.getElementsByTagName('span')[0];
var op=document.getElementsByTagName('p')[0];
var odiv=document.getElementsByTagName('div')[0];
obtn.onclick=function(evt){
var e=evt||window.event;
alert('我是按钮');
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
osapn.onclick=function(evt){
var evt=evt||window.event;
alert('我是span');
}
op.onclick=function(evt){
var evt=evt||window.event;
alert('我是p');
}
odiv.onclick=function(evt){
var evt=evt||window.event;
alert('我是div');
}
</script>
</html>
封装阻止冒泡事件方法：
function stopBubble(event
){
if(event
.stopPropagation
){
event
.stopPropagation();
}else{
event
.cancelBubble
= true;
}
}
什么是event？
event存在的环境是绑定事件中；event是一个对象，代表事件的状态；event == evet == evt == e;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>点击
</button>
</body>
<script type="text/javascript">
var obtn=document.getElementsByTagName('button')[0];
obtn.onclick=function(evt){
var e=evt||window.event;
}
</script>
</html>
event的兼容写法：
var e=evt||window.event;
DOM事件处理程序：
简单来说就是所有的事件叫DOM0事件。 举例： onclick,onmouseover,onmouseout…DOM就是文档对象模型，0是指这个事件的最初版本
DOM2事件处理程序：
addEventListener(事件，函数，布尔值) 绑定事件方法 IE不支持 举例： addEventListener('click',function(){ },false)是 true 的话是捕获事件，是 false 的话是冒泡事件；removeEventListener() 删除事件方法 IE不支持
IE的DOM2方法：
attachEvent('事件'，函数) detachEvent('事件'，函数)
事件委托
利用冒泡的原理，把事件加到父级上，触发执行效果。 把该是自己的事件交给其他标签来完成，就是事件委托！ 把li的事件委托给父元素ul来完成。 事件委托只能是把子元素的事件委托给父元素。
事件委托的优点：
提高代码性能，运行速度加快节省内存空间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
var oul=document.getElementsByTagName('ul')[0];
var oli=oul.getElementsByTagName('li');
oul.onmouseover=function(evt){
var e=evt||window.event;
var t=e.target||e.srcElement;
console.log(t)
console.log(t.nodeName)
if(t.nodeName.toLocaleLowerCase()=='li'){
t.style.background='red';
}
}
oul.onmouseout=function(evt){
var e=evt||window.event;
var t=e.target||e.srcElement;
if(t.nodeName.toLocaleLowerCase()=='li'){
t.style.background='';
}
}
</script>
</html>
事件源的兼容
target 是event对象下面的属性，这个属性指向事件源 event.target 是w3c的写法，ie浏览器不支持 event.srcElement 这是IE的写法(兼容低版本IE)
兼容写法 var targt=e.target||e.srcElement;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div>
<button>点击
</button>
</div>
</body>
<script type="text/javascript">
var obtn=document.getElementsByTagName('button')[0];
var odiv=document.getElementsByTagName('div')[0];
odiv.onclick=function(ev){
var e=ev||window.event;
alert(e.srcElement)
}
</script>
</html>
