关于javascript中的事件学习及总结

最新推荐文章于 2024-08-11 18:40:36 发布
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量86 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/junyistar/archive/2008/04/09/1129206.html
版权
1关于事件对象
ie:事件对象是window对象的一个属性event
dom：event对象是作为唯一参数传递给事件处理函数。arguments[0]

2关于IE与DOM事件兼容性的总结(参考javascript高级程序设计)
DOM属性/方法IE属性/方法
altKeyaltKey
bubbles-
buttonbutton
cancelBubblecancelBubble
charCodekeyCode
clientXclientX
clientYclientY
ctrlKeyctrlKey
currentTarget-
detail-
eventPhase-
isChar-
keyCodekeyCode
metaKey-
pageXclientX+document.body.scrollLeft
pageYclientY+document.body.scrollTop
preventDefault()returnValue = false
relateTargetfromElement/toElement
screenXscreenX
screenYscreenY
shiftKeyshiftKey
stopPropagation()cancelBubble = true
targetsrcElement
timeStamp-
typetype
具体的属性和方法意思我就不写清楚了，有不太明白的可以baidu、google一下~

3关于跨平台事件（针对第二点各个属性在ie和ff下的不同）
在这里javascript高级程序设计一书总结了一个容器对象，可以方便的解决事件兼容性问题。
具体如下：
EventUtil
var EventUtil = new Object();
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = fnHandler;
    }
};
        
EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else { 
        oTarget["on" + sEventType] = null;
    }
};

EventUtil.formatEvent = function (oEvent) {
    if (isIE && isWin) {
        oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
        oEvent.eventPhase = 2;
        oEvent.isChar = (oEvent.charCode > 0);
        oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
        oEvent.pageY = oEvent.clientY + document.body.scrollTop;
        oEvent.preventDefault = function () {
            this.returnValue = false;
        };

        if (oEvent.type == "mouseout") {
            oEvent.relatedTarget = oEvent.toElement;
        } else if (oEvent.type == "mouseover") {
            oEvent.relatedTarget = oEvent.fromElement;
        }

        oEvent.stopPropagation = function () {
            this.cancelBubble = true;
        };

        oEvent.target = oEvent.srcElement;
        oEvent.time = (new Date).getTime();
    }
    return oEvent;
};

EventUtil.getEvent = function() {
    if (window.event) {
        return this.formatEvent(window.event);
    } else {
        return EventUtil.getEvent.caller.arguments[0];
    }
};

4里面会用到判断浏览器是什么牌子的另一个脚本（detect.js）
具体代码如下：
detect.js
var sUserAgent = navigator.userAgent;
var fAppVersion = parseFloat(navigator.appVersion);

function compareVersions(sVersion1, sVersion2) {

    var aVersion1 = sVersion1.split(".");
    var aVersion2 = sVersion2.split(".");
    
    if (aVersion1.length > aVersion2.length) {
        for (var i=0; i < aVersion1.length - aVersion2.length; i++) {
            aVersion2.push("0");
        }
    } else if (aVersion1.length < aVersion2.length) {
        for (var i=0; i < aVersion2.length - aVersion1.length; i++) {
            aVersion1.push("0");
        }    
    }
    
    for (var i=0; i < aVersion1.length; i++) {
 
        if (aVersion1[i] < aVersion2[i]) {
            return -1;
        } else if (aVersion1[i] > aVersion2[i]) {
            return 1;
        }    
    }
    
    return 0;

}

var isOpera = sUserAgent.indexOf("Opera") > -1;
var isMinOpera4 = isMinOpera5 = isMinOpera6 = isMinOpera7 = isMinOpera7_5 = false;

if (isOpera) {
    var fOperaVersion;
    if(navigator.appName == "Opera") {
        fOperaVersion = fAppVersion;
    } else {
        var reOperaVersion = new RegExp("Opera (\\d+\\.\\d+)");
        reOperaVersion.test(sUserAgent);
        fOperaVersion = parseFloat(RegExp["$1"]);
    }

    isMinOpera4 = fOperaVersion >= 4;
    isMinOpera5 = fOperaVersion >= 5;
    isMinOpera6 = fOperaVersion >= 6;
    isMinOpera7 = fOperaVersion >= 7;
    isMinOpera7_5 = fOperaVersion >= 7.5;
}

