js_事件小结
2017-05-08 12:12
337 查看
1 事件:js和html的交互是通过事件实现的。
(1)事件流的是从页面中接收事件的顺序,但是:IE的事件流叫事件冒泡,Netscape提出的是事件捕获。由于老版本的浏览器不支持事件捕获,我们也建议读者放心使用事件冒泡,在有特殊需要的时候再使用事件捕获。另外还有“DOM2级事件”--DOM事件流:包括事件捕获阶段,处于目标阶段和事件冒泡阶段。
(2)事件处理程序(事件监听器):
1--HTML事件处理程序:即我们直接在HTML代码中添加事件处理程序,如下面这段代码:
<input id="btn1"
value="按钮" type="button" onclick="showmsg();">
特点:html代码和js的耦合性太强
2--DOM0级事件处理程序:即为指定对象添加事件处理,看下面的一段代码
<input id="btn2" value="按钮" type="button">
<script>
var
btn2= document.getElementById("btn2");
btn2.onclick=function(){
alert("DOM0级添加事件处理");
}
btn.onclick=null;//如果想要删除btn2的点击事件,将其置为null即可
</script>
特点:相对于HTML事件处理程序,DOM0级事件html代码和js代码的耦合性已经大大降低。
3--DOM2级事件处理程序:DOM2也是对特定的对象添加事件处理程序,但是主要涉及到两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值(是否在捕获阶段处理事件),看下面的一段代码:
<input id="btn3" value="按钮" type="button">
<script>
var btn3=document.getElementById("btn3");
btn3.addEventListener("click",showmsg,false);//这里我们把最后一个值置为false,即不在捕获阶段处理,一般来说冒泡处理在各浏览器中兼容性较好
function showmsg(){
alert("DOM2级添加事件处理程序");
}
btn3.removeEventListener("click",showmsg,false);//如果想要把这个事件删除,只需要传入同样的参数即可
</script>
特点:添加删除事件处理的时候,该方法更直接简便。但在删除事件处理的时候,传入的参数一定要跟之前的参数一致,否则删除会失效!例如,如果添加时是匿名函数,则无法删除。
4--IE事件处理程序:IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。这两个方法接受相同的两个参数:事件处理程序名称和事件处理程序函数。由于IE只支持时间冒泡,所有通过attachEvent()添加的事件处理程序都会被添加包冒泡阶段。
var btn=document.getElementById("mybtn");
btn.attachEvent("onclick",function(){
alert("clicked");
});
btn.attachEvent("onclick",function(){
alert("hello world!");
});
这里调用了两次attachEvent(),为同一个按钮添加了两个不同的事件处理程序。不过,与DOM方法不同的是,这些事件处理程序不是以它们的添加顺序执行,而是以相反的顺序被触发。单击这个例子中的按钮:首先看到的是"hello
world",然后才是"clicked".
btn.detachEvent("onclick",hander}); //移除
5--跨浏览器事件处理程序:这里提供一个EventUtil对象,可以用这个对象来处理浏览期间的差异
var hander= function(){
alert("clicked");
};
//这里省略了部分代码
EventUtil.addHandler(btn,"click",hander);
//这里省略了部分代码
EventUtil.removeHandler(btn,"click",hander); //移除之前添加的事件处理程序
(3)事件对象:触发DOM上某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息
具体而言,又
959a
分为DOM中的事件对象和IE中的事件对象
事件对象:(DOM)event,(IE)window.event
事件的目标:(DOM)target,(IE)srcElement
跨浏览器事件对象:
var eventUtil = {
getEvent : function(event){
return event ? event : window.event;
};
getTarget : function(event){
return event.target || event.srcElement;
};
preventDefault : function(event){ //取消事件默认行为
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
};
stopPropagation : function(event){ //取消事件进一步冒泡
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
};
};
2 事件委托:对“事件处理程序过多”问题的解决方案。利用事件冒泡,指定一个事件处理程序,可以管理某一类型的事件。
优点:(1)document对象很快就可以访问到;(2)在页面中设置事件处理程序所需的时间更少;(3)整个页面占用的内存空间更少,提升整体性能(每个函数都是对象,都会占用内存,内存中对象越多,性能就会越差)
(1)事件流的是从页面中接收事件的顺序,但是:IE的事件流叫事件冒泡,Netscape提出的是事件捕获。由于老版本的浏览器不支持事件捕获,我们也建议读者放心使用事件冒泡,在有特殊需要的时候再使用事件捕获。另外还有“DOM2级事件”--DOM事件流:包括事件捕获阶段,处于目标阶段和事件冒泡阶段。
(2)事件处理程序(事件监听器):
1--HTML事件处理程序:即我们直接在HTML代码中添加事件处理程序,如下面这段代码:
<input id="btn1"
value="按钮" type="button" onclick="showmsg();">
特点:html代码和js的耦合性太强
2--DOM0级事件处理程序:即为指定对象添加事件处理,看下面的一段代码
<input id="btn2" value="按钮" type="button">
<script>
var
btn2= document.getElementById("btn2");
btn2.onclick=function(){
alert("DOM0级添加事件处理");
}
btn.onclick=null;//如果想要删除btn2的点击事件,将其置为null即可
</script>
特点:相对于HTML事件处理程序,DOM0级事件html代码和js代码的耦合性已经大大降低。
3--DOM2级事件处理程序:DOM2也是对特定的对象添加事件处理程序,但是主要涉及到两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值(是否在捕获阶段处理事件),看下面的一段代码:
<input id="btn3" value="按钮" type="button">
<script>
var btn3=document.getElementById("btn3");
btn3.addEventListener("click",showmsg,false);//这里我们把最后一个值置为false,即不在捕获阶段处理,一般来说冒泡处理在各浏览器中兼容性较好
function showmsg(){
alert("DOM2级添加事件处理程序");
}
btn3.removeEventListener("click",showmsg,false);//如果想要把这个事件删除,只需要传入同样的参数即可
</script>
特点:添加删除事件处理的时候,该方法更直接简便。但在删除事件处理的时候,传入的参数一定要跟之前的参数一致,否则删除会失效!例如,如果添加时是匿名函数,则无法删除。
4--IE事件处理程序:IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。这两个方法接受相同的两个参数:事件处理程序名称和事件处理程序函数。由于IE只支持时间冒泡,所有通过attachEvent()添加的事件处理程序都会被添加包冒泡阶段。
var btn=document.getElementById("mybtn");
btn.attachEvent("onclick",function(){
alert("clicked");
});
btn.attachEvent("onclick",function(){
alert("hello world!");
});
这里调用了两次attachEvent(),为同一个按钮添加了两个不同的事件处理程序。不过,与DOM方法不同的是,这些事件处理程序不是以它们的添加顺序执行,而是以相反的顺序被触发。单击这个例子中的按钮:首先看到的是"hello
world",然后才是"clicked".
btn.detachEvent("onclick",hander}); //移除
5--跨浏览器事件处理程序:这里提供一个EventUtil对象,可以用这个对象来处理浏览期间的差异
var EventUtil = { addHandler: function(element, type, handler){ // 该方法接受3个参数:要操作的元素,事件名称和事件处理程序函数 if (element.addEventListener){ //检查传入的元素是否存在DOM2级方法 element.addEventListener(type, handler, false); // 若存在,则使用该方法 } else if (element.addEvent){ // 如果存在的是IE的方法 element.attachEvent("on" + type, handler); //则使用IE的方法,注意,这里的事件类型必须加上"on"前缀。 } else { // 最后一种可能是使用DOM0级 element["on" + type] = hander; } }, removeHandler: function(element, type, handler){ // 该方法是删除之前添加的事件处理程序 if (element.removeEventListener){ //检查传入的元素是否存在DOM2级方法 element.removeEventListener(type, handler, false); // 若存在,则使用该方法 } else if (element.detachEvent){ // 如果存在的是IE的方法 element.detachEvent("on" + type, handler); //则使用IE的方法,注意,这里的事件类型必须加上"on"前缀。 } else { // 最后一种可能是使用DOM0及方法(在现代浏览器中,应该不会执行这里的代码) element["on" + type] = null; } } };var btn =document.getElementById("mybtn");//使用
var hander= function(){
alert("clicked");
};
//这里省略了部分代码
EventUtil.addHandler(btn,"click",hander);
//这里省略了部分代码
EventUtil.removeHandler(btn,"click",hander); //移除之前添加的事件处理程序
(3)事件对象:触发DOM上某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息
具体而言,又
959a
分为DOM中的事件对象和IE中的事件对象
事件对象:(DOM)event,(IE)window.event
事件的目标:(DOM)target,(IE)srcElement
跨浏览器事件对象:
var eventUtil = {
getEvent : function(event){
return event ? event : window.event;
};
getTarget : function(event){
return event.target || event.srcElement;
};
preventDefault : function(event){ //取消事件默认行为
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
};
stopPropagation : function(event){ //取消事件进一步冒泡
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
};
};
2 事件委托:对“事件处理程序过多”问题的解决方案。利用事件冒泡,指定一个事件处理程序,可以管理某一类型的事件。
优点:(1)document对象很快就可以访问到;(2)在页面中设置事件处理程序所需的时间更少;(3)整个页面占用的内存空间更少,提升整体性能(每个函数都是对象,都会占用内存,内存中对象越多,性能就会越差)
相关文章推荐
- js事件小结(一般事件)
- JS中onpropertychange和onchange事件区别小结
- js学习小结(十四)2014.5.23(keyboard事件,mouseEvent事件event的相关属性,ie事件注册的N中方式)
- JS中onpropertychange和onchange事件区别小结
- js事件代理和js知识一些小结1
- js 事件小结 表格区别
- JavaScript事件学习小结(二)js事件处理程序
- js学习小结(十二)2014.5.20(事件冒泡以及事件对象)
- js学习小结(五)2014.5.1(视口,window的onscroll事件,返回顶端特效)
- js中获取事件对象的方法小结
- js下关于onmouseout、事件冒泡的问题经验小结
- JS多播事件处理问题小结
- JS事件模型小结
- js学习小结(十三)2014.5.20(mouse事件和background-position属性)
- js中获取事件对象的方法小结
- JS中onpropertychange和onchange事件区别小结
- js中获取事件对象的方法小结
- JS 控件事件小结
- 小结Node.js中非阻塞IO和事件循环
- JavaScript事件学习小结(五)js中事件类型之鼠标事件