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

时间:2024-08-15 16:05:50

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

一、总结

一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove(1个)

1、页面载入事件有哪两种常见的写法?

30     $(document).ready(function(){
31
32 })
34     $(function(){

2、click时间和mouseup和mousedown的联系和区别?

鼠标弹起了才能完成点击事件

click=mousedown&&mouseup

35 //鼠标按下并弹起完成一次click事件

3、hover和mouseover和mouseout的区别和联系?

click=mouseover&&mouseout

4、鼠标移入移出事件有哪两种?

  • mouseover()/mouseout() 鼠标的移入和移出事件
  • mouseenter()/mouseleave() 鼠标的移入和移出事件

5、mouseover()/mouseout()和mouseenter()/mouseleave()的区别是什么(都是鼠标移入移出事件)?

推荐使用(mouseenter()/mouseleave())

也就是mouseenter()/mouseleave()增加了阻止事件冒泡的效果

mouseout()/mouseover()事件在鼠标移入“所选元素及其后代子元素”时都会触发;mouseenter()/mouseleave()事件只有鼠标移入“所选元素”才会触发,如果鼠标仅仅移入“所选元素的后代子元素”的时候,并不会触发。

冒泡:不管向内还是向外,移到一个元素就是一次。

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

二、jquery的鼠标事件有哪些

1、相关知识

页面载入事件
  • ready() 文档就绪事件(当 HTML 文档就绪可用时)
鼠标事件
  • click() 触发、或将函数绑定到指定元素的 click 事件
  • dblclick() 当双击元素时,会发生 dblclick 事件。
  • mousedown()/mouseup() 鼠标的按下和松开事件
  • mouseover()/mouseout() 鼠标的移入和移出事件
  • mouseenter()/mouseleave() 鼠标的移入和移出事件

    mouseout()/mouseover()事件在鼠标移入“所选元素及其后代子元素”时都会触发;mouseenter()/mouseleave()事件只有鼠标移入“所选元素”才会触发,如果鼠标仅仅移入“所选元素的后代子元素”的时候,并不会触发。

  • hover()一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。
  • mousemove() 当鼠标指针在指定的元素中移动时触发。

2、代码

 <!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
div{width: 100px;height: 100px;
margin: 10px;padding: 10px;
border:1px solid green;
}
</style>
</style>
</head>
<body>
<h3>jQuery事件</h3>
<div id="div1">click</div>
<div id="div2">dblclick</div>
<div id="div3">mousedown <br> mouseup</div>
<div id="div4">mouseover <br> mouseout</div>
<script>
/*
//页面载入事件
//注意与window.lond()的三点区别
jQuery(document).ready(function(){
//代码部分
})
$(document).ready(function(){ })
*/
$(function(){
//鼠标按下并弹起完成一次click事件
$('#div1').click(function(){
alert('单击事件')
})
$('#div2').dblclick(function(){
alert('双击事件')
})
//鼠标的按下和松开事件
// $('#div3').mousedown(function(){
// alert('鼠标按下')
// })
$('#div3').mouseup(function(){
alert('鼠标弹起')
})
//鼠标移入移出事件
// $('#div4').mouseover(function(){
// $(this).css('background','green')
// }).mouseout(function(){
// $(this).css('background','#ccc')
// }) $('#div4').mouseenter(function(){
$(this).css('background','green')
}).mouseleave(function(){
$(this).css('background','#ccc')
})
})
</script>
</body>
</html>