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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery表单选择器用法详解
Aug 22 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
PHP经典的给图片加水印程序
2006/12/06 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
python创建线程示例
2014/05/06 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
中国央视网签名寄语
2014/01/18 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
Mysql忘记密码解决方法
2022/02/12 MySQL
vue中data里面的数据相互使用方式
2022/06/05 Vue.js