浏览器兼容笔记(1)
来源:互联网 发布:水电算量软件 编辑:程序博客网 时间:2024/06/01 07:56
文章内容参考自慕课网
一、事件处理程序
- html事件处理程序,直接将事件绑定在html代码中,导致耦合性高 ,不利于程序的更改;
- DOM0级事件处理程序 ,在JavaScript中使用对象的方法来处理事件,如
object.onclick = null
把点击事件属性赋值为null,IE有的版本不兼容; - DOM2级事件处理程序,调用对象的
addEventListener() and removeEventListener()
,接受三个参数 - 要处理的事件名、作为事件处理的程序函数、布尔值;如object.addEventListener('click',showMessage,false)
这里的true和false,true表示是在事件捕获中执行,false表示的是冒泡过程中执行;
IE浏览器事件处理程序的方法
IE有自己的事件处理程序的方法,attachEvent()
和detachEvent()
,函数中的参数只有两个,要处理的事件名、作为事件处理的程序函数;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浏览器兼容性笔记-事件处理程序</title></head><body> <input id="btn1" type="button" value="这是按钮一" /> <script type="text/javascript"> var btn1 = document.getElementById("btn1"); function showMessage(){ alert("当前的按钮被点击了!"); } //给不同的浏览器的事件处理程序封装 //element表示事件的对象,type表示调用的是什么类别的事件,handler表示事件发生后要执行的函数 var eventUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on"+type]=handler; } }, removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent){ element.detachEvent("on"+type,handler); }else{ element["on"+type]=null; } } } //调用事件 eventUtil.addHandler(btn1,'click',showMessage); </script></body></html>
0 0
- 浏览器兼容笔记(1)
- 浏览器兼容笔记(2)
- 多浏览器兼容分析(笔记整理)
- 浏览器兼容笔记
- ie浏览器兼容笔记
- ie浏览器兼容笔记
- 前端(1)---浏览器兼容
- 浏览器兼容 1 概要
- 浏览器兼容(作业)
- 浏览器兼容性处理(1)各浏览器csshack兼容表
- 杂记(兼容IE浏览器)
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 浏览器兼容
- 数位DP
- 【学习汇总】DIV水平居中
- QWidget: Must construct a QApplication before a QWidget
- [BZOJ1036][ZJOI2008]树的统计Count
- Android Volley完全解析(四),带你从源码的角度理解Volley
- 浏览器兼容笔记(1)
- JavaWeb中的文件上传与下载
- static特别用法【静态导包】——Java包的静态导入
- 林小欣的every day
- 用requests爬取百度搜索数据
- lightoj 1030 概率dp
- 林小欣的every day
- 27.leetcode题目137: Single Number II(考察位操作)
- [Android 系统源代码研究] SystemService启动