1. 事件理解
1.1 什么是事件
事件是用户或浏览器自身执行的某个动作,诸如点击click,
JavaScript制作交互效果,离不开事件。所谓的事件,就是用户的某个行为,能够触发一个函数的执行
1.2 绑定事件绑定:
oDiv.onclick = function(){
}
这个匿名函数,平时永远不会执行,必须等到事件的发生才执行。
响应某个时间的函数叫做事假处理程序,通常我们俗称为事件处理函数,事件的处理程序是以‘on-’开始的,
因此点击click的事件处理程序是onclick
2. DOM0事件绑定
DOM分为级别,DOM的标准分0级、1级、2级、3级,不同的标准,标准一直在升级。
DOM1
级没有定义相关的内容,
DOM3
级只是在DOM2
级基础上增加了更多的时间类型,
所以我们学习的重点还是DOM0级和DOM2的事件绑定
接下来先了解DOM标准中的0级的事件绑定方法:
2.1 DOM0 级事件绑定的用法
语法:
dom.on+type = fn;
dom: 绑定事件的对象
type: 为事件的类型
fn : 为事件触发时执行的函数
// 得到这个box
var oDiv = document.getElementById("box");
//事件
oDiv.onclick = function(){
alert("你好,点我干嘛,我烦着呢!!");
}
也可以绑定一个有名的函数,当做事件处理程序::
oDiv.onclick = fun; //绑定的是函数,而不是函数的执行,所以不加圆括号。
function fun(){
alert("你好,点我干嘛,我烦着呢!!");
}
所以现在你就人格升华了,原来我们想要一个函数执行,必须调用这个函数,比如fun();
但是现在你知道了,一个函数可以当做一个事件的处理函数,当这个事件发生的时候,函数也能执行了。
2.2 DOM0级绑定事件处理函数的次数
注意:一个dom对象同一个事件类型只能绑定一个事件处理函数
// 得到这个box
var oDiv = document.getElementById("box");
// 第一次绑定点击事件事件
oDiv.onclick = function(){
alert("第一次绑定点击事件事件");
}
//第二次绑定点击事件
oDiv.onclick = function(){
alert("第二次绑定点击事件事件!");
}
我们会发现弹出的是“第二次绑定点击事件”,后面的会把前面的覆盖,就好像给一个对象的属性付了两次值,发生覆盖
2.3 DOM0级解除事件绑定
语法:
dom.on+type = null
通过给元素的事件属性上绑定空对象null 来达到解除事件绑定
oDiv.onclick = null;
3.批量绑定事件和事件排他
3.1 批量绑定事件
-
利用for循环批量绑定事件。
for(var i = 0 ; i < ps.length ; i++){ ps[i].onclick = function(){ alert("你好"); } }
for循环包裹添加绑定事件的语句。
-
对序号的影响
for(var i = 0 ; i < ps.length ; i++){ ps[i].onclick = function(){ alert("我是老" + i + "点我干嘛?!!"); } }
异步造成的问题又出现了,所以每个盒子点击之后,都是7了,而不是我们预想的0、1、2、3、4、5、6。
-
利用闭包解决异步语句造成影响:
for(var i = 0 ; i < ps.length ; i++){ (function(m){ ps[m].onclick = function(){ alert("我是老" + m + "点我干嘛?!!"); } })(i); }
-
除了IIFE之外,还有一种方法,就是强制添加属性的方法:
任何一个对象,我们都可以通过点语法来设置新的属性。
for(var i = 0 ; i < ps.length ; i++){ aBox[i].idx= i; //先不要着急设置监听,先编号 aBox[i].onclick = function(){ alert("我是老" + this.idx+ "点我干嘛?!!"); //自己的编号 } }
3.2 对应和排他
-
对应:点击第一排的p,第二排对应的p变红:
aBox[this.idx].style.backgroundColor = “red”;
-
排他:
for(var i = 0 ; i < ps.length ; i++){ aBox[i].onmouseover = function(){ //让所有的p都是灰色 for(var j = 0 ; j < ps.length ; j++){ aBox[j].style.backgroundColor = "#ccc"; } //让自己变红 this.style.backgroundColor = "red"; } }
4. DOM2级事件监听
DOM2级做了新的规范,不用on***来绑定监听了,而是使用一个方法
4.1 主流浏览器事件的绑定和解绑方法
-
绑定事件方法
// 绑定事件的方法 addEventListener();
add添加,Event事件,Listener监听
它接受三个参数:什么事件、函数、是否监听捕获阶段。
oBox.addEventListener("click",function(){},false);
第1个参数:事件名不用写on,
click
、mouseover
、mouseout
第2个参数:函数可以是匿名函数,也可以是有名函数
第3个参数:布尔值(默认false,可以省略),true表示监听捕获、false表示监听冒泡阶段
示例:
oBox.addEventListener("click", function(){
alert("box1被点击,捕获阶段");
}, false)
第三个参数是true,表示监听box1
的捕获阶段的单击事件。
-
事件绑定的this指向
oBox.addEventListener('click',function(){ console.log(this); },false)
发现this指向oBox元素自身
-
可以绑定多个事件处理程序
addEventListener可以重复添加相同事件名的事件:
oBox.addEventListener("click", function(){ alert("嘻嘻"); }, false); oBox.addEventListener("click", function(){ alert("哈哈"); }, false);
我们给box1的绑定了两个事件监听,不会覆盖,两个监听的函数都会执行,按照代码执行顺序。
以下写法不是多个,而是同一个事件处理程序
```js
oBox.addEventListener("click", fn, false);
oBox.addEventListener("click",fn, false);
function fn(){
alert("哈哈");
}
```
-
解绑事件
使用方法removeEventListener
oBox.addEventListener("click", fn, false); // 解绑有名函数 oBox.removeEventListener("click",fn, false); function fn(){ alert("哈哈"); } // 解绑匿名函数 oBox.addEventListener("click",function(){ console.log(11); oBox.removeEventListener("click",arguments.callee, false); }, false);
4.2. 低版本IE的事件的绑定和解绑方法
IE永远是个奇葩,
IE 6、7、8不支持
addEventListener()
方法,
-
IE 8及以下的事件绑定
需要加on
oBox.attachEvent("onclick",函数)
没有第三个参数,也就是说,不能选择监听捕获、冒泡。只能监听冒泡。
box1.attachEvent("onclick", function(){ alert("box1"); });
第一个参数,必须写on,和addEventListener()不一样;
第二个参数,就是事件处理函数
没有第三个参数,只能监听冒泡。所以和on***写法一样。
-
低版本IE的事件监听方法的this指向
oBox.attachEvent("onclick", function(){ console.log(this === window); //true });
低版本IE的事件监听attachEvent:**事件处理函数里面的this,不是触发事件的这个元素,而是window
-
可以绑定多个事件处理程序
同一个事件名的多个监听,会反着执行:
oBox.attachEvent("onclick", function(){ alert(1); }); oBox.attachEvent("onclick", function(){ alert(2); }); oBox.attachEvent("onclick", function(){ alert(3); }); // 弹出3、2、1。
-
解绑事件
使用方法removeEventListener
var oBox = document.getElementById("box"); // 绑定事件 oBox.attachEvent("onclick", fn); // 解除事件绑定 oBox.detachEvent('onclick' ,fn); function fn(){ alert("嘻嘻"); }
4.3 封装兼容方法
-
DOM2级事件监听兼容
function addEvent(obj,type,callback){ if(obj.addEventListener){ obj.addEventListener(type,callback,false); }else if(obj.attachEvent){ obj.attachEvent("on" + type,function(){ callback.call(obj); }); }else{ obj["on" + type] = callback; } }
上面我们学习的就是一些理论知识,总结一下:
4.4 DOM2级事件的绑定和解绑罗列
-
事件监听的兼容问题
-
IE8以上主流浏览器
dom.addEventListener(type,fn,false)
<span style='color:red;'>this指向dom本身</span>
-
IE8及以下
dom.attachEvent(‘on‘+type,fn)
<span style='color:red;'>this指向window</span>
-
- 解绑事件处理函数
IE8以上主流浏览器
dom.removeEventListener(type,fn,false)
IE8及以下
dom.detachEvent(‘on’+type,fn)
5. 事件的分类
5.1 鼠标事件
onclick
点击鼠标左键触发
oncontextmenu
点击鼠标右键触发(浏览器有默认的右键行为)不常用
ondblclick
双击鼠标左键触发
onmousedown
鼠标任意键按住时触发
onmouseup
鼠标任意键抬起时触发
onmouseenter
鼠标进入元素时触发
onmouseleave
鼠标离开元素时触发
onmouseover
鼠标进去元素时触发
onmouseout
鼠标离开元素时触发
onmousemove
鼠标在元素上移动触发 ===>持续触发注意:
onclick
=onmousedown
+onmouseup
5.2 滚轮事件
onmousewheel
鼠标滚轮在元素上滚动时触发(IE+chrome)
DOMMouseScroll
鼠标滚轮在元素上滚动时触发(firefox
)
5.3 键盘事件
onkeydown
按住键盘上任意键触发 ==>持续触发
onkeypress
按住键盘上部分键触发 ==>持续触发
onkeyup
键盘上按键抬起时触发
5.4 资源事件
onload
页面或者图片加载完成时触发
5.5 window事件
onresize
在窗口大小改变时触发
onscroll
在页面滚动的时候触发
5.6 焦点事件
onfocus
得到焦点
onblur
失去焦点
网友评论