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事件--鼠标事件的小结的更多相关文章

  1. js进阶 12-1 jquery的鼠标事件有哪些

    js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...

  2. jQuery的鼠标事件总结

    jQuery的鼠标事件总结 1.click()事件. 2.dbclick()鼠标双击事件 3.mousedown()鼠标按下事件 4.mouseup()鼠标松开事件 5.mouseover()从一个元 ...

  3. JavaScript进阶系列07,鼠标事件

    鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...

  4. JavaScript与jQuery关于鼠标点击事件

    即实现鼠标点击其中一个菜单发生样式的改变,当点击下一个菜单时,当前菜单样式改变,其他菜单均变为之前样式. 用JavaScript,jQuery都可以实现,只是后者是封装的JavaScript库,具有s ...

  5. jQuery学习-鼠标事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

    有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...

  7. 【javascript/css】关于鼠标事件onmousexxx和css伪类hover

    在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...

  8. javascript和jquery 移除事件 和 改变样式

    javascript移除事件: document.getElementById("word").onmouseover = null; javascript改变样式: docume ...

  9. jquery 的鼠标事件/淡入淡出/绑定

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. oracle基础入门(二)

    一:Oracle和plsql都安装成功 我们现在要链接自己本机Oracle 或者 远程服务器的Oracle 所有我们要找到tnsnames.ora 找到PLsql的 db_1我的地址F:oracle\ ...

  2. 【editplus经常用的快捷键】Editplus 选中一行ctrl+r,Edit 合并行 Ctrl+Shift+J 合并选定行 删除当前行

    Editplus 选中一行: ctrl+rEditplus 复制一行: ctrl+r选择行,然后ctrl+c复制.复制一行到下一行中:Editplus有:Ctrl+j 复制上一行的一个字符到当前行Ed ...

  3. cogs 32. [POI1999] 位图

    32. [POI1999] 位图 ★   输入文件:bit.in   输出文件:bit.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述 ] 给定一个 n*m 的矩形位图, ...

  4. ShopNC【B2B2C】多用户电商平台系统,带WAP,微商城,圈子,门户

    <ShopNC[B2B2C]多用户电商平台系统,带WAP,微商城,圈子,门户> 早上发了套ShopNC B2B2C多用户商城2014商业版,带微商城,但不带圈子.WAP.圈子和门户,如今发 ...

  5. php将数组或字符串写入文件

    //将数组保存在文件里 function export_to_file($file, $variable) { $fopen = fopen($file, 'wb'); if (!$fopen) { ...

  6. 用c#编写爬虫在marinetraffic下载船仅仅图片

    近期在做船仅仅识别方面的事情,须要大量的正样本来训练adaboost分类器. 于是到marinetraffic这个站点上下载船仅仅图片.写个爬虫来自己主动下载显然非常方便. 站点特点 在介绍爬虫之前首 ...

  7. HTML标签大全(常用)

    转自:https://www.cnblogs.com/moije/p/6751624.html 文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种 ...

  8. 8.ZOrder

    T3LayerZorder.h #pragma once #include "cocos2d.h" USING_NS_CC; class T3LayerZorder:public ...

  9. MySql_Learn

    1 id 自增长  auto_increment 2 获取当前时间 now() 3 新增字段 修改字段名称 简单分页功能  limit 10 offset 20;  查询第21到30条数据 selec ...

  10. 小程序中关于获取app实例与当前组件

    1.getApp()来获取 App 实例 2.getCurrentPages()获取前页面栈