var isKHTML = sUserAgent.indexOf("KHTML") > -1 
              || sUserAgent.indexOf("Konqueror") > -1 
              || sUserAgent.indexOf("AppleWebKit") > -1; 
              
var isMinSafari1 = isMinSafari1_2 = false;
var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false;

if (isKHTML) {
    isSafari = sUserAgent.indexOf("AppleWebKit") > -1;
    isKonq = sUserAgent.indexOf("Konqueror") > -1;

    if (isSafari) {
        var reAppleWebKit = new RegExp("AppleWebKit\\/(\\d+(?:\\.\\d*)?)");
        reAppleWebKit.test(sUserAgent);
        var fAppleWebKitVersion = parseFloat(RegExp["$1"]);

        isMinSafari1 = fAppleWebKitVersion >= 85;
        isMinSafari1_2 = fAppleWebKitVersion >= 124;
    } else if (isKonq) {

        var reKonq = new RegExp("Konqueror\\/(\\d+(?:\\.\\d+(?:\\.\\d)?)?)");
        reKonq.test(sUserAgent);
        isMinKonq2_2 = compareVersions(RegExp["$1"], "2.2") >= 0;
        isMinKonq3 = compareVersions(RegExp["$1"], "3.0") >= 0;
        isMinKonq3_1 = compareVersions(RegExp["$1"], "3.1") >= 0;
        isMinKonq3_2 = compareVersions(RegExp["$1"], "3.2") >= 0;
    } 
    
}

var isIE = sUserAgent.indexOf("compatible") > -1 
           && sUserAgent.indexOf("MSIE") > -1
           && !isOpera;
           
var isMinIE4 = isMinIE5 = isMinIE5_5 = isMinIE6 = false;

if (isIE) {
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(sUserAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);

    isMinIE4 = fIEVersion >= 4;
    isMinIE5 = fIEVersion >= 5;
    isMinIE5_5 = fIEVersion >= 5.5;
    isMinIE6 = fIEVersion >= 6.0;
}

var isMoz = sUserAgent.indexOf("Gecko") > -1
            && !isKHTML;

var isMinMoz1 = sMinMoz1_4 = isMinMoz1_5 = false;

if (isMoz) {
    var reMoz = new RegExp("rv:(\\d+\\.\\d+(?:\\.\\d+)?)");
    reMoz.test(sUserAgent);
    isMinMoz1 = compareVersions(RegExp["$1"], "1.0") >= 0;
    isMinMoz1_4 = compareVersions(RegExp["$1"], "1.4") >= 0;
    isMinMoz1_5 = compareVersions(RegExp["$1"], "1.5") >= 0;
}

var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML 
            && (sUserAgent.indexOf("Mozilla") == 0) 
            && (navigator.appName == "Netscape") 
            && (fAppVersion >= 4.0 && fAppVersion < 5.0);

var isMinNS4 = isMinNS4_5 = isMinNS4_7 = isMinNS4_8 = false;

if (isNS4) {
    isMinNS4 = true;
    isMinNS4_5 = fAppVersion >= 4.5;
    isMinNS4_7 = fAppVersion >= 4.7;
    isMinNS4_8 = fAppVersion >= 4.8;
}

var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") 
            || (navigator.platform == "Macintosh");

var isUnix = (navigator.platform == "X11") && !isWin && !isMac;

var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false;
var isMac68K = isMacPPC = false;
var isSunOS = isMinSunOS4 = isMinSunOS5 = isMinSunOS5_5 = false;

if (isWin) {
    isWin95 = sUserAgent.indexOf("Win95") > -1 
              || sUserAgent.indexOf("Windows 95") > -1;
    isWin98 = sUserAgent.indexOf("Win98") > -1 
              || sUserAgent.indexOf("Windows 98") > -1;
    isWinME = sUserAgent.indexOf("Win 9x 4.90") > -1 
              || sUserAgent.indexOf("Windows ME") > -1;
    isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 
              || sUserAgent.indexOf("Windows 2000") > -1;
    isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 
              || sUserAgent.indexOf("Windows XP") > -1;
    isWinNT4 = sUserAgent.indexOf("WinNT") > -1 
              || sUserAgent.indexOf("Windows NT") > -1 
              || sUserAgent.indexOf("WinNT4.0") > -1 
              || sUserAgent.indexOf("Windows NT 4.0") > -1 
              && (!isWinME && !isWin2K && !isWinXP);
} 

