前端知识学习与巩固

一.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.onclick=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).鼠标与滚轮事件
未完待续