jquery的鼠标事件

jquery的鼠标事件相关知识

• 鼠标滚轮事件

      鼠标滚轮事件和页面滚动事件是有区别的，当你见到一个页面可以用鼠标滚动切换页面内容，但是却没有见到页面内有滚动条，不用奇怪，这个就是用鼠标滚轮事件实现的。    原生的js是支持鼠标滚轮事件的，而我们平时用的jquery版本却不支持，但是强大的jquery竟然不支持这类常用事件，岂不让人大跌眼镜，自然不会，这个事件已经被封装成了jquery的插件，只需在调用时引入这个插件js文件即可正常使用。插件下载地址http://www.jq22.com/jquery-info357以下简要说一下使用方法$('#myWheel').mousewheel(function(event, delta) {    if (delta > 0) {        
• JQuery——鼠标事件2

       鼠标事件.hover()、.focus()和.focusout()1   .handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数2   .handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数3   .hover()在元素上移进移出切换器颜色  4   .focus()监听用户在点击时的聚焦5   $ele.focusin()绑定$ele元素，不带任何参数一般是用来指定触发一个事件6   $ele.focusin( handler )绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，可以针对事件的反馈做很多操作7   $ele.focusin( [eventData ], handler )绑定$ele元素，每次$ele元素触发点击操作会执行回调 h
• JavaScript事件类型：鼠标事件

  Dom3级事件中定义了9个鼠标事件 1、click事件 click：用户单击鼠标主按钮（一般为左边按钮）或者在获得焦点的前提下按回车键时触发。 click()方法也可以触发click 事件。 2、dblclick事件、mousedown事件和mouseup事件 dblclick：用户双击鼠标主按钮（一般为左边按钮）时触发。 mousedown：按下任意鼠标按钮时触发。 mouseup：释放鼠标按钮时触发。 3、mouseenter事件、mousemove事件和mouseover事件 mouseenter：鼠标光标从元素外部首次移动到元素范围之内时触发，这个事件不冒泡，而
• JQuery事件——鼠标事件

        鼠标事件.click()、.dbclick()、.mousedown()和 .mouseup()1   .click()用于监听用户单机操作2   .dbclick()用于监听用户双击操作3   $ele.click()绑定$ele元素，不带任何参数一般是用来指定触发一个事件4   $ele.click(handler(eventObject))绑定$ele元素，每次$ele元素触发点击操作会执行回调handler函数，可以针对事件的反馈做很多操作，方法中的this是指向绑定事件的元素5   $ele.click([eventData],handler(eventObject))绑定$ele元素，每次$ele元素触发点击操作会执行回调handler函数，可以针对事件的反馈做很多操作，方法中的this是指向绑定事件的元素，还可以接受一个数据参数，是为了解决不同作用域下数据传递的问题6   

jquery的鼠标事件相关课程

• Android事件分发机制 介绍android系统中关于事件分发的原理，以及流程

  讲师：Sunday 入门 6530人正在学习

• OpenCV三大经典项目实战 一次性掌握计算机视觉核心技能 人脸识别、自动驾驶、物体检测……想进军未来高科技行业，OpenCV是基石。本课程带你系统掌握计算机视觉核心知识体系，突破OpenCV重难点，真实落地“车辆检测、文字识别、图像拼接” 三大典型项目,高效积累计算机视觉实战经验与能力。

  讲师：李超 中级 563人正在学习

• Vue3 + Typescript 从0到1开发通用基础组件 前端工程师都在用的Vue3.0+Typescript，你还没听说过？别慌，现在还来得及！本课程带你全面学懂、学会、学透Typescript，透彻掌握Vue3 的新特性，跟随由浅入深的项目开发学习节奏，体验企业级代码规范与流程。学习快人一步，升职快人一步！

  讲师：张轩 初级 6917人正在学习

jquery的鼠标事件相关教程

