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()事件只有鼠标移入“所选元素”才会触发,如果鼠标仅仅移入“所选元素的后代子元素”的时候,并不会触发。

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

二、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>
 

js进阶 12-1 jquery的鼠标事件有哪些的更多相关文章

  1. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  2. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  3. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  4. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  5. js进阶课程 12-9 jquery的事件对象event的方法有哪些?

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件

    js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件 一.总结 一句话总结:event.type 描述事件的类型.        event.target 触发该事件的 DOM 元素. ...

  8. jQuery的鼠标事件总结

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

  9. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

随机推荐

  1. colrm---删除文件制定列

  2. hdu4336Card Collector 概率dp+状态压缩

    //给n个卡片每次出现的概率,求全部卡片都出现的须要抽的次数的期望 //dp[i]表示在状态的情况下到全部的卡片都出现的期望 //dp[i] = 1 + p1*dp[i] + ${p2[j]*dp[i ...

  3. 取消cp命令别名

    1. 取消cp命令别名unalias cpcp -rf恢复别名alias cp='cp -i'2.关闭当前用户下的cp别名配置sed -i "s/alias cp='cp -i'/#alia ...

  4. 搜索 debian8.7.1 ,google vs baidu

    国外的 Linux 比国内流行, debian官方网站只能找到当前版本DVD文件.想找旧版的Debian在百度一圈后徒劳无功,于是把目标转向 google ,只需要输入 debian?8.7.1-i3 ...

  5. FragMent-通过Arguments方法 跟activity通信

    今天主要学习下通过Arguments,实现activity 给fragment传递数据.这个方法也是通过参数bundle来进行数据传输的 直接看如下代码 一,定义一个fragment,在oncreat ...

  6. inflater-布局转化实现

    通俗的说,inflate就相当于将一个xml中定义的布局找出来.因为在一个Activity里如果直接用findViewById()的话,对应的是setConentView()的那个layout里的组件 ...

  7. Codeforces 451 E. Devu and Flowers(组合数学,数论,容斥原理)

    传送门 解题思路: 假如只有 s 束花束并且不考虑 f ,那么根据隔板法的可重复的情况时,这里的答案就是 假如说只有一个 f 受到限制,其不合法时一定是取了超过 f 的花束 那么根据组合数,我们仍然可 ...

  8. BZOJ2118: 墨墨的等式(最短路构造/同余最短路)

    Description 墨墨突然对等式很感兴趣,他正在研究a1x1+a2y2+…+anxn=B存在非负整数解的条件,他要求你编写一个程序,给定N.{an}.以及B的取值范围,求出有多少B可以使等式存在 ...

  9. Appium定义接口测试

    1.Appium如何执行 Appium作为一个服务器,python的脚本代码交给Appium服务器,Appium再去与设备交互. desired_cap = {} desired_cap['platf ...

  10. CList 点击表头排序 (2)两种排序方法中其中一种

    上一篇讲解SortItem()方法如何使用,虽然都是抄别人的但是就是想让大家有个大概的了解 CList 点击表头排序 (1)SortItems函数 点击表头排序基本思路都是 1.首先响应HDN_ITE ...