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 ...
随机推荐
- TOMCAT7不兼容spring boot 2.0
找不到这个类,找不到那个类... Spring Boot 2.0 (and Spring Framework 5 upon which it builds) requires a Servlet 3. ...
- spring security之Remember Me
spring-security.xml配置 环境: spring版本:5.0.7.RELEASE spring-security.xml引入: http://www.springframework.o ...
- 转发: python3.7下 Flask-SQLAlchemy中解决1366报错
原链接:https://segmentfault.com/a/1190000010596306 详情: 安装MySQL驱动(我升级过Python,所以要再装一遍) 本想安装MySQL官方驱动mysql ...
- leetCode-nSum
Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...
- if分支判断
# 控制语句 分支 循环语句 # 判断语句 if ..elif..else # if 条件语句(比较 逻辑 成员运算) # 空数据 == False # 非空数据 == True age = 20 i ...
- Python---1基础介绍
因公司有自动化测试需求,开始自学python,跟着廖雪峰老师的教程,一边学习,一遍记笔记,将学习过程中,遇到的大大小小奇奇怪怪的问题,记录与此. 一.安装 Python是跨平台的,它可以运行在Wind ...
- makefile(3)函数
前言 学习make和makefile的主要目的是分析大型项目的源代码的关系,上一节我们讲述了makefile 中的变量,本节主要学习一下 makefile 中的函数,首先函数肯定可以分为几部分: 内置 ...
- oppo互联网招聘-各类软件测试
一.服务端测试专家 关键词:安全测试.白盒测试.性能测试.自动化.持续集成.服务端 岗位职责: 主导多个高日活产品的测试方案: 试点和推广自动化和持续集成: 改善测试相关流程和规范. 职位要求: 计算 ...
- Kubelet
Kubelet 相关博客 Kubelet组件深度解析 Kubelet组件解析 Kubelet运行机制分析 Kubelet与apiserver通信 ___ Kubelet组件运行在Node节点上,维持运 ...
- python通用读取vcf文件的类(可以直接复制粘贴使用)
前言 处理vcf文件的时候,需要多种切割,正则匹配,如果要自己写其实会比较麻烦,并且每次还得根据vcf文件格式或者需要读取的值不同要修改相应的代码.因此很多人会选择一些python的vcf的库,但 ...