JS

P114 事件的委派

将事件统一绑定到祖先元素上。
利用冒泡，减少事件绑定的次数，提高性能；
使触发事件只有我们期望的元素：

ul.onclick=function(event){
event=event||window.event;
if(event.target.className="link"){
alert("我是ul的单击响应函数”);
}
};

P115 事件的绑定

对象.事件

onclick单击函数不能同时绑定多个函数，后者会覆盖前者；

addEventListener()

通过这个方法可以为同一元素同时绑定多个响应函数
顺序是按绑定顺序从上往下
参数：
1、事件的字符串，不要on
2、回调函数，当事件触发时该函数被调用
3、是否在捕获阶段触发事件，需要一个布尔值，一般都传false

button.addEventListener("click",function(){alert("1234"),false});

这个方法不支持IE8及以下的浏览器

attachEvent（）

支持IE8浏览器
参数：
1、事件的字符串，要on
2、回调函数

btn01.attachEvent("onclick",function(){
					alert(1);
				});

这个方法也可以同时为一个事件绑定多个处理函数，
* 不同的是它是后绑定先执行，执行顺序和addEventListener()相反

bind()绑定函数

定义一个函数，用来为指定元素绑定响应函数
/*
* addEventListener()中的this，是绑定事件的对象
* attachEvent()中的this，是window
* 需要统一两个方法this
/
/
* 参数：
* obj 要绑定事件的对象
* eventStr 事件的字符串(不要on)
* callback 回调函数

function bind(obj , eventStr , callback){
				if(obj.addEventListener){
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr , callback , false);
				}else{
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on"+eventStr , function(){
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}

P117 事件的传播

1、捕获阶段
从最外层的祖先元素，向目标元素进行事件的捕获
2、目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3、冒泡阶段
事件从目标元素向他的祖先元素传递，一次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true

IE8及以下的浏览器中没有捕获阶段

P118-120 拖拽

onmousedown按下鼠标
onmouseup松开鼠标
onmousemove移动鼠标

function drag(obj){
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				obj.onmousedown = function(event){
					
					//设置box1捕获所有鼠标按下的事件
					/*
					 * setCapture()
					 * 	- 只有IE支持，但是在火狐中调用时不会报错，
					 * 		而如果使用chrome调用，会报错
					 */
					/*if(box1.setCapture){
						box1.setCapture();
					}*/
					obj.setCapture && obj.setCapture();
					
					
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - obj.offsetLeft;
					var ot = event.clientY - obj.offsetTop;
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						obj.style.left = left+"px";
						obj.style.top = top+"px";
						
					};
					
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
						//当鼠标松开时，取消对事件的捕获
						obj.releaseCapture && obj.releaseCapture();
					};
					
					/*
					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
					 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
					 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
					 * 
					 * 但是这招对IE8不起作用
					 */
					return false;
					
				};

P121 滚轮

• onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
  * 但是火狐不支持该属性
  *
  * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
  * 注意该事件需要通过addEventListener()函数来绑定

bind(box1,"DOMMouseScroll",box1.onmousewheel);

event.wheelDelta 可以获取鼠标滚轮滚动的方向
//向上滚 120 向下滚 -120
//wheelDelta这个值我们不看大小，只看正负

			wheelDelta这个属性火狐中不支持
				在火狐中使用event.detail来获取滚动的方向
				向上滚 -3  向下滚 3

if(event.wheelDelta > 0 || event.detail < 0){
						//向上滚，box1变短
						box1.style.height = box1.clientHeight - 10 + "px";
						
					}else{
						//向下滚，box1变长
						box1.style.height = box1.clientHeight + 10 + "px";
					}

/*
* 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
* 需要使用event来取消默认行为event.preventDefault();
* 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
*/

	event.preventDefault && event.preventDefault();

/*
* 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
* 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
*/

   		return false;

P122 键盘事件

onkeydown按下
onkeyup松开
键盘事件一般绑定给获取到焦点的对象或者document

可以通过KeyCode获取按键的编码

altKey
shiftKey
ctrlKey
判断是否同时按下 返回true/false

