jQuery事件绑定的四种方法
jQuery中提供了四种绑定事件的方法,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off:
一、on()方法(首选方法)
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
参数:
event:必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件
data:可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
function:可选。规定当事件发生时运行的函数。
map:规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
语法:$(selector).on(event,childSelector,data,function,map)
举例:给p元素添加单击事件
$("p").on("click",function(){ alert("The paragraph was clicked."); });
二、bind()方法
bind()作用就是在选择到的元素上绑定特定事件类型的监听函数,
参数:
type:必需。事件类型,如click、change、mouseover等;
data:可选。传入监听函数的参数,通过event.data取到。可选;
function:必需。规定当事件发生时运行的函数(监听函数),可传入event对象,这里的event是jQuery封装的event对象,与原生的event对象有区别,使用时需要注意。
map:规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数
语法:$(selector).bind(event,data,function,map)
举例:给<p>添加一个单击事件
$("p").bind("click",function(){ alert("单击p元素"); });
三、live()方法
live(),在版本 1.9 中被移除。请使用on()方法代替。添加一个或多个事件处理程序到当前或未来的被选元素。(还是总结在此)
参数:
event:必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data:可选。传递到该函数的额外参数
function:必需。当事件发生时,运行的函数
语法:$(selector).live(event,data,function)
举例:当点击按钮时,隐藏或显示 <p> 元素:
$("button").live("click",function(){ $("p").slideToggle(); });
四、delegate()方法
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
参数:
childSelector:必需。规定要添加事件处理程序的一个或多个子元素。
event:必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data:可选。传递到该函数的额外参数
function:必需。当事件发生时,运行的函数
语法:$(selector).delegate(childSelector,event,data,function)
举例:当单击 <div> 元素内部的 <p> 元素时,改变所有 <p> 元素的背景颜色:
$("div").delegate("p","click",function(){ $("p").css("background-color","pink"); });
jQuery事件绑定的四种方法的更多相关文章
- Jquery调用webService的四种方法 转载-记录
我总结几个关键点 1. 服务必须声明为ScriptService(否则会出现下面的问题) 2.服务的方法不需要任何更改,保持原状 3.客户端用jquery的.ajax方法来调用 3.1 type必须是 ...
- Jquery调用webService的四种方法
1.编写4种WebService方法 [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(Conf ...
- jquery取消事件冒泡的三种方法展示
jquery取消事件冒泡的三种方法展示 html代码 <!doctype html> <html> <head> <meta charset="ut ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- [DOM Event Learning] Section 1 DOM Event 处理器绑定的几种方法
[DOM Event Learning] Section 1 DOM Event处理器绑定的几种方法 网页中经常需要处理各种事件,通常的做法是绑定listener对事件进行监听,当事件发生后进行一 ...
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
- JS去除数组中重复值的四种方法
JS去除数组中重复值的四种方法 1 /// <summary> o[this[i]] = ""; } } newArr.p ...
- Javascript事件绑定的几种方式
Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...
- 解析Xml四种方法
关键字:Java解析xml.解析xml四种方法.DOM.SAX.JDOM.DOM4j.XPath [引言] 目前在Java中用于解析XML的技术很多,主流的有DOM.SAX.JDOM.DOM4j,下文 ...
随机推荐
- Android开发 Html工具类详解
前言 在一些需求富文本显示或者编辑的开发情况下,数据都是用html的格式来保存文本信息的.而google是有提供解析html的工具类那就是Html.有了Html可以让TextView也支持富文本(其实 ...
- 【五校联考5day1】登山
题目 描述 题目大意 给你一个n∗nn*nn∗n的网格图.从(0,0)(0,0)(0,0)开始,每次只可以向右或向上移动一格,并且不能越过对角线(即不能为x<yx<yx<y). 网格 ...
- thinkphp 命名范围
在应用开发过程中,使用最多的操作还是数据查询操作,凭借ThinkPHP的连贯操作的特性,可以使得查询操作变得更优雅和清晰,命名范围功能则是给模型操作定义了一系列的封装,让你更方便的操作数据. 命名范围 ...
- Nginx 和 Gunicorn 部署 Django项目
目录 Nginx 和 Gunicorn 部署 Django项目 配置Nginx 安装配置Gunicorn 通过命令行直接启动 Gunicorn 与 uwsgi 的区别,用哪个好呢 Gunicorn u ...
- 区间dp——cf1025D二叉搜索树的中序遍历好题!
这题帮我复习了一下BST的中序遍历.. 因为给定的数组是递增的,那么BST的中序遍历一定是1 2 3 4 5 6 7 8 9 ... n 即[l,r]为左子树,那么根节点就是r+1,反之根节点就是l- ...
- JAVA 类加载机制学习笔记
JAVA 类生命周期 如上图所示,Java类的生命周期如图所示,分别为加载.验证.准备.解析.初始化.使用.卸载.其中验证.准备.解析这三个步骤统称为链接. 加载:JVM根据全限定名来获取一段二进制字 ...
- php链表笔记:单链表反转
<?php /** * Created by PhpStorm. * User: huizhou * Date: 2018/12/1 * Time: 11:41 */ /** * 1.链表的反转 ...
- poj 2774 字符串哈希求最长公共子串
Long Long Message #include <iostream> #include <algorithm> #include <cstdio> #incl ...
- Jdk8 Hashmap ConcurrentHashMap
JDK1.8 Hashmap JDK1.8 ConcurrentHashMap 不采用segment而采用 synchronized (f) f = table[i]; 减小锁的力度 设计了MOVE ...
- System.Web.Mvc.ViewEngineResult.cs
ylbtech-System.Web.Mvc.ViewEngineResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, P ...