发表于： 2019-10-19 16:39:27

1 739

今天完成的事：通过任务2，学习了怎么阻止默认事件和冒泡和json是什么，如何处理转义？

明天要完成的事：任务5；

难题：还是没理解target要怎么用只知道这个是指向发送事件的元素或他的子元素

收获：

event是什么？

触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息）
所有浏览器都支持Event对象，但支持方式不同
IE中的事件对象：window.event

这就是var event = event || window.event;和

function stopBubble(e) {

//如果提供了事件对象，则这是一个非IE浏览器

if (e && e.stopPropagation){

的用处；并且这2种区别是由不同的事件模型引起的：

IE事件模型将event作为window对象的一个属性存在，当只有事件触发才能取到;
w3c标准事件模型将event传入到事件处理程序中，参数即可以取到;

.什么是默认事件?

浏览器的一些默认的行为。例如：点击超链接跳转,滑动滚轮控制滚动条

3.常见问题

如何阻止事件冒泡和默认事件

4.解决方案

DOM中提供stopPropagation()方法，但IE不支持，使用event对象在事件函数中调用就行
IE中提供的是，cancelBubble属性，默认为false，当它设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用
jQuery中提供了stopPropagation()方法来停止事件冒泡，当需要时，只需用用event对象来调用就行，即event.stopPropagation();

阻止事件冒泡——EVENT.STOPPROPAGATION()

jQuery event.stopPropagation() 方法

event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。

jQuery event.isPropagationStopped() 方法

event.isPropagationStopped() 方法检查指定的事件上是否调用了 event.stopPropagation()。

阻止事件冒泡——CANCELBUBBLE

事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。

不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器中已经支持。

语法：e.stopPropagation();

参数e：表示事件传递的参数，代表事件的状态。

阻止默认事件——EVENT.PREVENTDEFAULT() ：

jQuery event.preventDefault() 方法

event.preventDefault() 方法阻止元素发生默认的行为。

jQuery event.isDefaultPrevented() 方法

event.isDefaultPrevented() 方法检查指定的事件上是否调用了 preventDefault() 方法。

Firefox中，event必须作为参数传入。

IE中，event是window对象的属性。

event.preventDefault();方法用于取消默认事件，但是不兼容IE，在IE下，要用event.returnValue=false;来处理。

阻止默认事件——RETURNVALUE

// IE中阻止默认事件
　　　　event.returnValue = false;

用冒泡还是捕获？

A2：为了兼容IE低版本浏览器最好用冒泡，而且事件的默认方式是冒泡；

2.不是所有的事件都能冒泡。

以下事件不冒泡：blur、focus、load、unload。

（阻止事件其实就是把事件看成（变成）一个对象然后对这个对象使用方法而event就是那个对象，由于ie浏览器的历史原因所以提供的事件对象不是event，而是window.event）

看不懂就去这个页面看一下：https://segmentfault.com/q/1010000003505623/

1.阻止事件冒泡

//IE9+,其他主流浏览器

// var event = event || window.event;

// event.stopPropagation();

//火狐未实现

// window.event.cancelBubble = true;

//不建议滥用，jq中可以同时阻止冒泡和默认事件

// return false;

//兼容模式

// stopBubble(event);

function stopBubble(e) {

//如果提供了事件对象，则这是一个非IE浏览器

if (e && e.stopPropagation){

// 因此它支持W3C的stopPropagation()方法

e.stopPropagation();

}else{

//否则，我们需要使用IE的方式来取消事件冒泡

window.event.cancelBubble = true;

}

2.阻止默认事件

//全支持

// event.preventDefault();

//该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

// window.event.returnValue = false;

//不建议滥用，jq中可以同时阻止冒泡和默认事件

// return false;

// 兼容

// stopDefault(event);

关于event.srcElement 和event.target

尽量使用event.target；因为event.srcElement 不兼容火狐浏览器；

然后this和event.target的区别：

1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远指向触发事件的DOM元素本身；
2.this和event.target都是dom对象，使用jQuey中的方法可以将他们转换为jquery对象：$(this)和$(event.target).
假设htm是<div><span></span></div>
点击span的时候改变span的颜色，使用this的话点击span因为事件冒泡机制，div也会改变颜色，但是使用event.target不会。

我都理解但是不知道怎么用，，，

关于json：

每个 JSON 对象就是一个值，可能是一个数组或对象，也可能是一个原始类型的值。总之，只能是一个值，不能是两个或更多的值。

JSON 对值的类型和格式规定
复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。
字符串必须使用双引号表示，不能使用单引号。
对象的键名必须放在双引号里面。
数组或对象最后一个成员的后面，不能加逗号。
ps:注意，null、空数组和空对象都是合法的 JSON 值。

JSON语法
数据在名称/值对,中：

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"name" : "菜鸟教程"

数据由逗号分隔
大括号保存对象
中括号保存数组

json对象
JSON对象是 JavaScript 的原生对象，用来处理 JSON 格式数据。
通俗点讲，每个符合JSON格式的值就是一个JSON对象。也就是说，每个JSON对象，都是一个值。一个JSON对象对应且只对应一个值，要么是简单类型的值，要么是复合类型的值。

它有两个方法：JSON.stringify()和JSON.parse()。
2 json字符串转js对象，调用parse方法：
js对象 = JSON.parse(json字符串);
js对象转json字符串，调用stringify方法：
json字符串 = JSON.stringify(js对象);

JSON.parse()将字符串转化为对象
JSON.stringify()将对象转化为字符串
JSON.stringify有三个参数
JSON.stringify(value [, replacer] [, space])

当replacer是方法时，其作用类似给传入的对象的每一个符合方法条件的值一个方法进行迭代
当replacer是数组时，其作用是对传入的对象值进行筛选

第三个参数是对显示数据进行排版，对每一个键值对换行处理。值可以是数字或字符串。当起为数字时，一个数字代表键值对前面的空格，数字不大于10。字符串同理，只是将空格换成相应的字符，字符最多不能大于10个

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串

上面全是要记的，（json格式更多的是数据的交换应该主要学的还是格式和应用，原理比较容易理解）

HTTP，HTTP头和它的状态码识别和处理；