这些天对在js的整理学习中,发现了一个我以前不知道的js事件处理方式,相信很多同学在起初学习web开发的时候,可能会直接将onclick之类的属性直接赋值放到html标签内,这样会使页面代码显得复杂混乱,为了让功能和代码分离,找出以下几种事件处理程序。
事件处理程序
以下代码示例中都以单机事件为例
1.HTML事件处理
<input type="button" onclick="demo()" value="按钮"/>
<script type="text/javascript">
function demo(){
alert("HTML事件");
}
</script>
这种处理方式也就是最基础的事件处理方式,是将事件直接添加到HTML结构中。
2.DOM 0级事件处理
把一个函数赋值给一个时间处理程序属性
<input type="button" value="按钮1" id="btn"/>
<script type="text/javascript">
var btn=document.getElementById("btn");
btn.onclick=function(){alert("DOM 0级事件处理");}//将会被覆盖
btn.onclick=function(){alert("DOM 0级事件处理1");}
//只显示第二个onclick事件的执行效果
btn.onclick=null;//移除onclick事件
</script>
3.DOM 2级事件处理
方法用于向指定元素添加事件句柄
addEventListener(“事件名”,”事件处理函数”,”布尔值”); 布尔值一般忽略不写
true:事件捕获
false:事件冒泡
removeEventListener(“事件名”,”事件处理函数”);
<input type="button" value="按钮2" id="btn1"/>
<script type="text/javascript">
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
function demo1(){
alert("DOM2级事件处理程序1");
}
function demo2(){
alert("DOM2级事件处理程序2");
}
//两个单机事件可以依次弹出,不会被覆盖
btn1.removeEventListener("click",demo2);//只移出demo2事件
</script>
4.IE事件处理程序
兼容IE8及以下版本的浏览器
attachEvent(”事件名”,”事件处理函数”)
detachEvent(”事件名”,”事件处理函数”)
<input type="button" value="按钮3" id="btn2"/>
<script type="text/javascript">
var btn2=document.getElementById("btn2");
btn2.attachEvent("onclick",demo3);
function demo3(){
alert("IE事件处理程序");
}
btn1.detachEvent("click",demo2);//只移出demo2事件
</script>
注意:事件名必须写成onclick,一定要加on
5.跨越浏览器时间处理
一般在项目中为了兼容多种浏览器可以使用以下这中写法:
<input type="button" id="btn2"/>
<script type="text/javascript">
var btn2=document.getElementById("btn2");
if(btn2.addEventListener){
//一般现在常用的浏览器将执行 DOM2级事件处理程序
btn2.addEventListener("click",demo3);
}else if(btn2.attachEvent){
//如果是IE8及以下版本将执行 IE事件处理程序
btn2.attachEvent("onclick",demo3);
}else{
//如果是早期的一些浏览器将执行 0级事件处理程序");
btn.onclick=demo3();
}
function demo3(){
alert("各种浏览器兼容的事件处理写法");
}
</script>
对于这种事件处理方法感觉很像jquery中的处理方式,事件方法会触发匹配元素的事件,或将函数绑定到所匹配元素的某个事件。
以后把 js代码置于单独的 .js 文件中,那页面的代码量就少多了,而且十分清晰,易于维护!
这是我在CSDN上的第一篇博客,在以前做的一些项目中,遇到的很多问题也是通过这个平台解决的,最近可以闲下来总结总结并学习一些新的内容,突然有个想法,写个博客边总结边学习,代码跟文字分离的也比较清晰,顺便分享一下自己的学习心得和经验。希望从现在开始,不管是在学校还是工作之后,都能定期做一个总结,对自己有一个新的认识。
马上也大四了,希望我的求职历程也能顺利吧!嗯就这样了。。。。