jQuery 绑定事件总结

时间:2022-09-20 14:15:45

目前已知有:

$("..").bind("事件名",fn);

$("parent").on("事件名","selector",fn);

$("..").one("事件名",fn);

DOM:addEvenetlistener("事件名",fn);

removeEvenetListener("事件名",函数名);

强调:要想移除事件监听,必须使用有名函数
绑定事件监听,如果添加事件时使用匿名函数
则不可能移除.

$("select").live("事件名",fn);

$(document).delegate("select","事件",fn);

$("selector").die("事件名");

其中 后三种 live、delegate、die,由于其本身的性能问题,已废弃,不再讨论,尽讨论前三种:

1:bind

  bind通常都是是每个子元素都添加事件监听,且仅对现有元素添加绑定,无法自动给动态生成元素添加绑定

a:

$("...").bind("事件名",fn);

$("...").bind("事件名1 事件名2 ",fn);

b:事件对象
$("..").bind("事件名",function(e){

e==事件对象

e.preventDefault();

});

$("..").unbind("事件名",函数名); 解除绑定

$("..").unbind(); 移动该元素上所有事件绑定

2:on

on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

off()函数主要用于解除由on()函数绑定的事件处理函数。

3:one

$("..").one("事件名",fn);绑定事件,仅触发一次后自动触绑定,只能对当前页面上己存在的元素添加事件绑定.动态生成元素无法自动绑定事件.

实现动态绑定的方法:

解决1:利用冒泡,将事件绑定己存在父元素一次

function(e){
var target = e.target;
//target 触发事件:元素
}

解决2:事件代理

$("parent").delegate("subselector","事件名",fn);

fn-->this--->代替 e.target

解除

$("parent").undelegate("subselector","事件名");

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

  1. jQuery绑定事件-多种方式实现

    jQuery绑定事件-多种方式实现: <html> <head> <meta charset="utf-8" /> <script src ...

  2. jQuery绑定事件的四種方式

    这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...

  3. jQuery绑定事件的on&lpar;&rpar;

    jQuery绑定事件 语法:$(selector).on(event,childselector,function(){}); 可以为自身的加事件(一个或多个)  也可以为其子元素加事件(一个或多个) ...

  4. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  5. Jquery绑定事件及动画效果

    Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...

  6. 关于jquery绑定事件执行两次

    经常会出现jquery绑定事件执行两次的情况,如: $("a[tag=slide]").click(function () { alert(1); $(this).parent() ...

  7. jquery绑定事件时如何向事件函数里传参数

    jquery绑定事件时如何向事件函数里传参数 jquery绑定事件时如何向事件函数里传参数 举例子说明: 步骤1: var button=$('<button type="button ...

  8. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  9. jQuery绑定事件的四种方式

      jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...

  10. jquery 绑定事件的方法

    jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) ...

随机推荐

  1. 使用ajaxfileupload插件进行Ajax Post 异步提交多个文件

    前台代码: <div> <div> <img src="images/pro_upload.png" onclick="javascript ...

  2. 能不能用javascript实现素数求和问题呢?

    先自己试试吧 好吧,下面这段代码用了别人所说的最笨的方法,身为小白的我只能呵呵.待会再尝试用其他算法. <!DOCTYPE html> <html lang="en&quo ...

  3. 访问修饰符&lpar;access modifier&rpar;。

    1)public(公共的):被 public所修饰的属性和方法可以被有类访问. 所修饰的属性和方法可以被有类访问. 2)protected (受保护的):被protected所修饰的属性和方法可以在类 ...

  4. php传引用和全局变量

    原文:php传引用和全局变量 <?php /* * 函数内部改变变量的值两种方法 */ $a = 10; /* *方法一 :函数参数传引用 */ function methodOne(& ...

  5. 使用 ASP&period;NET MVC 4&comma; EF&comma; Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑

    翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑 Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案 ...

  6. BZOJ&lowbar;1827&lowbar;&lbrack;Usaco2010 Mar&rsqb;gather 奶牛大集会&lowbar;树形DP

    BZOJ_1827_[Usaco2010 Mar]gather 奶牛大集会_树形DP 题意:Bessie正在计划一年一度的奶牛大集会,来自全国各地的奶牛将来参加这一次集会.当然,她会选择最方便的地点来 ...

  7. Python爬虫实例:爬取猫眼电影——破解字体反爬

    字体反爬 字体反爬也就是自定义字体反爬,通过调用自定义的字体文件来渲染网页中的文字,而网页中的文字不再是文字,而是相应的字体编码,通过复制或者简单的采集是无法采集到编码后的文字内容的. 现在貌似不少网 ...

  8. 图论之最短路径floyd算法

    Floyd算法是图论中经典的多源最短路径算法,即求任意两点之间的最短路径. 它可采用动态规划思想,因为它满足最优子结构性质,即最短路径序列的子序列也是最短路径. 举例说明最优子结构性质,上图中1号到5 ...

  9. mysql 中的内置函数

    一.字符串函数 select concat(name,"age is",age) from users;  insert(str,x,y,insert)//将字符串x位置开始y个位 ...

  10. &lbrack;python&rsqb;通过uiautomator实现返回当前程序包名

    # -*- coding: utf-8 -*- from uiautomator import device as d def getCurrentPackageName(): info = d.in ...