【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】

最新文章

  1. kali 下文件操作
  2. 聊聊传统oo和js的某些对比——对象/函数/new关键字等
  3. 基于DCMTK的DICOM相关程序编写攻略
  4. lua注释
  5. [转载] MySQL高可用方案选型参考
  6. Android——模拟文件拷贝
  7. Restrict each user to a single session in window server 2008 R2 or 2012
  8. c#基础汇总-------------封装
  9. Oracle ABP(Autotask Background Process)
  10. 关于手机端CSS Sprite图标定位的一些领悟
  11. C# 网络编程 Part.1
  12. H5之重力感应篇
  13. Number()和new Number()的区别以及一种简单实现
  14. webrtc底层一对一连接过程探索(二)
  15. python之动态参数 *args,**kwargs和命名空间
  16. linux syscall 详解【转】
  17. javascript 正则表达式学习
  18. Django之常用命令以及问题汇总
  19. NetCore入门篇:(四)Net Core项目启动文件Startup
  20. ZOJ 3391 Haunted Graveyard(最短路负权回路)题解

热门文章

  1. 一、PyQt5基础概念与安装配置
  2. Java匿名内部类访问外部
  3. 关于python,完善我计算机知识的一步。
  4. Koa源码分析(二) -- co的实现
  5. Python中利用进度条求圆周率
  6. oracle 中如何查看某个表所涉及的存储过程
  7. java开发师笔试面试每日12题(3)
  8. mysql 循环写入数据库
  9. Appium日志乱码终结指北
  10. gii配置