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

使用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 {
width: 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


JS-Object (3) JSON; Event Object相关知识(事件冒泡,事件监听, stopPropagation()的更多相关文章

  1. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

  2. vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  3. js原生子级元素阻止父级元素冒泡事件

    <html> <head> <style type="text/css"> #hide{ width:75%;height:80px;backg ...

  4. js实现F5键刷新后菜单保持之前状态以及监听F5页面刷新子iframe 而父页面不刷新

    利用layui实现菜单效果时,刷新页面仍回到首页状态,需要 实现iframe子页面刷新父元素不刷新,下面是代码 //刷新时禁用F5的默认事件 $(document).keydown(function ...

  5. vue.js 跳转同一页面,传不同值,组件监听路由

    watch: { '$route' () { this.type = this.$route.params.type this.loadData() } },

  6. js --- 事件冒泡 事件捕获

    先上结论: 他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事 ...

  7. Vue.js 相关知识(基础)

    1. Vue.js 介绍 Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层). 作者:尤雨溪 注:学习 vue.js 时,一定要抛弃 jQuery 的 ...

  8. listener监听器的相关知识

    从别人的博客上我学习了listener的相关知识现在分享给大家 1.概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上 ...

  9. Linux Epoll相关知识

    其实在Linux下设计并发网络程序,向来不缺少方法,比如典型的Apache模型(Process Per Connection,简称PPC),TPC(Thread PerConnection)模型,以及 ...

随机推荐

  1. [转]Mac Appium环境安装

    原文:https://blog.csdn.net/dongqiushan/article/details/53326518 1.安装JDK; 2.安装Android SDK; 3.安装brew; 4. ...

  2. 使用 JsPlumb 绘制拓扑图的通用方法

    摘要: 实现 JsPlumb 绘制拓扑图的通用方法. 只要服务端返回一个符合指定格式的数据结构,就可以绘制相应的拓扑图. 难度: 中级 示例工程见:  http://download.csdn.net ...

  3. mysql备份恢复详解

    前言 为什么需要备份数据? 数据的备份类型 MySQL备份数据的方式 备份需要考虑的问题 设计合适的备份策略 实战演练 使用cp进行备份 使用mysqldump+复制BINARY LOG备份 使用lv ...

  4. linux基础命令---rm

    rm 删除文件和目录,默认情况下不会删除目录. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法       rm [选项]  ...

  5. SVN版本服务器搭建

    windows:        https://blog.csdn.net/lu1024188315/article/details/74082227 SVN 的下载地址如下 http://torto ...

  6. ES6学习--Array.from()方法

    Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组. 那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象. 1.将类数组对象转换为真正数 ...

  7. MySQL中的基本SQL语句

    标准SQL包含了4种基本的语句类别: DDL语句,数据定义语句,主要用来定义数据库,表名,字段,例如create,drop,alter. DML语句,数据操作语句,用来对数据记录的增删改查,还用来保证 ...

  8. PHP-Iterator迭代器(遍历)接口详讲

    echo "<meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> "; class ...

  9. GreenOpenPaint的实现(五)矩形框

    想显示一副图片相对来说比较容易.但是想在SDI中显示一个可以拖拽的矩形框,并且在滚动和缩放下都不变形,是很困难的. MFC应该说在这个方面提供了强大的支持,但是也有一些是由于历史的原因需要去除的地方, ...

  10. Java继承相关知识总结

    Java继承的理解 一.概念: 一个新类从已有的类那里获得其已有的属性和方法,这种现象叫类的继承 这个新类称为子类,或派生类,已有的那个类叫做父类,或基类 继承的好处:代码得到极大的重用.形成一种类的 ...