Javascript 注册事件浅析

时间:2024-04-28 10:20:22 

首先是最常规的方法:

<p>test</p> <script> function test(){ alert("test"); } </script>


当某一天,我们知道JavaScript要跟HTML结构实现分离后,就会改了一种写法:

<p>test</p> <script> function test(){ alert("test"); } window.onload = function(){ document.getElementById("para").onclick = test; } </script>


当我们工作越来越久后,有时候我们需要对某个元素绑定多个相同的事件类型:

<p>test</p> <script> function test(){ alert("test"); } function pig(){ alert("pig"); } window.onload = function(){ document.getElementById("para").onclick = test; document.getElementById("para").onclick = pig; } </script>

如果按照上面的写法,我们只能输出第二个函数。
这时候我们需要用到attachEvent方法:

<p>test</p> <script> function test(){ alert("test"); } function pig(){ alert("pig"); } window.onload = function(){ document.getElementById("para").attachEvent("onclick",test); document.getElementById("para").attachEvent("onclick",pig); } </script>

在一段时间内,你并没发现这段代码有任何错误。
某一天,一个名叫firefox的浏览器 闯入你的视野,当我们把这段代码放到firefox中执行后,
发现并不能正常运行。 问题就这样,越来越多,然而作为一名JS程序员,这些都是必须面对的。
为了解决这段代码的平台兼容性问题,我翻翻手册,知道了firefox跟ie的区别:
firefox中注册事件使用:addEventListener方法,同时为了兼容ie,我们必须用到if ... else...

<p>test</p> <script> function test(){ alert("test"); } function pig(){ alert("pig"); } window.onload = function(){ var element = document.getElementById("para"); if(element.addEventListener){ // firefox , w3c element.addEventListener("click",test,false); element.addEventListener("click",pig,false); } else { // ie element.attachEvent("onclick",test); element.attachEvent("onclick",pig); } } </script>

此时,代码就可以在多个平台上工作了。
但随着水平的进步,你不满足每次都去判断,你想把这个判断封装起来,以后可以直接调用:

<p>test</p> <script> function test(){ alert("test"); } function pig(){ alert("pig"); } function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false); } else { element.attachEvent("on" + e,fn); } } window.onload = function(){ var element = document.getElementById("para"); addListener(element,"click",test); addListener(element,"click",pig); } </script>

至此,作为一个程序员的工作就完了。
中间我们从一个最传统,最基本的写法 , 然后实现Js和HTML的分离,然后又实现对同一个元素注册多个事件,期间,我们发现注册事件的兼容性问题。最后我们对注册事件的方法进行封装,方便以后使用。
好了,文章写到这里。希望大家有收获哦。。。

标签:Javascript,注册事件
0
投稿

猜你喜欢

  • python导入同级模块的实现

    2021-03-09 10:08:51
  • 设计中基于人类学的田野调查与比较研究法 ——浅谈用研与竞品分析方法之理论基础

    2009-08-31 16:45:00
  • 详谈js遍历集合(Array,Map,Set)

    2024-04-16 09:29:53
  • Go语言标准输入输出库的基本使用教程

    2023-08-25 19:44:11
  • mysql5.6.8源码安装过程

    2024-01-22 02:53:41
  • Python判断变量是否已经定义的方法

    2023-08-01 07:14:01
  • 一文学会使用OpenCV构建文档扫描仪

    2023-08-02 12:35:05
  • c#如何利用定时器自动备份数据库详解

    2024-01-27 12:11:33
  • python里的条件语句和循环语句你了解多少

    2022-07-19 02:27:49
  • 由浅入深漫谈margin属性

    2007-05-11 17:03:00
  • CSS Hack 汇总快查

    2007-11-06 11:48:00
  • asp如何在线更改密码?

    2010-06-26 12:22:00
  • MySQL处理重复数据的方法

    2024-01-24 04:08:27
  • python遍历字符串中每一个字符的4种方式

    2022-12-21 07:33:03
  • Babylon使用麦克风并处理常见问题解决

    2024-04-29 13:25:53
  • python四则运算表达式求值示例详解

    2023-01-31 06:03:04
  • perl用变量做句柄介绍

    2022-12-18 22:19:01
  • Python3 字典dictionary入门基础附实例

    2023-03-08 18:57:49
  • Tensorflow加载与预处理数据详解实现方法

    2023-01-29 02:57:09
  • mysql数据校验过程中的字符集问题处理

    2024-01-28 15:16:16
  • asp之家 网络编程 m.aspxhome.com