JS-DOM2级事件对象跨浏览器处理（已封装）

复制代码
 1 var eventUill = {
 2     //添加事件
 3     addHander: function(element, type, handler) {
 4         if(element.addEventListener) {
 5             element.addEventListener(type, handler, false);
 6         } else if(element.attachEvent) {
 7             element.attachEvent('on' + type, handler);
 8         } else {
 9             element['on' + type] = handler;
10         }
11     },
12     //移除事件
13     removeHander: function(element, type, handler) {
14         if(element.removeEventListener) {
15             element.removeEventListener(type, handler, false);
16         } else if(element.detachEvent) {
17             element.detachEvent('on' + type, handler);
18         } else {
19             element['on' + type] = handler;
20         }
21     },
22     //获取到拥有这个事件的标签名称——事件对象（如input）
23     getEvent: function(event){
24         return event?event:window.event;//注意：返回后需要调用。可配合nodeName，来单独获取到标签的名字。
25     },
26     //获取事件的类型
27     getType: function(event){
28         return event.type;//注意：返回后需要调用。
29     },
30     //获取事件来自于哪个元素
31     getElement: function(event){
32         return event.target || event.srcElement;
33     },
34     //阻止、取消事件的默认行为/属性发生
35     preventDefault: function(event){
36         if(event.preventDefault){
37             event.preventDefault();
38         }else{
39             event.returnValue = null;
40         }
41     },
42     //阻止冒泡行为
43     stopPropagation: function(event){
44         if(event.stopPropagation){
45             event.stopPropagation();
46         }else{
47             event.cancelBubble = true;
48         }
49     }
50     
51     
52     
53     
54 }
DOM2级事件对象的跨浏览器处理——js源码
复制代码

遇到的小bug总结：

  1. 　　封装的库根本找不到，颜色都是灰的，说明代码是错的，通过在js中添加了一个var eventUill = {}，建立了一个对象，html这里调用对象的addHander,
  2. 　　eventUill找不到，发现，引用外部库的js代码写在来调用库中函数的下边，根据文档流的优先级，说明还没有调出eventUill之前就执行函数了所以出错。那就把调用的外部库写到最上面，让他优先调用。
  3. 　　addEventLister不对，把ele改成了element，是不是以后写，这里也必须写element呢？全部改成element后变绿了，代码正确。
  4. 　　说element为空。那么element接受传过来的参数是空的，但是html中的btn处是没有问题的，我getElementById的代码也没有错。看来是老毛病又犯了。js写在html上面，获取id为btn的按钮，根据文档流，他还没有读到input的时候就去获取，你让他去哪里获取。找不到btn，自然传过去的是undefined。紧接着element就成null了。解决就是加上window。onload=function(所有的js代码)调用id的代码写到html的下边。这也是js习惯上要放到body的后边的理由。

以下是测试时的html文件，DOM2级事件-跨浏览器处理.js就是上面的js源码。

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>dom2级事件跨浏览器处理-封装库</title>
        <script src="DOM2级事件-跨浏览器处理.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            window.onload = function() {
                    var btn = document.getElementById('btn');
                    eventUill.addHander(btn, 'click', function() {
                        alert('点击后通过封装的库辗转调用了这个匿名函数');
                        alert(eventUill.getEvent(btn).nodeName);
                        alert(eventUill.getElement(btn));
                    });
                }
        </script>

    </head>

    <body>
        <input type="button" value="点击" id="btn" />
    </body>

</html>
html
复制代码

 

posted @   xing.org1^  阅读(461)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
SQL AI 助手