if (isMac) {
    isMac68K = sUserAgent.indexOf("Mac_68000") > -1 
               || sUserAgent.indexOf("68K") > -1;
    isMacPPC = sUserAgent.indexOf("Mac_PowerPC") > -1 
               || sUserAgent.indexOf("PPC") > -1;  
}

if (isUnix) {
    isSunOS = sUserAgent.indexOf("SunOS") > -1;

    if (isSunOS) {
        var reSunOS = new RegExp("SunOS (\\d+\\.\\d+(?:\\.\\d+)?)");
        reSunOS.test(sUserAgent);
        isMinSunOS4 = compareVersions(RegExp["$1"], "4.0") >= 0;
        isMinSunOS5 = compareVersions(RegExp["$1"], "5.0") >= 0;
        isMinSunOS5_5 = compareVersions(RegExp["$1"], "5.5") >= 0;
    }
}

4相关测试代码。
test
<html>
    <head>
        <title>Mouse Events Example</title>
        <script type="text/javascript" src="detect.js"></script>
        <script type="text/javascript" src="eventutil.js"></script>
        <script type="text/javascript">
   EventUtil.addEventHandler(window, "load", function ()
        {
            var obj = document.getElementById("div1");
            EventUtil.addEventHandler(obj,"click",handlee);
        
            });

   var handlee = function()
   {
   var obj = document.getElementById("txt1");
   var eventobj = EventUtil.getEvent();
   obj.value = eventobj.target.tagName;
   obj.value += "\n"+eventobj.target.id; 
     
        
   };
        </script>
    </head>
    <body>

        <p>Use your mouse to click and double click the red square.</p>
        <div style="width: 100px; height: 100px; background-color: red" id="div1"></div>
        <p><textarea id="txt1" rows="15" cols="50"></textarea></p>
    </body>
</html>

5在自己测试中遇到的两个问题。
1用addEventLisenter(dom)/attachEvent(ie)时如果针对的事件触发对象是window，
事件函数必须写为声明式的像这样function foo(){}
// 错误的写法(变量式)ie会报语法错误
< script >  
window.attachEvent( " onload " ,foo);
    var  foo  =   function ()
   {
   alert( " loaded " );
   };
 < / script>
// 正确的写法（声明式）
< script >
window.attachEvent( " onload " ,foo);
   function  foo()
   {
   alert( " loaded " );
   };
 < / script>

其他的页面元素则两者皆可。

问题二：关于同一对象连续使用attachEvent执行顺序的问题
猜猜会先执行那一个alert?

< html >
< head >
< script >
     var  app  =   function ()
     {
        var obj = document.getElementById("mypp");
        obj.attachEvent("onclick",foo1);
        obj.attachEvent("onclick",foo2);
    }

         var  foo1  =   function ()
         {
        alert("clicked!");
        } ;
         var  foo2  =   function ()
         {
        alert("also clicked!");
        } ;
     < / script>
< / head>    
  < body onload = " app() " >
         < p id = " mypp " > test < / p>
     < / body>
< / html>

答案是上面的代码会先执行第二个alert。
如果你觉得你的思维是正确的那么再看看下面的代码：

test2
<html>
<head>
<script>
var app = function()
{
var obj = document.getElementById("mypp");
obj.attachEvent("onclick",foo1);
obj.attachEvent("onclick",foo2);
obj.attachEvent("onclick",foo3);
obj.attachEvent("onclick",foo4);
obj.attachEvent("onclick",foo5);
obj.attachEvent("onclick",foo6);
obj.attachEvent("onclick",foo7);
}
var foo1 = function(){alert("1");};
var foo2 = function(){alert("2");};
var foo3 = function(){alert("3");};
var foo4 = function(){alert("4");};
var foo5 = function(){alert("5");};
var foo6 = function(){alert("6");};
var foo7 = function(){alert("7");};
</script>
</head> 
<body onload="app()">
<p id="mypp">test</p>
</body>
</html>

