Javascript和jquery事件--鼠标事件的小结
1、鼠标事件的主要事件应该是mouseup, mousedown, mousewheel, mousemove, mouseover, moveout。
<1>其中mouseup和mousedown组成了单击(click),双击(dblclick)事件,或许还有拖拽事件,不过我还没有涉及到。表单事件上的foucs,blur事件应该也与之相关。
在一类事件里面我们主要关注点击的是鼠标哪个键e.whick/e.button
<2>mousewheel是鼠标滚轮事件,与浏览器默认的滚动条事件相关,关注的是滚轮方向是向上还是向下event.wheelDelta/e.detail
<3> mousemove是鼠标移动事件,不常用。
关注的是鼠标位置和鼠标移动方向movementX和 movementY
<4>mouseover, moveout是鼠标移入移出事件,在js的冒泡模式中很大的副作用,需要自定义成hover事件,或者使用jq。关注触发的元素target/srcElement和绑定事件的元素currentTarget,以及目标元素toElement/fromElement/ relatedTarget。
2、 事件监听器在js和jq的不同表现
Jq兼容了js在不同浏览器的写法,也对一些js的副作用做了改进(mouseenter, mouseleave, hover)。
<1>标准监听写法
也就是js的target.addEventListener()和jq的四种监听器on,bind,live, delegate绑定写法。在这种写法中,jq一般都支持js命名的事件,jq也有一些自定义的事件。
<2>on-type
onclick,ondblcick这种写法可以写在html中,或者当作属性来设置,js和jq都支持,但是js支持以下写法而jq不支持。
document.getElementById('c1').onmousemove=showit;
$('#c2').onmousemove=showit;//无效
<3>函数
click(),mousemove()等等函数绑定监听事件在jq里面都有定义,但是在js中大多没有。但是click()在js中可以用来触发点击事件。
Javascript和jquery事件--鼠标事件的小结的更多相关文章
- js进阶 12-1 jquery的鼠标事件有哪些
js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...
- jQuery的鼠标事件总结
jQuery的鼠标事件总结 1.click()事件. 2.dbclick()鼠标双击事件 3.mousedown()鼠标按下事件 4.mouseup()鼠标松开事件 5.mouseover()从一个元 ...
- JavaScript进阶系列07,鼠标事件
鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...
- JavaScript与jQuery关于鼠标点击事件
即实现鼠标点击其中一个菜单发生样式的改变,当点击下一个菜单时,当前菜单样式改变,其他菜单均变为之前样式. 用JavaScript,jQuery都可以实现,只是后者是封装的JavaScript库,具有s ...
- jQuery学习-鼠标事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器
有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...
- 【javascript/css】关于鼠标事件onmousexxx和css伪类hover
在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...
- javascript和jquery 移除事件 和 改变样式
javascript移除事件: document.getElementById("word").onmouseover = null; javascript改变样式: docume ...
- jquery 的鼠标事件/淡入淡出/绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- 【Uva 12105】Bigger is Better
[Link]: [Description] 让你用最多n根棍子,组成一个数字,使得它能够被m整除; 数字1..9分别需要用-根棍子. 要求这个数字尽可能地大; 然后输出这个数字. [Solution] ...
- WMI获取进程CPU占用率
Monitor % Process CPU Usage (specific process) http://www.tek-tips.com/viewthread.cfm?qid=395765 for ...
- 洛谷 P2684 搞清洁
P2684 搞清洁 题目描述 FJ准备分配它的N只奶牛(1 <= N <= 25,000) 做清洁工作,他把一天分成T(1 <= T <= 1,000,000)个时间段,他希望 ...
- 加快编译的技巧 & mount及tmpfs
除了在头文件里面 #ifndef xxx 可以在实际 include这个头文件的前后,加上 #ifndef,这样就不会打开和扫描这个头文件了. 另外,下面这篇文章里面也总结了 http://www.c ...
- JavaScript版MD5应用
假设使用Java为一个字符串进行MD5操作,我想轻而易举:但是假设要在client为网页中字符串进行MD5操作又该怎么做呢? 代码1--为字符串等进行MD5操作的js文件(md5.js): /* * ...
- 最简单的基于FFmpeg的移动端样例:Android 视频转码器
===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...
- elasticsearch index 功能源码概述
从本篇开始,对elasticsearch的介绍将进入数据功能部分(index),这一部分包括索引的创建,管理,数据索引及搜索等相关功能.对于这一部分的介绍,首先对各个功能模块的分析,然后详细分析数据索 ...
- ajax的使用(一)
ajax向服务器异步发送和接受数据,然后用JavaScript解析.Ajax核心规范的名称继承于你用来建立和发送请求的JavaScript对象:XMLHttpRequest.这个规范有两个等级 ...
- 将bat批处理命令文件固定到任务栏
将bat批处理命令文件固定到任务栏第一种方法:使用链接工具http://www.xstui.com/read/3451.在任务栏点击右键,移动到工具栏,勾选链接工具2.你会在通知栏左侧看到链接字样,将 ...
- vim 窗口分割命令
如何在一个窗口下面同时打开两个以及以上的文件,有横向跟纵向两种方式 一.如果在终端中开没有打开vim,可以: 横向分割显示: $ vim -o filename1 filename2 纵向分割显示: ...