Web前端基础(17)jQuery中的事件

事件绑定

1
bind(type[, data], fn);

第一个参数是绑定的事件类型,第二个参数可选是额外数据对象,第三个参数是处理函数。

在文档装载完成后,可以使用bind()方法来对元素绑定特定的事件,可以绑定的事件有:

事件说明
blur元素失去焦点
focus元素获得焦点
load一张页面或一幅图像完成加载。
resize重置按钮被点击
scroll滚动事件
unload用户退出页面
click点击事件
dblclick双击事件
mousedown鼠标按键按下
mouseup鼠标按键抬起
mousemove鼠标被移动
mouseover鼠标移到某个元素上
mouseout鼠标从某个元素上移开
mouseenter鼠标进入某个元素
mouseleave鼠标离开某个元素
change域的内容被改变
select文本被选中
submit确认按钮被点击
keydown键盘按下
keypress某个键盘按键被按下并松开。
keyup某个键盘按键被松开
error在加载文档或图像时发生错误。

合成事件

jQuery有两个合成事件hover()和toggle(), hover()方法用于模拟鼠标悬停事件,toggle()方法用于模拟连续点击事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
$("#pannel").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
});

$(function(){
$("pannel").toggle(function(){
$(this).next().show();
}, function(){
$(this).next().hide();
})
})

事件冒泡

假如在body中有个div在这个div中有个input,而且body,div,input都绑定了click事件。

当我们点击input时,三个click事件会依次向上响应,就像水泡一样。

有时候我们只需要这个input响应这个点击事件,所以就需要限制点击事件的范围。在jQuery中针对不同浏览器对象兼容问题进行了扩展和封装,使用事件对象也非常简单,最需要添加一个event参数。

1
2
3
4
5
$("element").bind("click", function(event){
//TODO some thing...

event.stopPropagation();
})

在jQuery中只需要调用stopPropagation()方法就可以停止事件冒泡。

阻止默认行为

网页中的元素有自己的默认行为,例如单击超链接会跳转,单击“提交”按钮后会提交,有的时候我们需要阻止这些默认行为。在jQuery中使用preventDefault()方法来阻止。

1
2
3
4
5
6
7
<body>
<form action="test.html">
用户名:<input type="text" id="username">
<input type="submit" id="sub" value="提交">
</form>
<div id="msg"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
<script>
$(function{
$("#sub").bind("click", function(event){
var username = $("#username").val();
if(username===""){
$("#msg").html("<p>文本框的值不能为空</p>");
event.preventDefault();
}
});
})
</script>

有一种简写方式就是事件函数return false, return false就相当于调用了event.stopPropagation();和event.preventDefault();

事件捕获

如上图所示事件捕获和事件冒泡刚好是相反的过程,遗憾的是,并非所有主流浏览器都支持事件捕获,这个缺陷无法通过JavaScript修复,所以jQuery不支持事件捕获。

事件对象的属性

event.type

该方法是获取事件的类型

1
2
3
4
$("a").click(function(event){
alert(event.type); //获取事件类型
return false; //阻止事件冒泡和默认事件
})

event.target

获取触发事件的元素

1
2
3
4
5
$("a[href='http://dp2px.com']").click(fuction(event){
var tag = event.target;
alert(tag.href);
return false;
});

event.pageX和event.pageY

该方法是获取光标相对于页面的x坐标和y坐标。

1
2
3
4
$("a").click(function(event){
alert("current mouse position : " + event.pageX + ", " + event.pageY);
return false;
})

event.which

在鼠标点击事件中获取鼠标的左、中、右键事件,在键盘事件中获取键盘按键。

1
2
3
$("a").mousedown(function(e){
alert(e.which); //1 鼠标左键 2 鼠标中键 3 鼠标右键
})

event.metaKey

监听键盘的ctrl键

移除事件

1
2
3
4
$("#delall").click(function(){
$("#btn").unbind("click");
});
//unbind()可以不传事件类型,这样就是移除所有事件

如果想移除某一个事件

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
$("#btn").bind("click", myFun1 = function(){
$("#test").append("<p>我的绑定函数1</p>")
}).bind("click", myFun2 = function(){
$("#test").append("<p>我的绑定函数2</p>")
}).bind("click", myFun3 = function(){
$("#test").append("<p>我的绑定函数3</p>")
})

$("#deltwo").click(function(){
$("#btn").unbind("click", myFun2);
})
})

另外对于只需要触发一次,随后就解绑的情况jQuery提供了一种简单写法one()方法

1
2
3
4
5
$(function(){
$("#btn").one("click", function(){

})
})

模拟操作

有的时候我们需要模拟用户的主动操作,比如模拟点击事件。在jQuery中可以使用trigger()方法来实现。

1
2
3
$("#btn").trigger("click");
//也可以简写为
$("#btn").click();

除了上面的事件外,我们可以自定义事件,来通过trigger()触发我们的自定义事件。

1
2
3
4
$("#btn").bind("myClick", function(){

})
$("#btn").trigger("myClick");

trigger()方法第一个参数是事件类型,第二个参数是一个数组用于传递参数。

1
2
3
$("#btn").bind("myClick", function(event, msg1, msg2){

})

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage Element Error Exception Extensions File FileProvider Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code ValueAnimator ViewPropertyAnimator Web Web前端 Workbench api apk bookmark by关键字 compileOnly css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指针 插件 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 源码 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×