<!--
操作事件
1. 属性事件 DOM0级
<div onclick="函数()">按钮</div>
2. 绑定事件 DOM2级
var divEle = document.querySelector('div')
divEle.onclick = function(){
//执行的代码
}
3. 事件监听
addEventListener 非IE 7，8
事件源.addEventListener(事件类型,function(){
事件处理函数
})
attachEvent ：IE 7 8 下使用
事件源.attachEvent(事件类型,事件处理函数)
三种事件操作方式区别
-->
</head>
<body>
<div>按钮</div>
<script>
var divEle = document.querySelector('div')
divEle.addEventListener('click',function(){
//触发事件后执行的代码
alert('事件监听')
})
事件操作区别
<div>按钮</div>
<script>
var divEle = document.querySelector('div')
// divEle.onclick = function(){
// console.log('这是第一个事件绑定操作');
// }
// divEle.onclick = function(){
// console.log('这是第二个事件绑定操作');
// }
divEle.addEventListener('click',function(){
console.log('这是第一个事件监听操作');
})
divEle.addEventListener('click',function(){
console.log('这是第二个事件监听操作');
})
点击事件只能操作一次 后者覆盖前者
<title>事件传播行为</title>
<!--
由内向外：事件冒泡
由外向内: 事件捕获
点击元素： 事件目标对象
addEventListener的第三个参数决定了是事件捕获还是事件冒泡
addEventListener(事件类型，事件处理函数,捕获true|冒泡false)
=> 默认冒泡false,可以不写
-->
</head>
<body>
<ul>
<li>
<p>
<a href="#">元素一</a>
</p>
</li>
</ul>
<script>
var aEle = document.querySelector('a')
var pEle = document.querySelector('p')
var liEle = document.querySelector('li')
var ulEle = document.querySelector('ul')
aEle.addEventListener('click',function(){
alert('a')
},true)
pEle.addEventListener('click',function(){
alert('p')
},true)
liEle.addEventListener('click',function(){
alert('li')
},true)
ulEle.addEventListener('click',function(){
alert('ul')
},true)
默认为冒泡 false
true为事件捕捉
事件目标对象
!--
<!--
事件对象和事件目标对象
事件对象 => 事件触发时自动创建,可以在事件处理函数中定义一个形参e来接收
事件目标对象 => 事件对象的一个属性target获取， 表示当前点击的事件源
=> 兼容IE
var target = e.target || e.srcElement
this表示当前对象
=>在事件处理函数中的this表示的就是事件源
-->
</head>
<body>
<ul>
<li>元素一</li>
</ul>
<script>
var liEle = document.querySelector('li')
liEle.addEventListener('click',function(e){
e = e || window.event //事件对象
var target = e.target || e.srcElement //IE兼容性写法
console.log(target);
console.log(target.innerHTML);
console.log(target.nodeType, target.nodeName);
console.log('this ',this);
})
事件委托
<title>事件委托</title>
<!--
事件委托
=>元素本来由自身处理的事件，委托给它的父级元素处理，
=> 代收包裹
-->
</head>
<body>
<ul>
<li>张三</li>
<li>李四</li>
<li>王二</li>
</ul>
<script>
var liEles = document.querySelectorAll('li')
// for (var i = 0; i < liEles.length; i++) {
// liEles[i].addEventListener('click', function (e) {
// e = e || window.event //事件对象
// var target = e.target || e.srcElement //事件目标对象
// alert(target.innerHTML+'本人收包裹')
// })
// }
var ulEle = document.querySelector('ul')
ulEle.addEventListener('click', function (e) {
e = e || window.event //事件对象
var target = e.target || e.srcElement //事件目标对象
if (target.innerHTML == '张三') {
alert('收张三包裹')
} else if (target.innerHTML == '李四') {
alert('收李四包裹')
} else if (target.innerHTML == '王二') {
alert('收王二包裹')
}
})
什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。
DOM事件流
DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。
事件顺序有两种类型：事件捕捉和事件冒泡。
阻止事件冒泡
通常情况下我们都是一步到位，明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目标，这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解，我们知道程序将做多较多额外的事情，这必然增大程序开销。还有一个重要的问题是：事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，甚至无从下手调试，这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时，我们要阻止事件冒泡。
event.stopPropagation()方法
这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，
event.preventDefault()方法
这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
return false方法
这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为returnfalse就等于同时调用了event.stopPropagation()和event.preventDefault()
一、不阻止事件冒泡和默认事件
$(".mybj").click(function(){
console.log("1")//不阻止事件冒泡会打印1，页面跳转;
});
二、阻止冒泡
$(".mybj a").click(function(event){
event.stopPropagation();//不会打印1，但是页面会跳转；
});
$(".mybj").click(function(){
console.log("1")
});
三、阻止默认事件
$(".mybj a").click(function(event){
//阻止默认事件
event.preventDefault();//页面不会跳转，但是会打印出1，
})；
$(".mybj").click(function(){
console.log("1")；
});
四、阻止冒泡对比阻止默认事件
$(".mybj").click(function(){
console.log("1")
});
//阻止冒泡
$(".mybj a").click(function(event){
event.stopPropagation();
//阻止默认事件
event.preventDefault() //页面不会跳转，也不会打印出1
})
五、return false
$(".mybj").click(function(){
console.log("1")
});
$(".mybj a").click(function(event){
return false; //页面不会跳转，也不会打印出1，等于同时调用了event.stopPropagation()和
event.preventDefault()
});
Javascript代码：
function preventBubble(event){
var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容
if (e && e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
在哪个位置需要阻止事件冒泡，就在哪使用上面的方法：使用方法是：
preventBubble();
