javascript中对各种事件处理程序的个人总结
来源:互联网 发布:淘宝怎么进自己的店铺 编辑:程序博客网 时间:2024/04/30 08:07
这些天对在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上的第一篇博客,在以前做的一些项目中,遇到的很多问题也是通过这个平台解决的,最近可以闲下来总结总结并学习一些新的内容,突然有个想法,写个博客边总结边学习,代码跟文字分离的也比较清晰,顺便分享一下自己的学习心得和经验。希望从现在开始,不管是在学校还是工作之后,都能定期做一个总结,对自己有一个新的认识。
马上也大四了,希望我的求职历程也能顺利吧!嗯就这样了。。。。
- javascript中对各种事件处理程序的个人总结
- 学习过程中对遇到的js 事件集中处理的个人白话总结
- symfony2中对异常的处理,个人总结
- C++中string类对字符串的各种处理总结
- JavaScript的事件处理程序
- android 个人对事件传递的总结
- JavaScript DOM 事件处理程序总结
- JavaScript 事件流、事件处理程序及事件对象总结
- JavaScript 事件流、事件对象总结和事件处理程序
- JavaScript 事件流、事件处理程序及事件对象总结
- C#中事件处理的个人体会
- C#中事件处理的个人体会
- C#中事件处理的个人体会
- C#中事件处理的个人体会
- C#中事件处理的个人体会
- C#中事件处理的个人体会
- C#中事件处理的个人体会
- C#中事件处理的个人体会
- 杭电 1874 畅通工程续(Dijkstra)
- 操作系统 时间片轮转调度算法
- python_学习笔记0817
- python时间日期操作
- 京东收藏夹
- javascript中对各种事件处理程序的个人总结
- hdu1874畅通工程续【最短路dijkstra&&SPFA&&floyd】
- 解决YUM无法正常工作
- 关于reactivecocoa出现 unrecognized selector sent to instance错误
- uva 503 - Parallelepiped walk(几何)
- 编程一开始就应该养成的好习惯
- Calling Circles
- 组合数的计算
- javascript的简单逻辑题目