JS-Object (3) JSON; Event Object相关知识（事件冒泡，事件监听, stopPropagation()

通常用于在网站上表示和传输数据

使用JavaScript处理JSON的所有工作，包括访问JSON对象中的数据项并编写自己的JSON。

JSON text基本上就像是一个JavaScript对象，这句话几乎是正确的。

原因就是，例外见下：

Arrays 也是一个 JSON对象.

其他：

• JSON是纯数据格式，只有属性，没有方法
• JSON要求两边有括号{}/[]
• 不像JavaScript标志符可以用做属性，在JSON中，属性必须是quoted strings。
• JSON格式验证器 ：  https://jsonlint.com/ 

---

我的code pen:

案例：https://codepen.io/chentianwei411/pen/mGadJX

重点：

1。使用XML方式发送请求并处理响应。Rails.ajax({})是用xml写的。

需要4个方面：

1. url
2. type
3. data  , get就不需要了。
4. dataType， 响应的数据格式。

var request = new XMLHttpRequest();
request.open("GET", requestURL)　　　　　　//type, url
request.responseType = 'json'　　　　　　　//dataType
request.send()

request.onload = function() {　　　　　　  //success函数内把数据插入DOM。
  var superHeroes = request.response;
  populateHeader(superHeroes);　　　  ／／2个方法createElement，添加textContent, 插入DOM.
  showHeroes(superHeroes);
}

2

JSON.parse(): 把收到的字符串转化为javascript对象。

JSON.stringify(): 正相反，把js对象转化为JSON字符串。 Rails用 as_json()／to_json()

var myJSON = { "name" : "Chris", "age" : "38" };
var myString = JSON.stringify(myJSON);
myString =>
"{"name":"Chris","age":"38"}"

知识点：

section article {
   33%;
  float: left;
}

1. session article {} 选择所有在session中的article类
2. width配合float，横向排列。

---

学习了一个案例: 

我的code pen:

https://codepen.io/chentianwei411/pen/qMvEJK

挑战：  添加一个evil circle 尚未做。

---

Event Object

所有事件的对象都基于Event Object,

• DragEvent,
• keyboardEvent, 
• MouseEvent。
• 等等。
• 还可以自定义event，使用createEvent()方法，内部参数很多。

MouseEvent

有大量的properties 和 methods：

如button就是一个特性，当鼠标事件被激活时，返回鼠标点击的按钮（左／轮／右）。

有多个event type类型：

onclick, onmousedown等等。

事件是对象，也就可以当参数传递

例子，参数e代表了click 事件对象。

click事件对象，继承了Event对象的部分特性和部分方法，因此可以使用如target, type， timeStamp方法。

这里target是Event对象的方法，委托给click事件对象使用。

function bgChange(e) {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
}  

btn.addEventListener('click', bgChange);

例子-我的code pen改变颜色：用addEventListener()，和onclick事件。

---

event.preventDefault()

防止元素的默认事件行为。

• 比如点击表单按钮，可以通过preventDefault()停止提交表单行为，然后自定义。
• 点击一个<a href='https://w3schools.com/'>，停止导向它指向的URL。

capture and bubbling

使用stopPropagation()   (点击看code pen案例)

用于停止事件传播event flow, 防止在冒泡或捕捉中，相同的事件被调用。

解释：当元素自身的事件执行后，开始冒泡，或捕捉，这个方法就是在冒泡或捕捉中遇到相同的事件后，停止这个事件的执行。

还有一个变种，stopimmediatePropagation(),  假设元素自身有两个click事件，只会执行第一个，同样有防止在冒泡或捕捉中，相同的事件被调用的功能。

事件委托技巧: 利用事件的冒泡bubble行为。 （点击查看code pen上的案例）

设计：

当<父元素>内有一堆子元素都有相同的event并有相同的运行代码时，可以在<父元素> 上设定addEventListener('一个事件', function(){ ... })监听这个事件。子元素上无需再写任何event代码。

操作：

当用户在子元素上的操作，触发某个event后（自身没有代码可以运行）， bubbling，父元素上监听到这个event，执行代码。

---

 

Gallary: 

一个练习，用到if, for语法, 方法：addEventListener(), setAttribute(), getAttribute()。

css:

postion: relative/absolute 

解释： 分别用到父元素和子元素中，子元素的位置根据父元素来变化。

我的code pen:

https://codepen.io/chentianwei411/pen/GXeVjG

---