javascript中事件概述
事件就是用户或浏览器自身执行的某种动作。诸如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中事件概述的更多相关文章
- JavaScript中事件绑定的方法总结
最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...
- Android与javascript中事件分发机制的简单比较
在前面两篇博客中,我们讨论了Android中的事件分发的相关内容,那么在本篇博客当中,我们就简单探讨一下html或javascript中的事件分发机制,并进行简单的对比. 在前端中,对事件进行绑定有三 ...
- JavaScript中事件委托(事件代理)详解
在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...
- JavaScript的事件概述以及事件对象,事件流
事件处理程序 JavaScript 事件对象是由访问 Web 页面的用户引起的一系列操作,例如:用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈. 我们通过为指定事件绑定 ...
- javascript中事件总结&通用的事件侦听器函数封装&事件委托
前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...
- JavaScript 中事件对象参数:clientX、clientY、offsetX、offsetY、screenX、screenY
JavaScript 中一些概念理解 :clientX.clientY.offsetX.offsetY.screenX.screenY clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x ...
- JavaScript 中事件绑定的三种方式
以下是在 JS 中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="uplo ...
- 浅谈javascript中事件冒泡与事件捕获
事件冒泡:一个事件会顺着他的层级一直往上传,一直传到document上为止,即从盒模型上看是从内到外的过程. 例: <!DOCTYPE html><html lang="e ...
- JavaScript中事件绑定的三种方式
JavaScript使得网页与用户友好交互,在使用 js 进行时间绑定的时候有三种绑定方式. 第一种:初学者以及普通写法 <div id="dom0"> <inp ...
随机推荐
- resume|issue|transmit|sake|obliged|beyond her wildest dreams|echo|transmission|immense|consistent |convey to| boasted|satisfaction|rub|enrol|demonize
If an activity resumes, or if you resume it, it startsagain after a pause. (中断后)继续,重新开始 Normal servi ...
- eclipse批量替换,修改变量名或单词(两种方法)
第一种(常用): ①如图:双击选中变量名id,右键选择Refactor中的Rename ②之后如下图所示,红箭头的带有方框的就是选中修改的变量名,此时修改提示框的内容,后面带方框的也跟着修改, 而蓝色 ...
- 在腾讯云centos7.2上安装配置Node.js记录
应为爱好前端所以打算在腾讯云服务器上安装JavaScript引擎Node.js,下面是安装步骤: 安装准备: 下载node.js的.tar.xz安装包:https://nodejs.org/dist/ ...
- 云服务器之——Linux下配置JDK环境
在Linux下jdk的安装已经操作了很多次,每次发现自己还是会忘记之前的操作,所以今天就简单的来做个记录. 第一步:下载jdk安装包 登录oracle官网:https://www.oracle.com ...
- 850. Dijkstra求最短路 II
给定一个n个点m条边的有向图,图中可能存在重边和自环,所有边权均为正值. 请你求出1号点到n号点的最短距离,如果无法从1号点走到n号点,则输出-1. 输入格式 第一行包含整数n和m. 接下来m行每行包 ...
- Redis从出门到高可用--Redis复制原理与优化
Redis从出门到高可用–Redis复制原理与优化 单机有什么问题? 1.单机故障; 2.单机容量有瓶颈 3.单机有QPS瓶颈 主从复制:主机数据更新后根据配置和策略,自动同步到备机的master/s ...
- 腾讯自动化测试的AI智能
引子: 本文是林奕在腾讯 DevDays 2018 分享内容的脱敏整理,介绍了 CSIG 测试开发中心(前 SNG 测试开发中心)在自动化测试领域所做的智能化尝试. 大致分成下面几部分: 使用AI面对 ...
- 《软件自动化测试开发-Java和Python测试开发指南》第6次印刷
2017年1月 第1次印刷 2017年5月 第2次印刷 2017年9月 第3次印刷 2017年11月 第4次印刷 2018年4月 第5次印刷 2018年6月 第6次印刷 欢迎留言,点赞前2名,可获2折 ...
- Hihocoder1456 Rikka with Lattice
众所周知,萌萌哒六花不擅长数学,所以勇太给了她一些数学问题做练习,其中有一道是这样的:勇太有一个$n times m$的点阵,他想要从这$n times m$个点中选出三个点 ${A,B,C}$,满足 ...
- Eclipse-project-clean
project--->clean的原理 eclipse --->project ----->clean... 选项将工程中的.class文件删除,同时重新编译工程,类似于jbui ...