在文本框里输入内容属于默认行为
如果return false则输入内容不会出现在文本框内

P124 Navigator

BOM:通过JS操作浏览器
BOM对象：
Window
整个浏览器的窗口，也是全局对象
Navigator
当前浏览器的信息，识别不同浏览器
Location
当前浏览器的地址栏信息
History
历史记录(向前向后翻页，只在当次访问有效)
Screen
用户屏幕信息

navigator

由于历史原因，Navigator对象的大部分属性已经不能识别浏览器了
一般我们使用userAfent判断浏览器信息

P125 History

length 获取当次访问的链接数量
back（）返回上一个页面
forward（） 跳转下一个页面
go() 用来跳转指定页面
需要一个整数作为参数
1：向前跳一个页面
2：向前跳两个页面
-1：向后跳一个页面
-2：向后跳两个页面

P126 Location

如果直接将location的属性修改为一个完整路径或者相对路径
则页面会自动跳转到该路径，并生成相应的历史记录
location=“http://www.baidu.com”

属性：
assign()
跳转页面
location.assign(“http://www.baidu.com”);

reload()

location.reload() 刷新
location.reload(true) 强制清空缓存

replace()
新页面替换当前页面，无历史记录

P127 定时器

setInterval()
定时调用
参数
1回调函数
2间隔时间，单位是毫秒

clearInterval()
关闭定时器
方法中需要一个定时器的标识作为参数

var num=1;
			var timer = setInterval(function(){
				count.innerHTML=num++;
				if(num == 11){
				clearInterval(timer);
			}
			},1000);

P130 延时调用

setTimeout(function(){},3000);
只执行一次。

clearTimeout(timer);
关闭一个延时调用。

延时调用和定时调用时可以互相代替的。延时使用多次即是定时。

P137 类的操作

修改元素的class属性来间接的修改样式
只需要修改一次，即可同时修改多个样式，
浏览器只需要重新渲染页面一次，性能比较好
并且这种方式，可以使表现和行为进一步的分离

box.className += " b2";

//定义一个函数，用来向一个元素中添加指定的class属性值
			/*
			 * 参数:
			 * 	obj 要添加class属性的元素
			 *  cn 要添加的class值
			 * 	
			 */
			function addClass(obj , cn){
				
				//检查obj中是否含有cn
				if(!hasClass(obj , cn)){
					obj.className += " "+cn;
				}
				
			}

/*
			 * 判断一个元素中是否含有指定的class属性值
			 * 	如果有该class，则返回true，没有则返回false
			 * 	
			 */
			function hasClass(obj , cn){
				
				//判断obj中有没有cn class
				//创建一个正则表达式
				//var reg = /\bb2\b/;
				var reg = new RegExp("\\b"+cn+"\\b");
				
				return reg.test(obj.className);
				
			}

			/*
			 * 删除一个元素中的指定的class属性
			 */
			function removeClass(obj , cn){
				//创建一个正则表达式
				var reg = new RegExp("\\b"+cn+"\\b");
				
				//删除class
				obj.className = obj.className.replace(reg , "");
				
			}

			/*
			 * toggleClass可以用来切换一个类
			 * 	如果元素中具有该类，则删除
			 * 	如果元素中没有该类，则添加
			 */
			function toggleClass(obj , cn){
				
				//判断obj中是否含有cn
				if(hasClass(obj , cn)){
					//有，则删除
					removeClass(obj , cn);
				}else{
					//没有，则添加
					addClass(obj , cn);
				}
				
			}

P140 JSON

JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，
* 并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
* - JSON
* - JavaScript Object Notation JS对象表示法
* - JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号
* 其他的和JS语法一致
* JSON分类：
1.对象 {}
2.数组 []
*
* JSON中允许的值：
1.字符串
2.数值
3.布尔值
4.null
5.对象
6.数组

json --> js对象
JSON.parse()
- 可以将以JSON字符串转换为js对象
- 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回

JS对象 —> JSON
JSON.stringify()
- 可以将一个JS对象转换为JSON字符串
- 需要一个js对象作为参数，会返回一个JSON字符串

JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错