首页 > 编程语言 >JavaScript中Web应用程序事件处理

JavaScript中Web应用程序事件处理

时间:2023-06-20 14:04:16浏览次数:46  
标签:function 事件处理 name Web JavaScript addEvent fn target


通过下面的代码来绑定事件处理代码,不仅可以为同一事件源的同一事件重复绑定事件处理代码,还可以在只做一次浏览器兼容性检测的情况下完成所有的事件处理绑定。代码如下所示:js/mylib.js

var addEvent = function(target, name, fn) {
    if(target.addEventListener)
        addEvent = function(target, name, fn) {
            target.addEventListener(name, fn, false);
        };
    else if(target.attachEvent)
        addEvent = function(target, name, fn) {
            target.attachEvent('on' + name, fn);
        };
    addEvent(target, name, fn);
};



下面是测试代码:test.html


<!DOCTYPE html>
<html>
    <head>
        <title>Sample Page</title>
        <script type="text/javascript" src="js/mylib.js"></script>
        <script type="text/javascript">
            addEvent(window, "load", init);

            function init() {
                addEvent(document.getElementById('ok'), "click", foo);
                addEvent(document.getElementById('ok'), 'click', bar);
            }

            function foo() { alert('foo'); }
            function bar() { alert('bar'); }
        </script>
    </head>
    <body>
        <button id="ok">OK</button>
    </body>
</html>




标签:function,事件处理,name,Web,JavaScript,addEvent,fn,target
From: https://blog.51cto.com/u_16166070/6522203

相关文章

  • [连载]JavaScript讲义(02)--- JavaScript核心编程
    ......
  • [连载]JavaScript讲义(04)--- 函数和闭包
     点击下载该例子的源代码......
  • [连载]JavaScript讲义(06)--- 浏览器对象模型
    ......
  • vue学习第21天 移动WEB开发 --- flex布局(弹性布局)
    学习目标1、flex盒子的布局原理2、flex布局的常用属性3、独立完成某个移动端首页案例 目录1、flex布局体验2、flex布局原理3、flex布局父项常见属性4、flex布局子项常见属性5、案例制作  ......
  • vue学习第18天 css --- 移动web开发 (单独/响应式、常见布局【单独:流式、flex、rem
    学习目标: 目录: 移动端基础 1、浏览器现状  2、手机屏幕现状 3、常见移动端屏幕尺寸查看地址: https://www.strerr.com/screen.html注:作为前端开发,不用纠结dp,dpi,pt,ppi等单位。 4、移动端调试方法 5、......
  • JavaScript(06): 优秀JavaScript库概览
    jQuery设计思想简洁的思想:几乎所有操作都是以选择DOM元素(有强大的Selector)开始,然后是对其的操作(Chaining等特性)。优点小,压缩后代码只有20多k(无压缩代码94k)。Selector和DOM操作的方便.Chaining:总是返回一个jQuery对象,可以连续操作。文档的完整,易用性(每个API都有完整的例子,这是其......
  • JavaScript(03): 面向对象
    面向对象的开发方式是目前软件开发的主流方式,JavaScript也是面向对象事件驱动的编程语言,如果能够掌握JavaScript的面向对象编程的知识,就有了构建自己的JavaScript库的基础和前提。1.面向对象的基本概念对于熟悉Java或者C#的开发者来说,面向对象的概念以及封装、继承、多态等名词应......
  • JavaScript(07): 实例2---网页广告漂浮效果(面向对象版)
    在上一个版本的基础上使用JavaScript的面向对象完成,为了不影响阅读,去掉了随滚动条移动的广告<!DOCTYPEhtml><html> <head> <title>Example</title> <metahttp-equiv="content-type"content="text/html;charset=GBK"/> <linktype="......
  • JavaScript(07): 实例3---Google Eye
    下面的例子源于GoogleEye(如下图所示的效果),通过这个例子可以好好体会一下JavaScript的面向对象编程。<!DOCTYPEhtml><html> <head> <title>GoogleEye</title> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <st......
  • Web项目中使用Spring 3.x + Quartz 2.x实现作业调度详解
    Quartz是一个基于Java的作业调度管理的轻量级框架,目前在很多企业应用中被使用,它的作用类似于java.util中的Timer和TimeTask、数据库中的job等,但Quartz的功能更强大、更灵活。从Quartz2开始,你可以使用POJO作为一个任务(Job),这种开发方式进一步降低了代码的耦合度,如果跟Spring进行整合,......