事件就是用户或浏览器自身执行的某种动作。诸如click、load、和mouseover,都是事件的名字。而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。

以下是跨浏览器的javascript中事件的相关方法:

 //跨浏览器的方法
var EventUtil={
/*
与addHandler()对应的方法是removeHandler(),他们的职责分别是添加和移除事件处理程序;
这两个方法首先都会检测传入的元素中是否存在DOM2级方法(所有DOM节点,IE9+、firefox、safari、chrome、opera都支持),如果存在则使用该方法:传入事件类型、事件处理程序函数和第三个参数false(表示冒泡阶段);
如果存在的是IE的方法,则采用第二种方案(IE及opera支持);
最后一种方案就是使用DOM0级方法(虽然现在浏览器支持,但应该都不会执行这里的代码,前面两种方案基本够了,且前面两种方案支持在一个元素上添加多个事件处理程序,而最一种方案只能添加一个事件处理程序)
*/
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
//获取事件对象
getEvent:function(event){
return event?event:window.event;
},
//获取事件的目标
getTarget:function(event){
return event.target||event.srcElement;
},
//取消事件默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
//阻止事件冒泡
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
//获取鼠标滚轮增量值,当为120时表示向前滚动,当为-120时表示向后滚动
getWheelDelta:function(event){
if(event.wheelDelta){//兼容除firefox外的其他浏览器,event.wheelDelta为120时表示向前,当为-120时表示向后
//return (client.engine.opera&&client.engine.opera<9.5?-event.wheelDelta:event.wheelDelta);
return (window.opera&&window.opera.version()<9.5?-event.wheelDelta:event.wheelDelta);
}else{//兼容firefox浏览器,在firefox中event.detail值为3表示向后滚动,为-3表示向前
return -event.detail*40;
}
}
}

未完,待续。。。

javascript中事件概述的更多相关文章

  1. JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...

  2. Android与javascript中事件分发机制的简单比较

    在前面两篇博客中,我们讨论了Android中的事件分发的相关内容,那么在本篇博客当中,我们就简单探讨一下html或javascript中的事件分发机制,并进行简单的对比. 在前端中,对事件进行绑定有三 ...

  3. JavaScript中事件委托(事件代理)详解

    在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...

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

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

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

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

  6. JavaScript 中事件对象参数:clientX、clientY、offsetX、offsetY、screenX、screenY

    JavaScript 中一些概念理解 :clientX.clientY.offsetX.offsetY.screenX.screenY clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x ...

  7. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

  8. 浅谈javascript中事件冒泡与事件捕获

    事件冒泡:一个事件会顺着他的层级一直往上传,一直传到document上为止,即从盒模型上看是从内到外的过程. 例: <!DOCTYPE html><html lang="e ...

  9. JavaScript中事件绑定的三种方式

    JavaScript使得网页与用户友好交互,在使用 js 进行时间绑定的时候有三种绑定方式. 第一种:初学者以及普通写法 <div id="dom0"> <inp ...

随机推荐

  1. 第十六届“二十一世纪的计算”学术研讨会 牛津大学肿瘤成像学教授Michael Brady主题演讲

    Computing and Healthcare 牛津大学肿瘤成像学教授Michael Brady主题演讲" title="第十六届"二十一世纪的计算"学术研讨 ...

  2. _Random和_RandomString的使用区别

    __Random 函数介绍 作用:生成随机数 使用格式:${__Random(5,30,myResult_Random)},其中 第一个参数5,表示希望生成的数字最小的值,必填 第二个参数30,表示希 ...

  3. C\C++ 位域操作

    几篇较全面的位域相关的文章: http://www.uplook.cn/blog/9/93362/ C/C++位域(Bit-fields)之我见 C中的位域与大小端问题 内存对齐全攻略–涉及位域的内存 ...

  4. C++输入带空格的字符串

    对于字符数组 1.使用 getline() 读入整行数据,回车键输入的换行符确定输入结尾. 调用方法:cin.getline(str, len) 第一个参数str用来存储输入行的数组名称,第二个参数是 ...

  5. es6 转载

    1.let命令 1)let和var的区别:let声明的变量只有所在的代码块有效. 2)没有变量的提升,一定要声明后使用.使用let命令声明变量之前,该变量都是不可用的.形成“暂时性死区”. 3)typ ...

  6. hexo NexT主题首页title链接的优化

    在默认设置下,文章链接都会改变,不利于搜索引擎收录,也不利于分享 更改index.swig文件 文件路径是your-hexo-sitethemesnextlayout,将下面代码 1 {% block ...

  7. AFNetworking基本模块

    AFNetworking主要分为5个模块 通信模块(AFURLSessionManager, AFHTTPSessionManager) 网络状态监听 安全模块 通信序列化/反序列化模块 UIKit相 ...

  8. 机器学习技法笔记(2)-Linear SVM

    从这一节开始学习机器学习技法课程中的SVM, 这一节主要介绍标准形式的SVM: Linear SVM 引入SVM 首先回顾Percentron Learning Algrithm(感知器算法PLA)是 ...

  9. Linux 环境 搭建Git 服务器,并且修改SSH端口使用

    1.环境配置说明 服务器 CentOS 7 + git(git version 1.8.3.1) 客户端 Windows10 + SourceTree 2.安装 Git 服务器端安装: sudo yu ...

  10. python 写入 execl 文件 之 xlwt 模块

    1. xlwt 安装 pip install xlwt 2. xlwt 操作, 代码 #!/usr/bin/env python3 import xlwt # 只能创建 新的 excel 文件 # 1 ...