事件处理之跨浏览器

Posted 2020-08-15 Aubin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件处理之跨浏览器相关的知识，希望对你有一定的参考价值。

在浏览器众多的今天，跨浏览器显得尤为重要

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>事件的跨浏览器</title>
 6 </head>
 7 <body>
 8     <input type="button" value="按钮" id=‘btn1‘>
 9 </body>
10     <script type="text/javascript">
11         var btn1=document.getElementById(‘btn1‘);
12         function test(){
13             alert(‘OK可以添加事件‘);
14         }
15         //将能力检测封装到一个对象当中
16         //能力检测为判断你能用哪个事件处理就用那个事件处理
17         var p={
18             //定义一个添加事件的函数
19             addshijian:function(element,shijian,hanshu){
20                 //↓判断如果浏览器可以使用DOM2级事件处理就用DOM2级
21                 if(element.addEventListener){
22                     element.addEventListener(shijian,hanshu,false);
23 
24                 //↓判断如果浏览器可以使用IE事件处理就是IE事件处理
25                 }else if(element.attachEvent){
26                     element.attachEvent(‘on‘+shijian,hanshu);
27 
28                 //↓以上都不是那么使用DOM0级事件处理
29                 }else{
30                     element[‘on‘+shijian]=hanshu;
31                 }
32             }
33         }
34         //↓通过创建的对象调用事件处理，传入适当的参数
35         p.addshijian(btn1,‘click‘,test);
36     </script>
37 </html>

以上是关于事件处理之跨浏览器的主要内容，如果未能解决你的问题，请参考以下文章