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. area热点区域

    <area>标记:主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: &l ...

  2. 解决Docker容器内访问宿主机MySQL数据库服务器的问题

    懒得描述太多,总归是解决了问题,方法简要记录如下,虽然简要,但是完整,一来纪念处理该问题耗费的大半天时间,二来本着共享精神帮助其他遇到该问题的哥们儿,当然这个方法并不一定能解决你们的问题,但是多少能提 ...

  3. Windows学习总结（3）——成为电脑高手必备的cmd命令大全

    曾经看电影和电视里面电脑黑客快速敲击电脑键盘,一行行命令在电脑屏幕闪过,一个回车过后,一排排英文象走马灯一样在屏幕上转瞬即逝,那才是我们梦寐以求的高手,有木有!实际上,不光是黑客和系统维护人员,一般的 ...

  4. IOS越狱开发错误解决

      Questions: haseScriptExecution Run\ Script /Users/jun/Library/Developer/Xcode/DerivedData/ButtonMa ...

  5. x264代码剖析（八）：encode()函数之x264_encoder_close()函数

    x264代码剖析(八):encode()函数之x264_encoder_close()函数 encode()函数是x264的主干函数.主要包含x264_encoder_open()函数.x264_en ...

  6. Kali Linux下安装VMware Tools

    引言 Kali Linux是基于Debian的Linux发行版, 设计用于数字取证和渗透測试.安装Kali Linux非常easy,可是安装VMware Tools的过程就有点麻烦了,由于在安装中途会 ...

  7. 解决ubuntu终端无法输入中文的问题

    解决ubuntu终端无法输入中文的问题 来源: https://my.oschina.net/lvhongqing/blog/851922 首先把中文语言包安装上 打开 /var/lib/locale ...

  8. android-EditText 更改外边框无效

    修改的代码如下 <com.android.mms.ui.EnhanceEditText android:textColor="#000000" <!--问题处在这里,a ...

  9. [NOI.AC#35]string 缩点+拓扑排序

    链接 因为有交换相邻字母,因此给你字符串就相当于给你了这个字符串的所有排列 把等价的串映射到整数范围,再根据 \(m\) 种魔法连边,缩点后在 DAG 上DP即可 无耻地用了int128 #inclu ...

  10. javascript创建对象的方法--原型模式

    javascript创建对象的方法--原型模式 一.总结 1.原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改 2.原型的使用(p ...