1、事件的冒泡：指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。
在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡。
将事件对象的cancelBubble设置为true，即可取消冒泡。
2、事件的委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的。
我们可以尝试将其绑定给元素的共同的祖先元素。
target：event中的target表示的触发事件的对象。
如果触发事件的对象是我们期望的元素，则执行，否则不执行。
3、事件的绑定
使用：对象.事件 = 函数 的形式绑定响应函数。
他只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后面会覆盖掉前面的。
addEventListener()：通过这个方法也可以为元素绑定响应函数。
参数：1、事件的字符串，不要on
2、回调函数，当事件触发时该函数会被调用
3、是否在捕获阶段触发事件，需要一个布尔值，一般都传false
eg:
btn01.addEventListener("click",function(){
alert(1);
},false);
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。
这个方法不支持IE8及以下的浏览器。
-
attachEvent()：在IE8中可以使用attachEvent()来绑定事件。
参数：1、事件的字符串，要on
2、回调函数
这个方法也可以同时为一个事件绑定多个处理函数，不同的是他是后绑定先执行，执行顺序和addEventListener()相反。 -
定义一个函数。用来为指定元素绑定响应函数
/*addEventListener()中的this，是绑定事件的对象。
attachEvent()中的this，是window。
需要统一两个方法this*/
/*参数：obj 要绑定事件的对象
eventStr 事件的字符串
callback 回调函数
*/
function bind(obj,eventStr,callStr){
if(obj.addEventListener){
//大部分浏览器都兼容的模式
obj.addEventListener(eventStr,callStr,false);
}else{
//this是谁由调用方式决定
//callback.call(obj)
//IE8及以下
obj.attachEvent("on"+eventStr,function(){
//在匿名函数中调用回调函数
callback.call(obj);
});
}
}
4、事件的绑定
-
关于事件的传播网景公司和微软公司有不同的理解。
-
微软公司认为事件应该是由内向外传播，也就是当事件被触发时，应该先触发当前元素上的事件，然后再向当前的祖先元素上传播，也就是说事件应该在冒泡阶段执行。
-
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后再向内传播给后代元素。
-
W3C综合了两个公司的方案，将事件传播分成了三个阶段：
1、捕获阶段
在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
2、目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
3、冒泡阶段
时间从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。 -
如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false。
-
IE8及以下的浏览器没有捕获阶段。
5、拖拽
拖拽的流程：
1、当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
2、当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
3、当鼠标松开时，被拖拽元素固定在当前位置onmouseup -
要想使点击某个位置，div随之被拖拽：
div的偏移量：鼠标.clentX - 元素.offsetLeft
div的偏移量：鼠标.clentY - 元素.offsetTop -
当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的默认行为。
-
如果不希望发生这个行为，则可以通过return false来取消默认行为。但是对IE8不适用。
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
6、拖拽2
setCapture()
只有IE支持，但是在火狐中调用不会报错，在chrome中调用会报错。
判断什么时候调用：
box1.setCapture && box1.setCapture();
当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上。
- 提取一个专门用来设置拖拽的函数
//参数： 开启拖拽的元素
function drag(obj){
obj.onmousedown = function(event){
obj.setCapture && obj.setCapture();
event = event || window.event;
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop; };
document.onmousemove = function(event){
event = event || window.event;
var left = event.clientX - ol;
var top = event.clientY - ot;
obj.style.left = left+"px";
obj.style.top = top+"px";
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
obj.releaseCapture && obj.releaseCapture ();
};
return false;
};
7、滚轮事件
onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，火狐不支持。
在火狐中需要使用DOMMouseScroll来绑定滚轮事件
注意该事件需要通过addEventListener()函数来绑定。
-
event.wheelDelta可以获取鼠标滚轮滚动的方向。不看大小，只看正负。
向上滚 正数，向下滚 负数。
但在火狐中不支持。
火狐中使用event.detail来获取滚动的方向。
向上滚 负数，向下滚 正数。 -
判断鼠标滚轮滚动的方向
if(event.wheelDelta>0 || event.detail<0){
box1.style.height = box1.clientHeight - 10 +"px";
}else{
box1.style.height = box1.clientHeight + 10 +"px";
-
当滚动条滚动式，如果有浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，如果不希望发生，则可以取消默认行为。
-
使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false。
需要使用event来取消默认行为：event.preventDefault();
但是IE8不支持event.preventDefault();，使用时会直接报错。
8、键盘事件
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。 -
onkeydown
按键被按下
对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发。
当连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快。这种设计是为了防止误操作的发生。 -
onkeyup
按键被松开 -
keyCode可以获取按键的编码。
通过它可以判断哪个按键被按下。
除了keyCode之外，事件对象中还提供了几个属性：
altKey；ctrlKey；shiftKey；
这三个用来判断alt，ctrl，shift是否被按下。若被按下返回true，反之false。 -
使文本框中不能输入数字（数字48-57）
在文本框中输入内容，属于onkeydown的默认行为
如果在onkeydown中取消了默认行为，则输入的内容不会出现在文本中。
9、BOM：浏览器对象模型
BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象，用来完成对浏览器的操作。
BOM对象： -
Window
代表的是整个浏览器窗口，同时window也是网页中的全局对象。 -
Navigator
代表的当时浏览器的信息，通过该对象可以来识别不同的浏览器。 -
Location
代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面 -
History
代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，且操作值在当次访问时有效。 -
Screen
代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关的信息。
这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。
10、 Navigator
代表的当时浏览器的信息，通过该对象可以来识别不同的浏览器。
现在 Navigator对象中的大部分属性已经不能帮助我们识别浏览器了。
一般我们只会使用userAgent来判断浏览器的信息。
userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent。
如果通过userAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息，比如:ActiveObject
11、 History：对象可以用来操作浏览器向前或向后翻页。
length：
属性，可以获取到当成访问的链接数量alert(history.length);
back():
可以用来回退到上一个页面，作用和浏览器的回退按钮一样。history.back();
forward()：
可以跳转下一个页面，作用和浏览器的前进按钮一样。history.forward();
go():
可以用来跳转到指定页面。
他需要一个整数作为参数：
1：表示向前跳转一个页面，相当于forward()
2：表示向前跳转两个页面
-1：表示向后跳转一个页面
-2:表示向后跳转两个页面
12、Location：该对象中封装了浏览器的地址栏信息。
如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）。
assign():
用来跳转到其他的页面，作用和直接修改location一样。
reload()：
用于重新加载当前页面，作用和刷新按钮一样
如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面。
replace():
可以使用一个新的页面替换当前页面，调用完毕也会跳转页面。
不会生成历史记录，不能使用回退按钮回退。
13、定时调用
setInterval()
定时调用。可以将一个函数，每隔一段时间执行一次。
参数：
1、回调函数，该函数会每隔一段时间被调用一次。
2、每次调用间隔的事件，单位是毫秒。
var num=1;
var timer = setInterval(function){
count.innerHTML = num++;
},1000);
返回值：
返回一个Number类型的数据
这个数字用来作为定时器的唯一标识。
图片添加定时器的循环:index %= imgArr.length;
clearInterval()可以用来关闭一个定时器。
方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器。
clearInterval(timer)；
clearInterval()可以接收任意参数，
如果参数是一个有效的定时器的标识，则停止对应的定时器
如果参数不是一个有效的标识，则什么也不做。
在开启定时器之前，需要将上一个定时器关闭。
14、延时调用
延时调用一个函数不马上执行，而是隔一段时间后再执行，而且只会执行一次。
延时调用和定时调用的区别：定时调用会执行多次，延时调用只会执行一次。
延时调用和定时调用实际上是可以相互替代的，在开发中根据自己的需要选择。
setTimeout()
clearTimeout()关闭一个延时调用
15、类的操作。
通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面。不方便。
我们可以通过修改元素的class属性来间接的修改样式。
这样可以使表现和行为进一步的分离。box.className="b2";
- 定义一个函数，用来向一个元素中添加指定的class属性值
参数：
obj 要添加class属性的元素
cn 要添加的class值
function addClass(obj,cn){
obj.className += " "+cn;
}
- 判断一个元素中是否含有指定的class属性值。如果有返回ture，反之false
function hasClass(obj,cn){
//判断obj中有没有cn class
//创建正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
alert(reg);
return reg.text(obj.className);
}
- 删除一个元素中指定的class属性
function removeClass(obj,cn){
var reg = new RegExp("\\b"+cn+"\\b");
obj.className = obj.className.replace(reg,"");
}
- toggleClass可以用来切换一个类
如果元素中具有该类，则删除；不具有，则添加。
function toggleClass(obj,cn){
//判断obj中是否含有cn
if(hasClass(obj,cn)){
removeClass(obj,cn);
}else{
addClass(obj,cn);
}
}
16、JSON
JSON中允许的值：
字符串；数值；布尔值；null；对象；数组。
扫一扫
2227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
