JQuery中的常用事件、对象属性与使用方法分析
本文实例讲述了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.jb51.net/code/HtmlJsRun 测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
上一篇:javascript实现fetch请求返回的统一拦截
栏 目:JavaScript
下一篇:vue图片上传组件使用详解
本文地址:https://www.xiuzhanwang.com/a1/JavaScript/9429.html
您可能感兴趣的文章
- 01-105分钟快速看懂ES6中的反射与代理
- 01-10jquery实现商品sku多属性选择功能(商品详情页)
- 01-10ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
- 01-10JavaScript中的相等操作符使用详解
- 01-10JQuery常用选择器功能与用法实例分析
- 01-10javascript中的相等操作符(==与===区别)
- 01-10判断JavaScript中的两个变量是否相等的操作符
- 01-10JQuery中DOM节点的操作与访问方法实例分析
- 01-10Jquery属性的获取/设置及样式添加/删除操作技巧分析
- 01-10继承行为在 ES5 与 ES6 中的区别详解
阅读排行
本栏相关
- 04-02javascript点线,点线的代码
- 04-02javascript潜力,javascript强大吗
- 04-02javascript替换字符串,js字符串的替换
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的词条
- 04-02javascript并行,深入理解并行编程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警报,JavaScript警告
- 04-02javascript遮盖,JavaScript遮盖PC端页面
- 04-02javascript前身,javascript的前身
随机阅读
- 08-05DEDE织梦data目录下的sessions文件夹有什
- 01-11ajax实现页面的局部加载
- 01-10delphi制作wav文件的方法
- 01-10使用C语言求解扑克牌的顺子及n个骰子
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 04-02jquery与jsp,用jquery
- 01-10C#中split用法实例总结
- 08-05dedecms(织梦)副栏目数量限制代码修改
- 01-10SublimeText编译C开发环境设置