精华内容
下载资源
问答
  • 事件有三部分组成(也称事件三要素): 事件源(被触发对象) 事件类型(如何触发,比如鼠标点击,鼠标经过,键盘按下等) 事件处理程序(通过函数赋值方式) // 点击按钮后弹出一个对话框"hello world" // ...

    事件有三部分组成(也称事件三要素):

    1. 事件源(被触发的对象)
    2. 事件类型(如何触发,比如鼠标点击,鼠标经过,键盘按下等)
    3. 事件处理程序(通过函数赋值的方式)
    // 点击按钮后弹出一个对话框"hello world"
    // 事件源 被触发的对象:btn
    var btn = document.getElementById("btn");
    // 事件类型 当点击后触发
    // 事件处理程序 紧跟一个函数 函数内写入想要的内容
    btn.onclick = function(){
    	alert("hello world");
    }
    

    常见的鼠标事件:

    鼠标事件 触发条件
    onclick 鼠标点击左键触发
    onmouseover 鼠标经过触发
    onmouseout 鼠标离开触发
    onfocus 获得鼠标焦点触发
    onblur 失去鼠标焦点触发
    onmousemove 鼠标移动触发
    onmouseup 鼠标弹起触发
    onmousedown 鼠标按下触发
    展开全文
  • js进阶 12-1 jquery的鼠标事件有哪些 一、总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove(1个) 1、页面载入事件有哪两种常见的写法? 30 $...

    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、代码

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <style>
     4 </style>
     5 <head>
     6     <meta charset="UTF-8">
     7     <title>演示文档</title>
     8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
     9     <style>
    10         div{width: 100px;height: 100px;
    11             margin: 10px;padding: 10px;
    12             border:1px solid green;
    13         }
    14     </style>
    15 </style>
    16 </head>
    17 <body>
    18 <h3>jQuery事件</h3>
    19 <div id="div1">click</div>
    20 <div id="div2">dblclick</div>
    21 <div id="div3">mousedown <br> mouseup</div>
    22 <div id="div4">mouseover <br> mouseout</div>
    23 <script>
    24 /*
    25 //页面载入事件
    26 //注意与window.lond()的三点区别
    27     jQuery(document).ready(function(){
    28         //代码部分
    29     })
    30     $(document).ready(function(){
    31 
    32     })
    33 */
    34     $(function(){
    35         //鼠标按下并弹起完成一次click事件
    36         $('#div1').click(function(){
    37             alert('单击事件')
    38         })
    39         $('#div2').dblclick(function(){
    40             alert('双击事件')
    41         })
    42         //鼠标的按下和松开事件
    43         // $('#div3').mousedown(function(){
    44         //     alert('鼠标按下')
    45         // })
    46         $('#div3').mouseup(function(){
    47             alert('鼠标弹起')
    48         })
    49         //鼠标移入移出事件
    50         // $('#div4').mouseover(function(){
    51         //     $(this).css('background','green')
    52         // }).mouseout(function(){
    53         //     $(this).css('background','#ccc')
    54         // })
    55 
    56         $('#div4').mouseenter(function(){
    57             $(this).css('background','green')
    58         }).mouseleave(function(){
    59             $(this).css('background','#ccc')
    60         })
    61     })
    62 </script>
    63 </body>
    64 </html>

     

     

     

     

     

    转载于:https://www.cnblogs.com/Renyi-Fan/p/9263104.html

    展开全文
  • JavaScript事件有哪些

    2019-06-20 16:25:00
    常见的 HTML 事件 下面是一些常见的 HTML 事件事件描述 onchange HTML 元素已被改变 onclick 用户点击了 HTML 元素 onmouseover 用户把鼠标移动到 HTML 元素上 onmouseout 用户把...

    常见的 HTML 事件

    下面是一些常见的 HTML 事件:

    事件描述
    onchange HTML 元素已被改变
    onclick 用户点击了 HTML 元素
    onmouseover 用户把鼠标移动到 HTML 元素上
    onmouseout 用户把鼠标移开 HTML 元素
    onkeydown 用户按下键盘按键
    onload 浏览器已经完成页面加载

    JavaScript 能够做什么?

    事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作:

    • 每当页面加载时应该做的事情
    • 当页面被关闭时应该做的事情
    • 当用户点击按钮时应该被执行的动作
    • 当用户输入数据时应该被验证的内容
    • 等等

    让 JavaScript 处理事件的不同方法有很多:

    • HTML 事件属性可执行 JavaScript 代码
    • HTML 事件属性能够调用 JavaScript 函数
    • 您能够向 HTML 元素分配自己的事件处理函数
    • 您能够阻止事件被发送或被处理
    • 等等

    转载于:https://www.cnblogs.com/wendolyni/p/11059528.html

    展开全文
  • 在这一章我将介绍一些鼠标事件的最常见的问题和技巧。先看看都有哪些鼠标事件:mousedown,mouseup_and_click,dblclick,mousemove和mouseover mouseout。然后还会解释一下relatedTarget,fromElement和toElement这些...

    鼠标事件是到目前为止最重要的事件。在这一章我将介绍一些鼠标事件的最常见的问题和技巧。

    先看看都有哪些鼠标事件:mousedown,mouseup_and_click,dblclick,mousemove和mouseover mouseout。然后还会解释一下relatedTarget,fromElement和toElement这些事件属性。最后是微软的mouseenter和mouseleave事件。

    浏览器的兼容性问题,可以在浏览器兼容性列表查看。

    例子

    这里有一个例子。可以帮助理解下面的内容。
    mousedown,mouseup,click和dblclick在这个链接上注册。可以再下面的文本框里面查看。或者在对话框里面。(请在原文里尝试:http://www.quirksmode.org/js/events_mouse.htm

    Mousedown,mouseup,click

    如果用户在一个元素上点击,那么最少三个事件会被触发,顺序是这样的:
    1、mousedown,当用户在这个元素上按下鼠标键的时候
    2、mouseup,当用户在这个元素上松开鼠标键的时候
    3、click,当一个mousedown和一个mouseup都在这个元素上被检测到的时候发生

    通常mousedown和mouseup比click有用。有些浏览器不允许你读取onclick的事件信息。而且有时候用户用鼠标做出某些动作click事件没有跟上。

    假设用户在一个链接上按下了鼠标键,然后把鼠标挪开了并且挪开后松开了鼠标键。那么这时候这个链接就仅仅发生了mousedown事件。类似的,用户在点击鼠标之后挪到了链接上,那么链接就仅有mouseup发生。这两种情况都没有click事件发生。

    这是不是一个问题取决于用户的行为。但是你应该注册onmousedown/up事件,除非你就是完全想click发生。

    如果你用了弹出警示框的话,浏览器可能会丢失事件发生的轨迹和发生了多少次,会引起混乱。所以最好别用那个。

    Dblclick

    dblclick事件很少用。如果你要用的话一定不要把onclick和dblclick的事件处理程序注册在一个HTML元素上。如果两个都注册了的话你要知道用户到底干什么是一件基本上不可能的事情。

    总之,当用户在一个元素上双击的时候click事件总是发生在dblclick之前。另外,在Netscape中,第二个click总是会在dblclick之前被分开处理。不管怎样,警示框在这是很危险的。

    所以保证你的click和dblclick很好的分离能避免很多复杂的事情。

    Mousemove

    mousemove事件运行的很好,但是需要注意的是那可能需要很多的系统资源来处理所有的mousemove事件。当用户把鼠标移动一个像素,mousemove就触发一次。就算什么都没发生,长而复杂的函数也要耗费很长的时间会影响网站的效率:所有的事情都会变慢,尤其在那些老古董上。

    所以最好的办法就是当你需要的时候注册onmousemove事件,在不用的时候尽快移除:

    element.onmousemove = doSomething;
    // later
    element.onmousemove = null;
    


    Mouseover和mouseout

    再看看这个例子,换成mouserover然后试试。这个例子只是在ev3上添加了onmouseover的事件处理程序。然而你会注意到不仅仅在ev3上会触发事件在ev4或者span上都会触发。在Mozilla 1.3之前,当鼠标进入一个文本区域的时候都会触发。

    原因当然就是事件冒泡。用户在ev4上触发了mouseover事件。在这个元素上没有onmouseover事件处理程序,但是在ev3上有。所以当事件冒泡到ev3上的时候,程序就执行了。

    现在这样的设置虽然都完全正确,但是还有一个问题。首要问题就是目标。假设鼠标进入了ev4:
    -----------------------------------------
    | This is div id="ev3"                  |
    |   -----------------------------   |
    |   | This is div id="ev4"          |   |
    |   | --------               <--------   |
    |   | | span |                   |          |
    |   | |        |                   |           |
    |   | --------                  |          |
    |   -----------------------------    |
    -----------------------------------------

    <--------: mouse movement

    现在这个事件的target/srcElement就是ev4:就是事件发生的元素,因为鼠标移动到了他上面。但是当下面的发生时候:
    -----------------------------------------
    | This is div id="ev3"                     |
    |   -----------------------------      |
    |   | This is div id="ev4"         |       |
    |   | --------                            |       |
    |   | | span |                             |       |
    |   | |    -------->                     |       |
    |   | --------                            |       |
    |   -----------------------------       |
    -----------------------------------------

    -------->: mouse movement

    这个事件的target/srcElement是一样的。在这一样还是鼠标进入ev4。然而你可能会当鼠标从ev3来或者从SPAN来的时候做不同的事。所以我们需要知道鼠标到底从哪来的。

    relatedTarget,fromElement,toElement

    W3C把relatedTarget属性加进了mouseover和mouseout事件中。在mouseover事件下就是包括鼠标从哪来,在mouseout下就是包括鼠标到哪去。

    微软也有包含以下信息的两个属性:
    1、fromElement指的是鼠标来之前的元素。在mouseover的状况下比较有用
    2、toElement表示鼠标将要去的那个元素。在mouseout的情况下比较有用。

    在我们的第一个例子里面,relatedTarget/fromElement包含一个ev3的引用,在我们的第二个例子是SPAN。现在你就知道鼠标的来源了。

    跨浏览器的代码

    所以如果你想在mouseover的情况下想知道鼠标从哪来,那么:

    function doSomething(e) {
        if (!e) var e = window.event;
        var relTarg = e.relatedTarget || e.fromElement;
    }
    

    如果在mouseout的情况下想知道鼠标的去向那么:
    function doSomething(e) {
        if (!e) var e = window.event;
        var relTarg = e.relatedTarget || e.toElement;
    }
    


    鼠标离开一个层

    在一个基于层的导航菜单里面你可能需要知道鼠标什么时候离开层这样你才能把那个层关闭。所以你给这个层的onmouseout注册了一个事件处理程序。然后事件冒泡会导致当鼠标离开任意一个层的时候都会触发这个onmouseout。
    --------------
    | Layer      |.onmouseout = doSomething;
    | --------   |
    | | Link  | ----> We want to know about this mouseout
    | |          |   |
    | --------   |
    | --------   |
    | | Link   |   |
    | |    ----> | but not about this one
    | --------   |
    --------------
    ---->: mouse movement

    另外的一个停止的方法是当你把鼠标移入这个层,然后到了一个链接上,浏览器就在这个层上注册一个mouseout事件。这个让我很不明白(鼠标依然在层里),但是所有的浏览器都没问题。

    那么我们如何在鼠标真正离开的层的时候让mouseout发生呢?

    function doSomething(e) {
    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;
    if (tg.nodeName != 'DIV') return;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg != tg && reltg.nodeName != 'BODY')
    reltg= reltg.parentNode
    if (reltg== tg) return;
    // Mouseout took place when mouse actually left layer
    // Handle event
    }


    首先得到事件的target,也就是鼠标离开的元素。如果target不是DIV(层),理解结束函数,因为鼠标没有真正离开层。

    如果target是层,我们不能确定鼠标时离开层了还是进入了层里面的一个链接。所以要再检查事件的relatedTarget/toElement,也就是鼠标移向的那个元素。

    我们读取这个元素,然后我们通过DOM树向上遍历,直到事件的target(也就是DIV),或者BODY元素。

    如果我们遇到的target是层的子元素,那么鼠标就没有离开层。就停止函数的运行。

    当函数通过所有的验证我们就能确定鼠标确实离开了层,我们就能开始应该的动作了(通常是隐藏这个层)。

     

    Mouseenter和mouseleave

    微软还有个解决办法。他添加了两个新的事件mouseenter和mouseleave。除了对事件冒泡不反应以外基本上和mouseover和mouseout是一样的。他们把注册了事件的元素看成一个整块,对于发生在块内的
    mouseover和mouseout不做反应。

    所以这两个事件也解决了我们的问题:他们只对绑定的元素做出mouseover/out反应。

    现在这两个事件只被版本在5.5以上的IE支持。或许其他浏览器哪天回借鉴下。

    结尾

    现在已经到了Event的介绍的尾声了。好运!

    原文地址:http://www.quirksmode.org/js/events_mouse.html
    我的Twitter:@rehawk

    转载于:https://www.cnblogs.com/beiyuu/archive/2010/02/07/events_mouse.html

    展开全文
  • 元素定位需要两部分:① 元素信息(浏览器开发者工具) ...定位到元素后,需要对元素进行操作,常见的有鼠标点击、键盘操作等, 这取决于我们定位到的对象支撑哪些操作。一般来说,所有与页面交互的操 作都将通过...
  • Qt的事件循环机制

    万次阅读 多人点赞 2018-09-26 15:49:58
    问题1:Qt中常见的事件有哪些? 答:鼠标事件(QMouseEvent)、键盘事件(QKeyEvent)、绘制事件(QPaintEvent)、窗口尺寸改变(QResizeEvent)、滚动事件(QScrollEvent)、控件显示(QShowEvent)、控件隐藏(QHideEvent)、...
  • 那么常见的事件有哪些: 鼠标事件:mousedown鼠标按下,mouseup鼠标松开,mouseenter鼠标进入某个元素 mouseleave鼠标离开某个元素。 键盘事件:keypress,keyup,keydown 表单事件:submit,change表单的元素改变,...
  • 常见的事件有哪些? 点击页面上某个元素 鼠标经过特定的元素 按下键盘上某个按键 滚动窗口或改变窗口大小 页面元素加载完成或失败 一、主流浏览器 dom2级事件定义(IE9+也支持) 1.1 事件定义三种方式 ...
  • JS浏览器事件

    2020-06-01 11:21:58
    js浏览器常见事件,可在MDN中查阅相关使用方法 ... 1、什么是浏览器事件呢? 事件是浏览器天生就具备行为,不论我们是否基于JS代码绑定方法,只要相关行为触发,则一定会触发相关事件 ...【鼠标事件
  • Qt : 事件总结

    千次阅读 2018-01-30 22:56:01
    在Qt中,感觉事件无处不在,只要用户进行了操作,就会发生事件,...常见的事件主要:绘图事件(paintEvent),定时器事件(timerEvent),进入事件(enterEvent),离开事件(leaveEvent),鼠标事件(QMouseEvent),键盘事件(QKeyEven
  • web期末简答题

    2019-12-22 16:41:23
    常见的事件有哪些? ** JavaScript提供的一套API(已经做好的一堆对象,可以帮助你完成一些任务),识别用户在浏览器上的操作(鼠标点击、提交注册表单,点选单选框等。),识别到用户操作之后,可以针对用户的操作...
  • QT信号与槽机制解析

    2020-02-18 10:43:09
    信号(Signal)与槽(Slot)是Qt编程的基础。了信号与槽的编程机制,在Qt中处理界面各个组件的...信号(Signal)就是在特定情况下被发射的事件,例如:一个PushButton最常见的信号就是鼠标单击时发射的clicked()信...
  • wxPython学习手册

    热门讨论 2014-04-19 08:01:58
    12.3.4 预定义颜色名有哪些? 392 12.4 本章小结 392 第三部分 高级wxPython 394 13 建造列表控件并管理项目 395 13.1 建造一个列表控件 395 13.1.1 什么是图标模式? 396 13.1.2 什么是小图标模式? 397 13.1.3 ...
  • JAVA面试题最全集

    2010-03-13 13:09:10
    34.EJB规范规定EJB中禁止操作有哪些? 35.java除了8种基本类型外,在虚拟机里还有哪一种,有什么作用? 36.除了使用new关键字创建对象意外,试列举另外三种以上创建实例方式? 37.classloader中,JDKAPI、...
  • 作用域决定了变量和函数权力访问哪些数据。在Web浏览器中,全局执行环境是window对象,这也意味着所有全局变量或者方法都是window对象属性或方法。当一个函数在被调用时候都会创建自己执行...
  •  告诉你哪些技术是重要,是面试官最看重  获取稳定DBA职位必读宝典 内容简介  本书以oracle 10g为基础,由浅入深、从易到难,详细介绍了dba职位所要求知识结构和实战技能。第1章至第4章是基础篇,包括...
  • 中文API支持库(1.0-0

    2009-04-17 08:28:19
    _寻找窗口() 寻找窗口列表中第一个符合指定条件的顶级窗口(在vb里使用:FindWindow最常见的一个用途是获得ThunderRTMain类的隐藏窗口的句柄;该类是所有运行中vb执行程序的一部分。获得句柄后,可用api函数...
  • C#编程经验技巧宝典

    热门讨论 2008-06-01 08:59:33
    51 <br>3.3 常见算法实际应用 52 <br>0067 计算1+22+33+44+……+nn值 52 <br>0068 计算10!值 52 <br>0069 求最大公约数 52 <br>0070 求最小公倍数 53 <br>0071 判断素数算法...
  • 常见的页头、页尾、内容区。这些区块通常是由多个html标签组合而成的。 我们可以借签html标签的这种嵌套及DOM Tree思路的,开发一套用于组合嵌套这种大区块的框架。我们把一个复杂的页面拆分成n个区块来开发...
  • PowerPoint.2007宝典 8/10

    2012-04-01 18:39:23
    13.1.2 已图形文件分辨率 254 13.1.3 自行扫描图形分辨率 255 13.1.4 数码相机照片分辨率 256 13.1.5 颜色深度 256 13.1.6 文件格式 257 13.2 将图像文件导入PowerPoint 258 13.2.1 链接到图形...
  • PowerPoint.2007宝典 10/10

    2012-04-01 18:45:00
    13.1.2 已图形文件分辨率 254 13.1.3 自行扫描图形分辨率 255 13.1.4 数码相机照片分辨率 256 13.1.5 颜色深度 256 13.1.6 文件格式 257 13.2 将图像文件导入PowerPoint 258 13.2.1 链接到图形...
  • PowerPoint.2007宝典 9/10

    2012-04-01 18:42:38
    13.1.2 已图形文件分辨率 254 13.1.3 自行扫描图形分辨率 255 13.1.4 数码相机照片分辨率 256 13.1.5 颜色深度 256 13.1.6 文件格式 257 13.2 将图像文件导入PowerPoint 258 13.2.1 链接到图形...
  • PowerPoint.2007宝典 7/10

    2012-04-01 18:36:57
    13.1.2 已图形文件分辨率 254 13.1.3 自行扫描图形分辨率 255 13.1.4 数码相机照片分辨率 256 13.1.5 颜色深度 256 13.1.6 文件格式 257 13.2 将图像文件导入PowerPoint 258 13.2.1 链接到图形...

空空如也

空空如也

1 2
收藏数 38
精华内容 15
关键字:

常见的鼠标事件有哪些