• 3. 模拟鼠标操作 最后一部分我们来看看和鼠标操作相关的方法，总共有4个方法：splash:mouse_click()：模拟鼠标的点击动作，该方法的原型为 splash:mouse_click(x, y);示例1：local button = splash:select('button')-- 对于选中的button元素执行点击动作button:mouse_click()示例2：-- 通过(x, y)坐标执行鼠标点击动作function main(splash) assert(splash:go(splash.args.url)) -- 定义js函数 local get_dimensions = splash:jsfunc([[ function () { var rect = document.getElementById('button').getClientRects()[0]; return {"x": rect.left, "y": rect.top} } ]]) splash:set_viewport_full() splash:wait(0.1) -- 执行js方法，获取元素的坐标位置 local dimensions = get_dimensions() -- FIXME: button must be inside a viewport splash:mouse_click(dimensions.x, dimensions.y) -- Wait split second to allow event to propagate. splash:wait(0.1) return splash:html()endsplash:mouse_hover()：模拟鼠标悬停事件，方法原型为 splash:mouse_hover(x, y)；splash:mouse_press()：在网页中触发鼠标按下事件，方法原型为 splash:mouse_press(x, y)；splash:mouse_release()：在网页中触发鼠标释放事件。方法原型为 splash:mouse_release(x, y)；
• 2.2 事件源 事件源描述了触发事件的主体，对于鼠标事件，事件源通常是行为发生时鼠标焦点所在图形区域对应的图表。所有类型的图表都支持鼠标事件；部分组件支持触发鼠标事件，但默认是关闭的，需要通过设置 triggerEvent: true 来启动。组件对鼠标事件的支持情况如下：支持：title，xAxis ，yAxis， radiusAxis ，angleAxis，radar ，parallelAxis， singleAxis ，timeline，calendar；不支持： polar ，legend， grid ，datazoom， visualMap， tooltip， axisPointer， toolbox， brush， geo ，parallel， graphic。Tips：graphic 是原生图形组件，不支持echartInstance.on 接口，但可直接调用 element.onclick 等接口实现事件监听。行为事件由特定的组件、图表触发，例如 legendselectchanged 的事件源只能是 legend 组件，更多信息请参考 事件名称 一节。
• DOM 事件对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。(W3C)事件对象会在事件被触发时获得，对象包含了当前事件的一些信息，如点击事件可以获取到点击的位置，键盘输入事件可以获取到按下的键。
• 2.1 事件名称 ECharts 中存在两种类型的事件，第一种是鼠标在图形示例上的行为所触发的鼠标事件，包括：clickdbclickmousedownmousemovemouseupmouseovermouseoutcontextmenuglobalout上述事件除 globalout 外，均与 DOM Event 规范 定义的同名事件有相同的语义、触发条件。globalout 在鼠标移出图表示例范围时触发。第二种称为行为事件，在组件、图表状态发生某种业务状态迁移时触发，包括：事件名适用组件触发时机legendselectchangedlegend切换图例选中状态后的事件legendselectedlegend图例选中后的事件legendunselectedlegend图例取消选中后的事件legendscrolllegend图例滚动事件datazoomdatazoom数据区域缩放后的事件datarangeselectedvisualMap视觉映射组件中，range 值改变后触发的事件timelinechangedtimeline时间轴中的时间点改变后的事件timelineplaychangedtimeline时间轴中播放状态的切换事件dataviewchangedtoolbox工具栏中数据视图的修改事件magictypechangedtoolbox工具栏中动态类型切换的切换事件brushbrush选框添加事件globalcursortakenbrushbrush 组件捕获鼠标 cursor 时触发brushselectedbrush选框内容变更事件geoselectchangedgeogeo 中地图区域切换选中状态的事件geoselectedgeogeo 中地图区域选中后的事件geounselectedgeogeo 中地图区域取消选中后的事件axisareaselected平行坐标轴平行坐标轴范围选取事件pieselectchanged饼图饼图扇形切换选中状态的事件pieselected饼图饼图扇形选中后的事件pieunselected饼图饼图扇形取消选中后的事件mapselectchanged地图地图区域切换选中状态的事件mapselected地图地图区域选中后的事件mapunselected地图地图区域取消选中后的事件focusnodeadjacency连接图graph 图邻接节点高亮事件unfocusnodeadjacency连接图graph 的邻接节点取消高亮事件restoreECharts 实例重置 option 事件renderedECharts 实例渲染完成事件finishedECharts 实例同样是渲染完成事件，当动画或渐进渲染结束时触发上表只摘录行为事件的关键部分，更详细的介绍请参考 官网文档。行为事件的发生代表着组件实体内部状态发生了某些变更，有两种原因可能触发行为事件：用户交互行为，例如图例组件中，用户通过鼠标点击切换图例开关时，ECharts 除触发鼠标 click 事件外，还会触发 legendselectchanged 行为事件；接口调用，例如图例组件中，调用 echartInstance.dispatchAction({ type: 'legendToggleSelect' }) 后也依然会触发 legendselectchanged 行为事件。
• 4. 与事件系统联动 事件系统与行为系统有千丝万缕的内在关系，两者组合使用可实现多图表联动效果，例如实例：1302实例定义了一个柱状图、一个饼图，两者通过 action 与事件系统实现联动交互效果。交互之一是通过监听鼠标 hover 事件，分发对应图表的高亮 action，核心代码：// 监听鼠标hover事件myChart.on('mouseover', 'series', (event) => { const { seriesType, name } = event; if (seriesType === 'pie') { // 鼠标停留在饼图上时，触发柱状图对应数据项的高亮效果 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, name }); } else if (seriesType === 'bar') { // 鼠标停留在柱状图上时，触发饼图对应数据项的选中效果 myChart.dispatchAction({ type: 'pieSelect', seriesIndex: 1, name }); }});示例效果：另一个交互效果，是鼠标点击柱状图时，展开数据项的详情数据，核心代码：// 在柱状图上监听鼠标click事件myChart.on('click', 'series.bar', (event) => { const { name } = event; // 柱状图上发生点击事件时，图表聚焦到数据项对应的细节数据上 const serie = data.find((serie) => serie.name === name); myChart.setOption({ xAxis: { data: weeks, }, series: [{ data: serie.data }, { data: serie.data.map((value, index) => ({ name: weeks[index], value })) }], });});示例效果：Tips：灵活使用行为系统与事件系统，能够在组件的基础能力之外实现更多更丰富的交互功能，这是高阶开发者必备技能之一。
• 3. 监听事件 ECharts 中可通过 echartInstance.on 函数绑定事件处理函数，on 函数签名：(eventName: string, query?: string|Object, handler: Function, context?: Object)各参数说明：参数名类型必选说明eventNamestring是指定监听的事件名称querystring|object否指定在特定的组件或者元素上响应 ，仅在鼠标事件中有效handlerfunction是事件回调函数contextobject否回调函数执行时的 this 对象，默认为触发事件的 ECharts 实例对象

jquery的鼠标事件相关搜索

j2ee j2ee是什么 jar格式 java java api java applet java c java jdk java list java map java script java se java socket java swing java switch java web java xml java 程序设计 java 多线程 java 环境变量

查看更多慕课网实用课程