Javascript和jquery事件--鼠标事件的小结

时间:2022-09-03 19:16:01

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中可以用来触发点击事件。