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及以下的浏览器中不支持,所以在这些浏览器中调用时会报错