一段关于此的英文解释：
When   event   fires   on   the   object,   the   object's   event   handler   is   called   before   pDisp,   the   specified   function.   If   you   attach   multiple   functions   to   the   same   event   on   the   same   object,   the   functions   are   called   in   random   order,   immediately   after   the   object's   event   handler   is   called.
引用网上一位高人说的：
并不是什么随机问题，你可以去研究研究哈希对象，这种对象插入新元素的时候并不是顺序插入的，而是根据计算所得的hash值而定的，但在取用这些对象的时间是按照一定的顺序取的，所以就会出现你这种所谓的乱序问题。我估计DHTML里的这些对象的事件处理函数存放及JS对象都是一个个哈希对象，都是key-value这种键值对的模式。

所以在使用上还是要慎重的，最好不要做依赖于顺序的设计。


转载于:https://www.cnblogs.com/junyistar/archive/2008/04/09/1129206.html

dhz43885
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中的event讲解及一些常见案例
a1611107035的博客
11-08 1715
JavaScript中的event就是发生在dom元素上的事件，你也许已经使用过不少dom事件，但是event对象在js中有很多强大并且常用的功能。本文将讲解部分常用event的属性方法。
JQuery学习总结及实例中文WORD版
07-22
资源名称：JQuery 学习总结及实例 中文WORD版内容简介：普通Javaｓｃｒｉｐｔ的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对Javaｓｃｒｉｐｔ 的封装库，...
javascript学习中的全部知识点总结
04-03
javascript学习中的全部知识点总结
JavaScript 对象深入学习总结(经典)
10-23
JavaScript中，除了五种原始类型（即数字，字符串，布尔值，null，undefined）之外的都是对象了，所以，不把对象学明白怎么继续往下...本篇文章给大家分享javascript对象深入学习总结，小伙伴们跟着小编一起深入学习吧
JavaScript中的undefined学习总结
10-26
主要是对JavaScript中的undefined进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
JavaScript学习总结之JS、AJAX应用
10-22
主要介绍了JavaScript学习总结JS AJAX应用 的相关资料,需要的朋友可以参考下
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 384
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 412
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 410
注释很详细，直接上代码……
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 303
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
【Vue3】图片未加载成功前占位
菜就多练
08-08 323
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 457
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1465
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
Vue 标准开发方式与组件、插槽的高效使用
小刘哥的博客
08-10 300
Vue.js 是一个渐进式的 JavaScript 框架，适用于构建用户界面。本文将详细探讨 Vue.js 的标准开发方式，以及如何有效地使用组件、插槽等核心功能。
Unity数据持久化 之 Json序列化与反序列化
2301_77947509的博客
08-09 434
Json的序列化与反序列化
Vue3中的history模式路由：打造无缝导航体验！
Jacklx888的博客
08-10 257
Hey小伙伴们，今天给大家带来Vue3中使用history模式路由的实战案例！🌟 Vue3的路由功能非常强大，可以帮助我们轻松实现单页面应用中的页面切换。但是你知道吗？默认情况下Vue Router使用的是hash模式，URL会带上一个“#”。为了获得更加美观的URL，我们可以使用history模式。今天我们就来一起看看如何在Vue3中使用history模式吧！🚀
i5ting_toc工具优化
麦麦麦先森的小世界
08-07 572
markdown转换支持带左侧导航的html
第15节课：表单高级功能——提升用户填写体验与数据交互
学问小小谢的技术博客
08-07 686
在现代Web应用中，表单是用户与服务器交互的重要方式。HTML5引入了一系列高级表单属性和数据绑定技术，极大地提升了用户的填写体验和表单数据的处理效率。本节课将深入探讨`autocomplete`、`autofocus`、`placeholder`等表单属性，以及表单数据的动态绑定和更新技术。
[Vue3] - 5 watch与watchEffect用法
weixin_45291798的博客
08-09 685
一全部属性firstName:'张',lastName:'三',job:{name:'前端工程师'}});接收的参数newValue与oldValue，person下的job对象改变，watch也能监视到，在vue2中只有开启了deep深度监视才会生效1 无法获取正确的oldValue2 deep设置无效，强制开启深度监视watch监听的是RefImpl或Proxy结构watchEffect监听回调中用到额度属性。
Java网络编程——HTTP协议原理
oageux的博客
08-07 685
Java网络编程——HTTP协议原理
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值