大家好，我是IT修真院深圳分院第01期学员，一枚正直纯洁善良的web程序员。
今天给大家分享一下，修真院官网js任务4，深度思考中的知识点——如何阻止事件冒泡和默认事件？。
一、背景介绍
讲之前先说说什么是事件
Event
在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息）
所有浏览器都支持Event对象，但支持方式不同
IE中的事件对象：window.event
/*封装Event对象
IE：window.event
*/
function getEvent(event){
return event?event:window.event;
}
二、知识剖析
2.1冒泡机制
下面这个图片大家应该心领神会吧，气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。
相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom树的底层 层层往上传递，直至传递到dom的根节点。
2.1.1简单案例分析
下面通过一个简单的例案例来阐述冒泡原理:
2.2默认事件
浏览器的一些默认的事件。例如：点击超链接跳转，点击右键会弹出菜单，滑动滚轮控制滚动条
三、常见问题
如何阻止事件冒泡和默认事件?
四、解决方案
1.IE浏览器下面的缓存问题：
在IE浏览器下面使用get请求时，如果第一次请求了数据之后IE会自动缓存数据，如果下一次再发送同样的请求的时候浏览器会自动先去找缓存显示出来，所以如果请求的数据有变化的时候，这里是看不到变化的。
解决办法：
xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);
就是在请求的后面 加上_dc=...让url变成唯一，或者是，改成post请求。
2.跨域问题：
这是我们目前见到的最多的，也是最熟悉的一个问题。本地上面直接采用Nginx跨域实现。在服务器上的话，也可以用Nginx。注意Nginx跨域可以同时配置多个接口的，就是多写几个location就好了，然后location后面带的参数不一样就可以了。
3.Ajax乱码问题
乱码问题虽然我们目前遇到的不多，但是也属于比较常见的一个问题了。出现的主要原因就是编码不一致导致的。如果出现乱码问题了，首先检查一下meta声明的charset要和请求的页面返回的charset一致。response.charset="gb2312 or utf-8"
4.使用post提交的时候需要设置
content-Type: application/x-www-form-urlencoded
//jQuery中
content-Type: application/x-www-form-urlencoded;charset=utf-8
//AngularJS中$http的
content-Type: application/json; charset=utf-8
//使用原生Ajax需要在open以后才能使用xhr.setRequestHeader()方法，否则出错。
xhr.open("post","xxxx.aspx",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
//用原生写时必须在open()方法之后send()方法之前调用。
5.Ajax对象属性的大小写问题
有些浏览器比如火狐，对大小写是敏感的，if (xhr.readystate==4)这种写法，在IE下是成立的，但是在ff下就行不通了，因为IE不区分大小写，ff是区分大小的。标准写法为if (xhr.readyState==4)，同理还有属性responseText，responseXML。
6.Ajax状态0的问题
有时候在测试Ajax代码的时候加了xhr.status==200的判断后，一直不执行xhr.status==200的代码，这个就需要注意了。xhr.status==200是要通过服务器确认后来返回的，在服务器页面没有发生错误或者转向时才返回200状态的此状态和你通过浏览器访问页面时服务器定义的状态一致。这个我们提前就跟后端对接好了，问题也不大。
五、编码实战
详见视频：
如何阻止事件冒泡和默认事件？_腾讯视频
六、拓展思考
事件冒泡有什么作用？
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情
七、参考文献
参考一：博客园
参考二：脚本之家
八、更多讨论
详见视频。
感谢大家观看
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
下期预告：前端垮域问题有哪些常用的解决方式？不见不散~
你可以直接点击此链接与我一起学习：邀请码
网友评论