随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互。网页应用大部分的交互需要用javascript事件进行实现。虽然当前存在大量的且功能强大的javascript库,但这些类库或者框架都经过函数封装,对于用户而言隐藏了内部实现机制(虽然可以查看和研究源代码,但是有多少童鞋能潜心研究呢?)。定制或者构建一个自己的小javascript库,对于童鞋们提升前端开发水平来说,也具有重要的价值。

废话不多说,下面给出一个通用的javascript事件工具库,并通过注释来了解原生的javascript用法:

 //javascript通用事件封装
var myEventUtil={
//版本
version:'1.0',
//日期
datetime:'2015-8-25',
author:'jack Wang',
//这里均用冒泡事件模型
//添加事件函数,调用方法addEvent(btn1,'click',showmsg);
addEvent:function(ele,event,func){
//用能力检测进行跨浏览器兼容处理
//DOM 2 事件处理
if(ele.addEventListener)
{
//false表示冒泡事件模型
ele.addEventListener(event,func,false);
}
else if(ele.attachEvent)
{
//若是click事件,IE为onclick
ele.attachEvent('on'+event,func);
}
else
{
//DOM 0级事件,兼容老浏览器
//not ele.'on'+event=func;
//js中.可以用[]进行代替
ele['on'+event]=func;
}
},
//删除事件函数
delEvent:function(ele,event,func){
if(ele.removeEventListener)
{
ele.removeEventListener(event,func,false);
}
else if(ele.detachEvent){
ele.detachEvent('on'+event,func);//IE
}
else
{
//DOM 0级事件,兼容老浏览器
ele['on'+event]=null;
}
},
//获取触发事件的源DOM元素
getSrcElement:function(event){
//如果event.target不为空,则返回event.target值
//否则返回event.srcElement
return event.target || event.srcElement;
},
//获取事件类型
getType:function(event)
{
return event.type;
},
//获取事件
getEvent:function(event){
//window.event为兼容IE版本
return event?event:window.event;
},
//阻止事件冒泡
stopBuble:function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cacelBuble=false;//IE
}
},
//禁用默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}
else
{
event.returnValue=false;//IE为属性
}
},
//根据元素ID名称获取元素
$id:function(eleid){
return document.getElementById(eleid);
},
//根据ClassName获取元素数组,提供父元素能提高检索效率
//用法:var eles=getByClass('foo');
getByClass:function(className,parent){
//如果不提供parent,则返回顶级元素document
var oParent=parent?this.$id(parent):document;
//能力检测
if(oParent.getElementsByClassName)
{
//通过在字符串中使用空格分隔类,也可以匹配多个类,
//下面的代码挑选出了所有既拥有foo类名称又拥有bar类名称的元素:
//var eles = document.getElementsByClassName('foo bar');
return oParent.getElementsByClassName(className);
}
else
{
var retEles=[];
//获取父元素下的所有子元素
var childs=oParent.getElementsByTagName('*');
for(var i=0,len=childs.length;i<len;i++){
//元素className类名匹配
if(childs[i].className==className){
retEles.push(childs[i]);
}
}
return retEles;
}
},
//根据ClassName获取首元素
getFirstByClass:function(className,parent){
//var eles=getByClass(className,parent);
//不加this.往往报getByClass未定义的错误
var eles=this.getByClass(className,parent);
return eles[0];
},
//获取版本信息
getVersion:function(){
return 'Version:'+this.version;
} };

我们需要知其然,更需要知其所以然。只有这样,才能更好的进行前端javascript开发。最后给大家推荐一个IT视频学习网站:慕课

javascript通用事件封装的更多相关文章

  1. javascript中事件总结&通用的事件侦听器函数封装&事件委托

    前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...

  2. JS通用事件监听函数

    JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...

  3. JavaScript的事件概述以及事件对象,事件流

    事件处理程序 JavaScript 事件对象是由访问 Web 页面的用户引起的一系列操作,例如:用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈. 我们通过为指定事件绑定 ...

  4. JavaScript系列----事件机制

    1.事件流 1.1.标准事件流 所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件 ...

  5. 浅谈JavaScript的事件(事件处理程序)

    事件就是用户或者浏览器自身执行的某种动作.诸如click.load和mouseover,都是事件的名字.而响应某个事件的函数就叫事件处理程序.事件处理程序的名字以"on"开头,比如 ...

  6. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  7. JavaScript Dom 事件

    JavaScript  Dom 事件 对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 ...

  8. React—Native开发之原生模块向JavaScript发送事件

    首先,由RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之 间通信,主要有三种方法: (1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript ...

  9. 第一百六十一节,封装库--JavaScript,完整封装库文件

    封装库--JavaScript,完整封装库文件 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象, ...

随机推荐

  1. 浅谈attr()和prop()

    刚开始学JQ的时候 ,看到attr()和prop()这两个属性的时候感觉很迷茫,而且配合官方给出的推荐使用图: prop()可以做到的attr()完全都可以,而且做不到的attr()也可以做到.何用? ...

  2. SSIS Component的ValidateExternalMetadata属性

    ValidateExternalMetadata Property Indicates whether the component validates its column metadata agai ...

  3. css 用direction来改变元素水平方向,价值研究。

    "direction"有两个值:ltr | rtl ltr:从左往右 rtl:从右往左 默认:ltr 一起看个效果就懂了. <style> div{ direction ...

  4. Web Workers 的基本信息

    问题:JavaScript 并行性 要将有趣的应用(例如从侧重服务器端的实施)移植到客户端 JavaScript,存在很多制约瓶颈.其中包括浏览器兼容性.静态类型.可访问性和性能.幸运的是,随着浏览器 ...

  5. struts2 OGNL表达式

    一.OGNL OGNL是Object-Graph Navigation Language的缩写,全称为对象图导航语言,是一种功能强大的表达式语言,它通过简单一致的语法,可以任意存取对象的属性或者调用对 ...

  6. 这10道javascript笔试题你都会么

    1.考察this var length = 10; function fn() { console.log(this.length); } var obj = {   length: 5, metho ...

  7. jQuery Ajax实现下拉框无刷新联动

    HTML代码: @{ Layout = null; } @using DAL; @using System.Data; @{ AreaDal areaDal = new AreaDal(); stri ...

  8. PHP访问MySql数据库介绍

    在网站后台,经常要与数据库打交道.本文介绍如何使用XAMPP来管理MySql数据库及如何用PHP来访问MySql数据库. 一.使用XAMPP来管理MySql数据库 首先使用XAMPP打开MySql的管 ...

  9. 炉石传说 C# 开发笔记

    最近在大连的同事强力推荐我玩 炉石传说,一个卡牌游戏.加上五一放一个很长很长的假期,为了磨练自己,决定尝试开发一个C#的炉石传说. 这件事情有人已经干过了,开发了一个网页版的炉石,但是貌似不能玩... ...

  10. 查看SQL Server多实例的版本

    通过 select @@version 查看当前的 SQL Server 安装的版本: 结果返回的是 SQL Server 2008 R2 (SP1),可安装的明明是 SQL Server 2012  ...