13-jQuery事件绑定和常用鼠标事件
- # 关于事件
- ## 事件绑定
- 1.**基本绑定**
- > $(element).click(function(){})
>
> $(element).dblclick(function(){})
>
> 。。。
>
> 加载完毕事件
>
> $(document).ready(function(){})
>
> $(function(){})- 2.**方法绑定**
- > $(element).bind('click', function(){})//绑定事件
>
> $(element).unbind();//解除事件绑定- 3.**动态绑定**
- > $(element).live('click', function(){})
>
> 需注意,live方法在高版本的jquery中移出了,在使用时请注意版本- ## 事件触发
- > 当我们想要去触发某个元素的事件时可以使用 trigger,注意需指定元素的事件类型
- ```
$(element).trigger('click')
```- ### 常用的鼠标事件
- ```
鼠标单击事件 click
鼠标双击事件 dbclick
鼠标移入事件 mouseover
鼠标移出事件 mouseout
鼠标按下事件 mousedown
鼠标抬起事件 mouseup
鼠标移动事件 mousemove
```- ## 事件冒泡和默认行为
- **事件冒泡**
- > 当触发一个元素的事件时,会**自动触发该元素的父级和先辈级的同类型事件**,**造成事件并发**,导致页面混乱,我们称为事件冒泡
>
> 此时我们可以在元素的事件处理函数中 返回一个false 来进行阻止,注意这个方法仅限于在jquery中使用- **默认行为**
- > 在页面中有些元素是具备默认行为的,例如a链接的单击,表单的提交,都会进行跳转或提交,这些我们成为默认行为
>
> 但是在绑定上事件后,**它首先会先执行事件,再去执行默认行为**,而有时我们只想让其触发事件,但不执行默认行为时,
>
> **我们可以在该元素的事件中 返回一个false来进行阻止默认行为**- ```
<a href="http://www.baidu.com">百度</a>- $('a').click(function(){
- //阻止默认行为
return false;
})
```- **获得当前鼠标的位置和按键**
- > 我们有鼠标和键盘按键的事件,在触发事件时如果我们**想要获取鼠标的位置或键盘按键信息时**,
>
> 首先需要在当前的事件中**传递一个 事件对象 e**vent- ```
$(element).click(function(e){
//能够获取鼠标的x轴和y轴坐标,坐标位置相对于浏览器窗口
var x = e.clientX;
var y = e.clientY;- //能够获取鼠标的x轴和y轴坐标,坐标位置相对于文档
var _x = e.pageX;
var _y = e.pageY;
})- $(element).keydown(function(e){
//可以打印e对象,或者直接使用该对象中的keyCode属性来获取按键信息
var key = e.keyCode;
console.log(key);
})
```
13-jQuery事件绑定和常用鼠标事件的更多相关文章
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
- jquery table的隔行变色 鼠标事件
一.鼠标事件 mouseover(function(){}); 鼠标移动到目标事件 mouseout(function(){}); 鼠标离开目标的事件 二.具体应用代码 <body> &l ...
- js Dom为页面中的元素绑定键盘或鼠标事件
html鼠标事件 onload 页面加载 onclick 鼠标单击 onmouseover 鼠标移入 onmouseout 鼠标移出 onfocus 获取焦点 onblur 失去焦点 onchange ...
- 事件绑定on与hover事件
今天项目中UI设计了一个鼠标划入和划出的效果,本来这个小效果是非常简单的!可是在实际的生产环境中就出现了一点点问题!因为在实际的环境中,数据全部是用ajax异步加载进去的,这样就造成了hover方法不 ...
- ES之事件绑定,解除绑定以及事件冒泡、事件捕获
绑定事件的处理方法任何元素都有事件属性,而绑定事件就是将这个事件与一个函数相连接. ①句柄事件dom.onXXX = function () {代码块} 以on开头的事件属于句柄事件兼容性非常好,但是 ...
- 事件监听机制——鼠标事件MouseEvent
鼠标事件 鼠标事件包括鼠标的双击.左击.右击.中间键等等,本文进行事件加载进行简单介绍,具体可以参考键盘事件. import java.awt.*; import java.awt.event.*; ...
- jQuery事件绑定与常用事件
jQuery事件与js类似,只是在名称上将前面的on去掉了,例如jQuery的click.mousedown.keypress事件.jQuery绑定事件有2种方法,下面用最基本的例子做演示. ①直接绑 ...
- 【swift】长按事件绑定,平移滑动事件+坐标获取
为何把这两个事件归类在一起? 我后来才明白,iOS有一个手势事件(UiGestureRecognizer) 事件里有7个功能,不过我只试过前两个,也就是标题的这两个(长按.平移滑动) UILongPr ...
- 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码
css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...
随机推荐
- 对Moment.js的研究
创建npm install moment --save-dev 日期格式化 moment().format('MMMM Do YYYY, h:mm:ss a'); // 六月 4日 2019, 6:2 ...
- F5设备部署
旁挂组网(组网模式一) 所谓旁挂组网模式,就是指在BIG-IP LTM上只配置一个Vlan,使用一个端口(或者Trunk端口)连接在网络中,所有的处理均在这一个Vlan中运行.通常有三种常见配置模式. ...
- dede后台系统基本参数空白怎么办?
dede后台系统基本参数空白怎么办? 如图: 解决办法:还原dede_sysconfig表即可 后台 系统-SQL命令行工具,执行如下sql delete table dede_sysconfig ...
- Element ui 中的表格数据格式转换
- 进阶3: zookeeper-3.4.9.tar.gz和hbase-1.2.4-bin.tar.gz 环境搭建(hbase 伪分布式)
前提条件: 成功安装了 jdk1.8, hadoop2.7.3 注意条件: zookeeper,hbase 版本必须要和hadoop 安装版本相互兼容,否则容易出问题: 本次:安装包 zookee ...
- loadrunner性能测试巧匠训练营-controller
1.设置集合点 现在脚本添加集合点的函数,集合点不能添加到事务里面,负责统计事务的时候会把时间计算进去 2.IP欺骗 前言 https://www.cnblogs.com/danbing/p/7459 ...
- 图论之点双&边双
说人话: 边双联通: a到b的路径上无必经边 点双联通: a到b的路径上除了a,b没有必经点 tarjan求点双联通: 代码(补图) 割点: 桥: 求点双:强制dfs时不越过割点,即可求出一个块 求边 ...
- Ffmpeg AAC 编码错误 Input contains (near) NaN/+-Inf
Ffmpeg AAC编码 如果传入参Frame的Sample Format 为 AV_SAMPLE_FMT_S16,会出现 错误提示 Input contains (near) NaN/+-Inf,需 ...
- HTML-空格字符实体
不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格.在HTML中,如果你用空格键产生此空格,空格是不会累加的(只 ...
- X509格式的证书校验(基于GMSSL2019-06-15版本)
实现X509格式证书的链式校验 // cert_public.cpp : Defines the exported functions for the DLL application. // #inc ...