一.JSON复习 json是一种数据交换格式，而不是一种编程语言，常用于服务器端和客户端的数据交互。许多编程语言都有针对json的解析器和序列化器。 json可以表示简单值(数值、字符串、布尔值、null)，对象，数组。注意json不能表示JavaScript中的特殊值undefined，也不支持函数、变量、对象实例。 使用时需要注意的地方 (1).json中的对象和JavaScript中的对象字面量不同。json对象中的属性名必须用双引号括起来，一定要是双引号不能用单引号，否则会出错。 (2),JSON.parse()用于把json字符串解析成JavaScript对象，第一个参数只能是json变量或者json字符串当传字符串时前面一定加个单引号 JSON.parse(‘{“name”:”yingang”,”years”:18}’）不加最外面那一对单引号解析不出来 可以跟一个函数来指定返回对象里属性的值 var dui=JSON.parse(‘{“name”:”yingang”,”years”:18}’,function(key,val){ if(key==”name”) return “lihuan”; else return val; }); 记住else return val 这个逻辑一定要有，不然会出错 (3).JSON.stringify()这个函数将JavaScript对象解析成json字符串，接收三个参数，第一个是待转换的JavaScript对象，第二个是过滤参数(可以是一个属性名字符串数组或者一个函数)，第三个是缩进参数(可以是数值或者字符串) 如果第二个参数是一个数组，则只有属性数组里包含的属性会被转换成json字符串 如果是函数的话和上面那个函数形式差不多function(key,value),如果针对某属性名返回undefined则会将该属性从json里删除，注意default情况下一定要返回value 第三个参数如果是数值则代表json的缩进空格数，最大为10，当数值超过10的时候会自动转换成10，也可以是字符串，指定用字符串来进行格式控制 特地注意下： 如果对象内部定义了toJSON方法，在调用JSON.stringify()的时候会优先调用对象内部的toJSON方法。例如： var book={ name:”bookname”, years:1995, authot:”yingang”, toJSON:function(){ return “hehe”; } } 则为book对象调用JSON.stringify()后，返回的只是”hehe”字符串。 (4)eval的使用 eval只能接受纯字符串 ，可以用来解析json字符串格式如下 eval(“(“+json变量+”)”);
二.事件知识总结 1.事件流 一共有两种事件流，第一种是事件捕获，第二种是事件冒泡。 以鼠标单击事件为例。有如下结构 div>span>a ，三者都绑定了鼠标单击事件，当我们用鼠标单击a元素的时候，所单击的位置同样处于span和div的元素范围内。 Netscape的事件流叫做事件捕获，规定总是由最外层的元素响应事件，然后逐层交给更具体的元素。所以事件响应顺序是document>html>body>div>span>a ie的事件流叫做事件冒泡，当事件发生时，会最先由最具体的元素响应，然后逐层冒泡，再由其父元素响应。所以事件响应顺序是a>span>div>body>html>document。 2.DOM事件流 “DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段—处于目标阶段—事件冒泡阶段。 dom事件流用上述案例可表示为 document>html>body>div>span>a>span>div>body>html>document 在dom事件流中，实际的目标在捕获阶段不会接受到事件，意思就是在捕获阶段到第一个span就结束了，然后进入a处理事件的处于目标阶段，a处理完后，进入事件冒泡阶段。 2.事件处理程序 响应事件发生时的执行动作就是事件处理程序。 (1).dom 0级事件处理程序 例如:
var btn=document.getElementById("mybtn"); btn.onclick=function(){ alert("click"); }注意一下。dom 0级方法注册的事件，this对象始终指向发生事件的那个元素，即btn。可以通过btn.οnclick=null,来删除注册的事件。 并且通过dom 0级方法无法为同一个事件注册两个处理函数，后注册的处理函数将覆盖前一个处理函数。
$(".e3")[0].onclick=function(){ alert("xian"); } $(".e3")[0].onclick=function(){ alert("hou"); }将只会打印”hou”。 兼容性:全浏览器支持 (2).dom 2级事件处理程序 2级事件处理程序定义了两个方法，用于添加和删除事件处理程序：addEventListener() removeEventListener().它们都接收三个参数：要处理的事件名称(不带on)、事件处理函数和一个布尔值。如果最后那个布尔值参数是true,表示在捕获阶段调用事件处理程序，如果为false则表示在事件冒泡阶段调用事件处理程序，默认是false。 ie9+以及现代浏览器支持2级事件处理程序！！！！ this依旧指向所属元素 addEventListener()可以为同一个事件注册多个处理程序，它们会按照先后顺序执行。
$(".e3")[0].addEventListener("click",function(event) { alert("hello");/* Act on the event */ },true); $(".e3")[0].addEventListener("click",function(event) { alert("word");/* Act on the event */ },true);会依次打印hello world。 通过addEventListener添加的事件处理程序只能用removeEventListener()来移除，移除时的参数必须和添加时的参数相同。但是如果处理函数是匿名函数的话就无法删除。例如：
$(".e3")[0].addEventListener("click",function(event) { alert("hello");/* Act on the event */ },true); $(".e3")[0].removeEventListener("click",function(event) { alert("word");/* Act on the event */ },true);虽然两者的参数一样，因为处理函数是匿名函数，前后两个匿名函数并不是同一个，所以删除失败。
function handler(){ alert("hello"); } $(".e3")[0].addEventListener("click",handler,true); $(".e3")[0].removeEventListener("click",handler,true);这样就可以删除成功了。 (3).ie 事件处理程序 ie下也有对应的事件添加和移除方法.attachEvent() 、detachEvent() 都接收两个参数，一个事件名称(有on)，一个处理函数。 可以一个事件注册多个处理方法，但是有点怪这个不是按照注册顺序执行的，是逆着注册顺序逐个执行。 删除事件处理程序的规则和上面那个一样。 兼容性：只支持ie和opera浏览器(ie11开始不再支持这两个方法)。 注意这两个的this指向的是window (4).jquery封装的事件处理程序。 .on(event,childrenselector,data,function)参数依次为事件类型(无on),选择器，发送给处理函数的额外数据，处理函数。 event可以是多个事件，用空格隔开。如果传递了childselector则为满足子选择器的条件绑定事件处理函数，this指向childselector元素，触发事件委托；否则则为调用on的元素绑定事件处理函数，this指向调用on的元素。 对应的事件移除方法.off(event,childselector,function) 当不指定function名称时(一定是函数引用，匿名函数和上面的规则一样无效)，删除事件对应的所有处理函数，当指定了function名称则只删除指定的处理函数。 可以在使用on的时候加上命名空间，然后删除的时候带上命名空间，也可以删除指定的事件处理函数。
$(".e1").on("click.yg",function(event){ alert("gg"+this.tagName+event.target.tagName+event.currentTarget.tagName); }); $(".e1").on("click",handler); $(".e1").off("click.yg");第一个被删除，第二个保留。 兼容性：全浏览器支持，哈哈哈jquery就是强大。 只绑定一次触发完就删除的事件可以用one .one(event,data,function);不支持事件委托。 3.事件对象(event) 在触发DOM上的事件时，总是会在事件发生时产生一个事件对象event，这个对象包含了所有与事件相关的信息。 不同的事件类型，event对象里的属性也不同，但有一些基础属性与方法是所有事件都具有的。 公共属性： target 事件发生的最具体目标 currenttarget 事件委托时，指向委托的那个元素，否则则指向调用事件的元素 type 事件类型 trusted 事件是浏览器生成的为true，js指定的为false 公共方法 preventDefault() 取消事件的默认行为 stopPropagation() 取消事件的进一步冒泡或捕获 4.事件类型 (1).html事件 a).load 当页面完全加载后在window上面触发，当所有框架加载完毕时在框架集上触发，当图像加载完成后 在图像元素上触发 b).unload 当页面完全被卸载后触发，当所有框架卸载完毕后在框架集上触发 c).resize 当浏览器窗口大小改变后在window上触发。书上说firefox只有在停止调整窗口大小时才会触发resize事件，但是经过测试，调整过程中依旧在不停触发resize事件。 d).scroll 当整个页面滚动时window触发，当具有滚动条的元素滚动时，该元素触发事件 注意了在获取页面滚动时的scrollTop和scrollLeft的时候有浏览器差异问题。 ie 、firefox 、opera 获取滚动高度的方法是 document.documentElement.scrollTop; chrome 、Safari下 document.body.scrollTop; 在获取滚动元素的滚动距离时可以直接用 element.scrollTop , element.scrollLeft jquery实现了两者兼容的获取方式 jQuery(document).scrollTop() , $(document).scrollLeft() (2).焦点事件 最常用的focus和blur，分别在元素获得焦点和失去焦点时触发，注意这两个元素是不会冒泡的。 另外提一下focusin和focusout，这两个的触发时机和上面两个一样，不同的是这两个事件支持冒泡，不过浏览器支持不是很好，firefox根本不支持，不过其他浏览器是支持的。 juqery的focusin和focusout做了兼容，支持所有浏览器。 (3).鼠标与滚轮事件 未完待续
