JQuery中的常用事件、对象属性与使用方法分析


Posted in jQuery onDecember 23, 2019

本文实例讲述了JQuery中的常用事件、对象属性与使用方法。分享给大家供大家参考,具体如下:

JQuery中的常用事件

.click() 鼠标单击触发事件,参数可选(data,function)
.dblclick() 双击触发,同上
.mousedown()/up() 鼠标按下/弹起触发事件
.mousemove() 鼠标移动事件
.mouseover()/out() 鼠标移入/移出触发事件
.mouseenter()/leave() 鼠标进入/离开触发事件*
.hover(func1,func2) 鼠标移入调用func1函数,移出调用func2函数
.focusin() 鼠标聚焦到该元素时触发事件
.focusout() 鼠标失去焦点时触发事件
. focus()/.blur() 鼠标聚焦/失去焦点触发事件(不支持冒泡)
.change() 表单元素发生改变时触发事件
.select() 文本元素被选中时触发事件
.submit() 表单提交动作触发*
.keydown()/up() 键盘按键按下/弹起触发
.on() 多事件的绑定
.off() 移除事件的绑定
.trigger(“event”) 触发事件event调用
.triggerHandler() 触发事件,不会冒泡,不会触发默认事件

注:

1、以上事件函数有三种用法:

//直接绑定事件到元素上
$('.target1').keydown(function(e) {
  $("em:first").text(e.target.value)  //通过对象e获取输入的值
});
//传递参数调用函数处理
$("#test").click(11111,function(e) {
  //this指向 div元素
  //e.data => 11111 通过e传递参数数据
});
//手动触发已绑定的点击事件
$elem.click()

2、mouseover与mouseenter区别:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件,称作支持冒泡处理,冒泡处理指子元素与父元素共同定义的事件,在触发子元素时,或者没有定义子元素,事件就会向父级传播,引发父级事件触发。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

3、form元素是有默认提交表单的行为,如果通过submit处理的话,需要禁止浏览器的这个默认行为。传统的方式是调用事件对象  e.preventDefault() 来处理, jQuery中可以直接在函数中最后结尾return false即可。

//回车键或者点击提交表单后禁止浏览器默认跳转:
  $('#target2').submit(function() {
    alert('捕获提交表达动作,阻止页面跳转')
    return false;
  });

4、on()使用

基本用法:.on( events ,[ selector ] ,[ data ] )

最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同

$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
//多个事件绑定同一个函数,通过空格分离,传递不同的事件名,可以同时绑定多个事件
$("#elem").on("mouseover mouseout",function(){ });
//多个事件绑定不同函数
$("#elem").on({
  mouseover:function(){}, 
  mouseout:function(){}
});
//将数据传递到处理程序
$( "button" ).on( "click", {  //第二个参数传递数据给函数调用
 name: "Mr.Tory"
}, greet );
function greet( event ) {
 alert( "Hello " + event.data.name ); //输出Hello Mr.Tory
}

事件对象的属性与方法

.type 事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click
.data 事件调用时传入额外参数
.target 触发该事件的 DOM 元素
.which 指示按了哪个键或按钮
.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数
.pageX/Y 相对于文档左/上边缘的鼠标位置
.result 上一个相同事件处理器函数返回的值
.preventDefalut() 阻止事件的默认动作
.stopPropagation() 取消事件冒泡
$("#content").click(function(event) {
  $("#msg").html("<p>外层div元素被单击</p>");
  event.stopPropagation();             //通过event方法阻止事件冒泡
});

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun 测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 #jQuery
基于jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现验证用户登录
Dec 10 #jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 #jQuery
jQuery实现消息弹出框效果
Dec 10 #jQuery
jQuery实现弹出层效果
Dec 10 #jQuery
You might like
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
php检查页面是否被百度收录
2015/10/28 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
JsChart组件使用详解
2018/03/04 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
python将字符串转换成数组的方法
2015/04/29 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
python list转矩阵的实例讲解
2018/08/04 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
python os.fork() 循环输出方法
2019/08/08 Python
python实现飞船大战
2020/04/24 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
师范生个人推荐信
2013/11/29 职场文书
工程技术员岗位职责
2014/03/02 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
个人收入证明模板
2014/09/18 职场文书
英语通知范文
2015/04/22 职场文书
三下乡活动心得体会
2016/01/23 职场文书
高质量“欢迎词”
2019/04/03 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript