一.默认事件-下面是一个a标签,默认具有跳转属性这就属于默认事件,怎么做到点击a标签让其不跳，去除默认事件。
<body>
<a href="https://www.baidu.com/">点击我进入百度</a>
<script src="../jquery-3.0.0.min.js"></script>
<script>
$('a').on('click',function (event) {
event.preventDefault() //去除默认事件的代码
})
</script>
</body>
二：冒泡-从里层忘外层冒，从事件源（box3）到body一层一层
冒泡.png
<style>
.box1{
width: 300px;
height: 300px;
border: 2px solid red;
}
.box2{
width: 200px;
height: 200px;
border: 2px solid red;
}
.box3{
width: 100px;
height: 100px;
border: 2px solid red;
}
</style>
<body>
<div class="box1">我是box1
<div class="box2">我是box2
<div class="box3">我是box3</div>
</div>
</div>
<script src="../jquery-3.0.0.min.js"></script>
<script>
$('.box1').on('click',function (event) {
console.log('我是box1');
// 阻止冒泡事件
event.stopPropagation();
});
$('.box2').on('click',function (event) {
console.log('我是box2');
// 阻止冒泡事件
event.stopPropagation();
});
$('.box3').on('click',function (event) {
console.log('我是box3');
// 阻止冒泡事件
event.stopPropagation();
});
</script>
</body>
三：捕获-从body到事件源（box3），和冒泡相反。
我们可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。
ele.addEventListener('click',doSomething2,true)
true=捕获
false=冒泡
四：关于js事件委托
1.原理：有5个同事预计会在周二收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台人员代为签收。现实当中，我们大都采用委托的方案（公司也不会让那么多员工站在门口就为了等快递）。前台人员收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台人员都会收到新员工的快递后核实并代为签收。
2.为什么要用事件委托？
我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
for循环的方法，来遍历所有的li：
// for循环的方法，来遍历所有的li
<body>
<ul id="list">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
</ul>
<script>
window.onload = function(){
var oUl = document.getElementById("list");
var aLi = oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick = function(){
alert(123);
}
}
}
</script>
</body>
采用事件委托方法：dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能
//采用事件委托方法
<body>
<ul id="list">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
</ul>
<script>
window.onload = function(){
var oUl = document.getElementById("list");
oUl.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert('点击了li');
alert(target.innerHTML);
}
}
}
</script>
</body>
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
注意的mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。
不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了
网友评论