jQuery的事件绑定与触发 - 学习笔记
jQuery的事件绑定与触发
事件绑定
- 基本绑定
$(element).click(function(){})
- 方法绑定
$(element).bind('click', function(){})//绑定事件
$(element).unbind();//解除事件绑定
- 动态绑定
live.on
方法在高版本的jquery中移出了,在使用时请注意版本
$(element).live('click', function(){})
可以使用on()
方法,添加selector
参数,进行动态绑定
$(element).on('click','selector', function() {});
自动触发事件
当我们想要去触发某个元素的事件时可以使用 trigger()
,注意需指定元素的事件类型
$(element).trigger('click')
常用的鼠标事件
鼠标单击事件 click
鼠标双击事件 dbclick
鼠标移入事件 mouseover
鼠标移出事件 mouseout
鼠标按下事件 mousedown
鼠标抬起事件 mouseup
鼠标移动事件 mousemove
事件冒泡和默认行为
事件冒泡
当触发一个元素的事件时,会自动触发该元素的父级和先辈级的同类型事件,造成事件并发,导致页面混乱,称为事件冒泡
此时我们可以在元素的事件处理函数中 返回一个false
来进行阻止,注意这个方法仅限于在jQuery中使用
默认行为
在页面中有些元素是具备默认行为的,例如a
链接的单击,表单的提交,都会进行跳转或提交,这些我们成为默认行为
但是在绑定上事件后,它首先会先执行事件,再去执行默认行为,而有时我们只想让其触发事件,但不执行默认行为时,
我们可以在该元素的事件中 返回一个
false
来进行阻止默认行为
<a href="http://www.Google.com">谷歌</a>
<script>
$('a').click(function(){
return false;
})
<script>
获得当前鼠标的位置和按键
我们有鼠标和键盘按键的事件,在触发事件时如果我们想要获取按键信息时,
首先需要在当前的事件中传递一个 事件对象 event
$(element).click(function(e){//传入参数非固定,可自定义,默认第一个为event对象
//能够获取>鼠标的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);
})
jQuery的事件绑定与触发 - 学习笔记的更多相关文章
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 对jQuery的事件绑定的一些思考
jQuery的事件绑定 问题 首先我们看下面的一个非经常见的事件绑定代码: //example $('#dom').click(function(e){ //do something }); $('# ...
- [HTML5]原生事件绑定和jquery动态事件绑定的区别
原生事件绑定: <!-- 标签上绑定的事件是由window对象帮助调用,因此方法内的this其实是window对象 --> <label><input type=&quo ...
- jquery 动态事件绑定(0512)
jquery动态事件绑定,父元素需为静态元素,(不能是动态生成): $("#parent").on("click","#child",fun ...
- JQuery实现click事件绑定与触发方法分析
原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...
- 7 HTML&JS等前端知识系列之jquery的事件绑定
preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...
- jQuery中事件绑定到bind、live、delegate、on方法的探究
1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...
- jQuery的事件绑定命名空间
jQuery的bind的函数在实际应用中用的不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定.在没有看到这篇文章之前,我一直不知道原来bind也可以有命名空间.事实 ...
- 前端 -----jQuery的事件绑定和解绑
11-jQuery的事件绑定和解绑 1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (S ...
随机推荐
- 关于在React中 报Super expression must either be null or a function, not undefined (采坑系列)
今天突然在联系React中遇到一开始就报 Super expression must either be null or a function, not undefined 百度,各种方法,.. ...
- 【python实现卷积神经网络】开始训练
代码来源:https://github.com/eriklindernoren/ML-From-Scratch 卷积神经网络中卷积层Conv2D(带stride.padding)的具体实现:https ...
- [原创] 在C++中实现打字机效果
如题. void pout(string str,int t)//随便取的,不要介意,str是待输出字符串,t是每两个字的间隔时间. { ;i<str.length();i++) { cout& ...
- Juli函数
- [PHP] 获取IP 和JS获取IP和地址
通过js获取 服务器 ip 服务器端口 服务器地址 var address=window.location.href; thisDLoc = document.location; var hostpo ...
- WPF中在Gmap.net中将Marker动起来
前一段时间说过一篇绘制极坐标的,这段时间对它进行了改造已经今非昔比了,功能实现了很多,我目的是让Marker动起来,然后还会绘制Route,上篇也就是简单的绘制了Route,没有关于Marker的相关 ...
- 从零开始建图床 minio
图床 图床可以参考知乎这篇文章 一些小众图床有空空间免费,但不知道什么时候会挂掉.前些年用过的极简图床,现在也销声匿迹: 大厂提供的有限免费空间,七牛云10G空间,10Gb/月 流量免费:但如果使用h ...
- Redis持久化存储(二)
redis多实例介绍 接上一篇redis.创建数据存放的目录 vim redis.conf +187 dir /application/data/ 重新启动 mkdir /application/da ...
- Ubuntu 18.04更换apt-get源
使用apt-get安装时,会很慢,更换了国内的源后,就可以解决这个问题了. 1. 备份sources.list文件 sudo cp /etc/apt/sources.list /etc/apt/sou ...
- Blazor WebAssembly 3.2.0 正式起飞,blazor 适合你吗?
最近blazor更新很快,今天在官方博客上发布了Blazor WebAssembly 3.2.0 RC:https://devblogs.microsoft.com/aspnet/blazor-web ...