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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值