click(),bind(),live()都是执行事件时使用的方法

1.click()单击事件方法:

$("a").click(function() {alert("hello");});

2.在bind()中,jQuery所有JavaScript事件对象,比如focus, mouseover, 和 resize,都是可以作为type参数传递进来的。

var message = "left";$("a").bind("click", function() {alert(message);return false;});

var message = "left";
$("a").bind("click", { msg: message }, function(e) {alert(e.data.msg);return false;
});var message = "right";
$("a").bind("contextmenu", { msg: message }, function(e) {alert(e.data.msg);return false;
});

bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。

.bind(eventType[, evnetData], Handler(eventObject))

其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如click,submit或自定义事件的名称,指定多个事 件类型时用空格分隔各个类型;eventData为Map类型,给出要传递给事件处理程序的数据,handler指定触发该事件时要执行的函 数,eventObject表示事件对象。

.bind()方法将事件处理程序handler附加到匹配元素集合中的每个元素的eventType事件上,如果需要,还可以向事件处理程序传递数据。

3.live()给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

如果元素是在调用bind()之后添加的,则不能够执行相应的事件。而使用live()方法使得在后边添加的元素也能够执行相应的事件,如下:

$("div.live").live("click", function() {alert("success");});

这样,当我们单击class为live的a标签时,如果此a标签是后边添加的,也能照常输出"success"。

live()方法的一个不足在于它不支持链式写法:

$("#test").children("a").live("mouseover", function() {alert("hello");
});上边这种写法并不会输出

使用delegate()可以写为:

$("#test").delegate("a", "mouseover", function() {alert("hello");});

$('body').delegate('a:not([target="_blank"])', 'click', function (e) {if ($(this).attr('href') == location.hash) {$(window).trigger('hashchange');}});

停止事件传播

$('a').bind('click',function(e){e.preventDefault()e.stopPropagation()}
)

if (e.stopPropagation) {e.stopPropagation();
}

e.cancelBubble = true;

e是事件触发后传进来的一堆参数,表示事件对象

转载于:https://www.cnblogs.com/zhuiluoyu/p/4721207.html

click() bind() live() delegate()区别 1相关推荐

  1. click() bind() live() delegate()区别

    click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择. 1.click()方法是我们经常使用的单击事件方法: <s ...

  2. [jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别?

    [jQuery] 谈一下Jquery中的bind(),live(),delegate(),on()的区别? 在我们深入了解这些方法之前,我们先来一段常见的的HTML,作为我们编写jquery示例方法使 ...

  3. JQuery的click、bind、delegate、off、unbind

    .click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要 ...

  4. jQuery 中bind(),live(),delegate(),on() 区别

    on()来改写通过 .bind(), .live(), .delegate()所注册的事件 /* The jQuery .bind(), .live(), and .delegate() method ...

  5. 关于事件委托的整理 ,另附bind,live,delegate,on区别

    随着DOM结构的复杂化和Ajax等动态脚本技术的运用导致如今的js界里最火热的一项技术应该是'事件委托(event delegation)'了,什么是事件委托呢?小七给你娓娓道来,说白了就是想给子元素 ...

  6. jQuery事件绑定on()、bind()与delegate() 方法详解

    啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是 ...

  7. 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...

  8. 【Groovy】闭包 Closure ( 闭包中调用 Groovy 脚本中的方法 | owner 与 delegate 区别 | 闭包中调用对象中的方法 )

    文章目录 一.闭包中调用 Groovy 脚本中的方法 二.owner 与 delegate 区别 三.闭包中调用 Groovy 对象中的方法 一.闭包中调用 Groovy 脚本中的方法 在 Groov ...

  9. click()和onclick()的区别

    click()和onclick()的区别: 1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触 ...

最新文章

  1. ArcEngine读取数据(数据访问)-转载
  2. Objective-C NS_OPTIONS 类型的枚举
  3. Oracle的left join中on和where的区别
  4. 【Android 系统开发】Android JNI 之 JNIEnv 解析
  5. 【emWin】例程十五:触摸校准实例——五点校准法
  6. 使用DbVisualizer导出DB2创建序列SQL
  7. md5碰撞Java_什么是导致MD5碰撞的最短字符串?
  8. Spring mvc实现ex导入导出
  9. 阿里云解决方案架构师徐翔:云上安全建设实战
  10. 东南亚金融服务商Pundi X正式加入 Achain 生态
  11. webgl漫反射公式物理原理猜测
  12. 递归算法应用实例------八皇后算法
  13. android cpu过高的原因,关于android 进程CPU占用率高的原因分析
  14. python基础教程_python基础教程百度网盘
  15. [DEMO] 互联网广告RTB机制简介
  16. Android调用摄像头--农民伯伯原文
  17. unicloud云开发---uniapp云开发(一)---服务空间创建以及部署一个云函数
  18. _ZN10tensorflow8internal21CheckOpMessageBuilder9NewStringEv and _ZTIN10tensorflow8OpKernelE
  19. 网关 Spring Cloud Zuul 自定义过滤器认证转换 Token
  20. jquery版选项卡

热门文章

  1. SpringActionscript3 片断
  2. linux声卡测试命令,linux添加声卡驱动使用命令行音频播放器的方法
  3. python 字符串的(乘法和in)(一分钟读懂)
  4. linux 日志 转存,如何记录linux终端下的操作日志(转)
  5. linux thinkphp 计划任务_ThinkPHP定时任务项目案例分析
  6. 手机python 3.8解释器_不看后悔!Python 3.8 新功能大揭秘
  7. excel中最常用的30个函数_94个Excel常用函数目录
  8. 【caffe】 Check failed: error == cudaSuccess (30 vs. 0) unknown error
  9. 你的脑容量(每日一练)
  10. ## CSP 201409-1相邻数对(C语言)(100分)