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 ...
随机推荐
- Servlet+JSP 对外访问路径配置
servlet类似 servlet配置为: <servlet> <servlet-name>Demo01_OutWrite</servlet-name> ...
- 微软亚洲研究院开源图数据库GraphView
我们很高兴地宣布,由微软亚洲研究院系统算法组开发的图数据库GraphView通过GitHub平台开源.GraphView是一款中间件软件,方便用户使用关系数据库SQL Server 或Azure SQ ...
- UEditor问题整理
网上可以使用的富文本编辑器有很多,但是经过慎(sui)重(shou)思(yi)考(cha),选择了UEditor,毕竟是百度的东西,质量上应该经得起推敲,另外,使用别人的插件,总要去适应别人的编码习惯 ...
- 线程sleep,wait,notify,join,yield方法解析
线程的五种状态 线程从创建到销毁一般分为五种状态,如下图: 1) 新建 当用new关键字创建一个线程时,就是新建状态. 2) 就绪 调用了 start 方法之后,线程就进入了就绪阶段.此时,线程不会立 ...
- GitLab-CI部署及踩坑总结
转载请注明出处:https://www.cnblogs.com/shining5/p/8863063.html 部署GitLab-CI 简介 GitLab_CI(gitlab continuous i ...
- 在linux中下载安装FTP服务
一.环境及需求 阿里云服务器的Centos6.9版本,当时需要用到上传服务,所以我想着先搭建一个ftp,比较方便快捷,但是我参考了网上好多的博客,简单安装是没问题,但是时不时还会遇到好多坑,与其说是博 ...
- 7-11 jmu-python-分段函数&数学函数 (15 分)
本题要求计算下列分段函数f(x)的值(x为从键盘输入的一个任意实数): 输入格式: 直接输入一个实数x 输出格式: 在一行中按“f(x)=result”的格式输出,其中x与result都保留三位小数. ...
- C++对拍
作为一名OIer,比赛时,对拍是必须的 不对拍,有时可以悔恨终身 首先,对拍的程序 一个是要交的程序 另一个可以是暴力.搜索等,可以比较慢,但是必须正确 下面是C++版对拍程序(C++ & c ...
- 【推荐算法工程师技术栈系列】分布式&数据库--tensorflow
目录 TensorFlow 高阶API Dataset(tf.data) Estimator(tf.estimator) FeatureColumns(tf.feature_column) tf.nn ...
- python如何在图片上添加文字(中文和英文)
Python在图片上添加文字的两种方法:OpenCV和PIL 一.OpenCV方法 1.安装cv2 pip install opencv-python 2.利用putText方法来实现在图片的指定位置 ...