【jQuery】(4)---jQuery常用事件
【jQuery入门】(4)---jQuery常用事件
一.常用事件列表
1.blur() 当失去焦点时触发。包括鼠标点击离开和TAB键离开。
2.change() 当元素获取焦点后,值改变失去焦点事触发。
3.click() 当鼠标单击时触发。
4.dblclick() 当鼠标双击时触发。
5.focus() 当元素获取焦点时触发。注意:某些对象不支持。
6.select() 当input里的内容被选中时触发。
7.submit() 提交选中的表单。
二、事件常用方法
事件名称 | 说明 |
bind | 绑定事件 |
hover | 切换事件 |
toggle | 顺序执行事件 |
unbind | 移除事件 |
one | 仅执行一次的事件 |
trigger | DOM加载完毕后自动执行的事件 |
2.1事件绑定
1)方式一:语法:bind(type,[data],fn)
type参数可以是顶部的22个方法(注意:不能带括号); 参数data是属性值传递给事件对象的额外数据,fn是处理函数。可以bind多个事件,也可以为同一事件绑定多个函数。
$('#d1').bind('click',function(){//正式写法,常用于解决浏览器兼容性
$(this).html('hello java'); });
2)方式二(绑定的简写形式):click( function(){} );
$('#d1').click(function(){//简写形式
$(this).html('hello java'); });
2.2、切换事件
语法:hover(fn1,fn2); 鼠标移入执行第一个函数,鼠标移出执行第二个函数。相当于mouseenter与mouseleave。
$("#div1").hover(function(){alert("鼠标移入我啦");},function(){alert("鼠标移出我啦!");})
2.3、顺序执行事件
语法:toggle(fn1,fn2,fn3...) 当鼠标单击时,依次执行绑定的事件
$("#div1").toggle(function(){alert(1);},function(){alert(2);},function(){alert(3);})
2.4、unbind 移除事件
语法:unbind([type],[fn]) 移除元素已经绑定的事件,type:指定要移除的事件,fn指定要移除的方法。当没有参数时,所有的事件都移除。注意,用live()方法绑定的方法移出不了,live()绑定的方法要用它自己的die()来移出。
$(":button").unbind(); // 移除按钮的所有事件。
$(":button").unbind("click"); //移除按钮的单击事件。
$(":button").unbind("click",fn1); //移除按钮的单击事件中的fn1函数,如果该事件绑定了多个函数,对其他函数没影响。
2.5、one 仅执行一次的事件
语法:one(type,[data],fn) 绑定一个仅执行一次的事件
$("#div1").one("click",function(){ alert("我只执行一次!"); })
2.6、trigger DOM加载完毕后自动执行的事件
语法:trigger(type,[data]) DOM元素加载完成后自动执行
$("#div1").bind("bclick",function(){ alert("你好"); });
$("#div1").trigger("bclick"); //注意,trigger一定要放在绑定的事件之后,否则不执行。
2.7.ready() 当DOM元素加载完成后绑定处理事件
$(document).ready()
三. jQuery中事件处理
3.1 获得事件对象
click(function(e){ //e:对底层的事件对象做了一个封装 });
3.2 事件对象的属性
①event.type:事件类型 ②event.target:返回事件源(是DOM对象)
③event.pageX/pageY:返回点击的坐标
$(function(){
$('a').click(function(e){//对两个对象都绑定了click
//依据事件对象获得事件源,e是jQuery对象(封装了底层的事件对象)
var obj=e.target;//target属性返回的是一个dom对象
alert(obj.innerHTML);
alert(e.pageX+","+e.pageY);//通过事件对象获得光标点击的X、Y坐标
alert(e.type); }); });
<a href="javascript:;">Cilck 1</a><a href="javascript:;">Cilck 2</a>
//在开发过程中一般用$(this)获得当前对象
3.3 停止冒泡:event.stopPropagation()
$(function(){//e是Query封装后的对象,不能再用底层的cancelBubble属性
$('a').click(function(e){ alert('点击的是连接');
e.stopPropagation();//停止冒泡 });
$('div').click(function(e){ alert('点击的是div'); }); });
<div id="d1"><a href="javascript:;">Cilck Me</a></div>
//停止冒泡个人理解:在这里a标签和div都绑定了click事件,同时a标签是div的子类,所以在不停止冒泡的情况下,当你点击a标签那也会触发父类div的click事件,停止冒泡可以防止这种事情发生。
3.4 停止默认行为:event.preventDefault()
注意事项:原来的写法为<a href="del.do" onclick="return false"></a>
$(function(){
$('a').click(function(e){ var flag=confirm('确定删除吗?');
if(!flag){ //阻止浏览器的默认行为,即不再向连接地址发请求
e.preventDefault(); } }); });
<a href="del.do">删除</a>
想的太多,做的太少,中间的落差就是烦恼,要么去做,要么别想 少尉【15】
最新文章
- kali 下文件操作
- 聊聊传统oo和js的某些对比——对象/函数/new关键字等
- 基于DCMTK的DICOM相关程序编写攻略
- lua注释
- [转载] MySQL高可用方案选型参考
- Android——模拟文件拷贝
- Restrict each user to a single session in window server 2008 R2 or 2012
- c#基础汇总-------------封装
- Oracle ABP(Autotask Background Process)
- 关于手机端CSS Sprite图标定位的一些领悟
- C# 网络编程 Part.1
- H5之重力感应篇
- Number()和new Number()的区别以及一种简单实现
- webrtc底层一对一连接过程探索(二)
- python之动态参数 *args,**kwargs和命名空间
- linux syscall 详解【转】
- javascript 正则表达式学习
- Django之常用命令以及问题汇总
- NetCore入门篇:(四)Net Core项目启动文件Startup
- ZOJ 3391 Haunted Graveyard(最短路负权回路)题解