标准的绑定:
bind(type,[,data],fn)==>第一个参数是事件类型 第二个可选参数作为event.data 传递给事件对象的额外数据对象 第三个参数为用来绑定的处理函数
简写绑定事件:
$('#panel h5.head').mouseover(function(){

});
合成事件:
hover(enter,leave) hover事件用来模拟鼠标的悬停事件 $('.head').hover(function(){},function(){})
toggle(fn1,fn2,fn3....fnN) $('.head').toggle(function(){},function(){}) toggle函数还有一个作用 切换元素的可见状态 $('p').toggle();

事件冒泡:
<div><p><span></span></p></div>例如 在div中添加了点击事件 p也添加了点击事件 span 也添加了点击事件当点击span标签时候会触发三个click事件
这个现象就是事件冒泡
事件冒泡导致的此问题jquery提供了解决方案: event.stopPropagation();

事件对象的属性:
event.type() 获取到事件的类型
event.preventDefault 组织浏览器的默认事件
event.stopPropagation 阻止事件冒泡
event.target 获取事件源
event.pageX()/event.pageY()==>获取光标相对于页面的x坐标和y坐标
event.which() ==>获取作用鼠标的哪个键点击的 1.左键 2.中键 3.右键
移除事件:
unbind $('p').unbind('click');
one(type,[,data],fn) one事件提供了一种方式 一次触发事件后删除
模拟操作:
$('#btn').trigger('click');
其他操作:
同时绑定多个事件类型:
$('div').bind('mouseover mouseout',function(){
$(this).toggleClass('over');
})
添加命名空间:
$('div').bind('click.plugin',function(){})
$('div').bind('mouseover.plugin',function(){})
$('div').bind('dbclick',function(){})
$('button').click(function(){
$('div').unbind('.plugin');
})
事件类型后面添加命名空间,这样删除事件的时候只需要删除命名空间就可以了
触发命名空间的事件:
$(div).trigger('click'); ==>这样有没有命名空间都可以触发
$(div).trigger('click!'); ==>这样有叹号的只能触发不带有命名空间的事件

jQuery--事件总结的更多相关文章

  1. JQuery选择器JQuery 事件

    JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...

  2. HTML Select 标签选择后触发jQuery事件代码实例

    页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...

  3. jquery事件核心源码分析

    我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...

  4. 解密jQuery事件核心 - 委托设计(二)

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

  5. 解密jQuery事件核心 - 模拟事件(四)

    前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...

  6. 深入学习jQuery事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...

  7. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  8. jquery 事件冒泡的介绍以及如何阻止事件冒泡

    在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...

  9. jQuery源代码学习之九—jQuery事件模块

    jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...

  10. jQuery事件总结

    blur() 触发或绑定blur事件.$("input").blur(function(){ $("input").css("background-c ...

随机推荐

  1. PHP Mysqli 数据库连接

    ---恢复内容开始--- $connection=new mysqli($db_host,$db_user,$db_password,$db_name);if(!mysqli_connect_errn ...

  2. js 作用域

    js 作用域 js作用域链查找,子函数能取到父函数中定义的变量. 前段时间误写成如下形式: 这只是普通的函数调用,没有父子的关系,child()函数会在全局查找pi变量,没找到所以报错. 最近发现原来 ...

  3. MFC编程入门之二十二(常用控件:按钮控件Button、Radio Button和Check Box)

    本节继续讲解常用控件--按钮控件的使用. 按钮控件简介 按钮控件包括命令按钮(Button).单选按钮(Radio Button)和复选框(Check Box)等.命令按钮就是我们前面多次提到的侠义的 ...

  4. fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...

  5. 移动端html模版

    <!DOCTYPE html><html><head> <title>时钟</title> <meta charset="u ...

  6. yum源安装Mysql

    Mysql版本:5.7 进入mysql官网,复制下载链接 步骤: (1) wget  http://dev.mysql.com/get/mysql57-community-release-el6-9. ...

  7. 初始JavaScript

    本文是笔者在看廖雪峰老师的JavaScript教程时的总结 一.加载 JavaScript           1.直接在html语句中写入JavaScript语句           2.在html ...

  8. Python’s SQLAlchemy vs Other ORMs[转发 4]peewee

    peewee peewee is a small, expressive ORM. Compared to other ORMs, peewee focuses on the principal of ...

  9. Const关键字

    const const是一个C语言的关键字,它限定一个变量不允许被改变.使用const在一定程度上可以提高程序的安全性和可靠性.另外,在观看别人代码的时候,清晰理解const所起的作用,对理解对方的程 ...

  10. Jquery mobile 新手问题总汇

    1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...