1:常见的三种绑定click事件:

第一种:$("#click").click(function(){

      alert("Hello World  click");

  });

第二种:$('#clickon').on('click', function(){

    alert("Hello World  on");

    });

第三种:$('#clickbind').bind("click", function(){

    alert("Hello World  bind");

    });

如下代码第一种和第二种和第三种在页面会先后弹出1和2 后者不会覆盖前面的。

<input type="button" id="btn">

$("#btn").click(function(){alert("1");})

$("#btn").click(function(){alert("2");})

想要只执行最近的点击。之前的click事件先解绑就会只弹出2   用unbind或者off

$("#btn").on("click",function(){alert("1");})

$("#btn").unbind("click").click(function(){alert("2");});

$("#btn").unbind("click").bind("click",function(){alert("2");});

$("#btn").off("click").click(function(){alert("2");});

$("#btn").off("click").on("click",function(){alert("2");});

2:js中点击事件

A:onclick是会覆盖。只弹出2

btn.onclick = function() { 
alert(1);
}

btn.onclick = function() { 
alert(2);
}

B:element.addEventListener(type,listener,useCapture); type去掉事件前边的“on”,比如“onclick”要写成“click”,“onmouseover”要写成momouseoveruse.Capture只能是true和false:true,采用capture(捕获)模式;false,采用bubbling(冒泡)模式。如无特殊要求,一般是false。

addEventListener不会覆盖。先弹出1在弹出2

btn.addEventListener("click",function(){

alert(1);

},false);

btn.addEventListener("click",function(){

alert(2);

},false);

c:element.attachEvent(type,listener);  type事件名称,注意加上事件前边的“on”,比如“onclick”和“onmouseover” IE8.0及其以下版本支持该方法

下面会先后弹出2和1

btn.attachEvent("onclick",function(){

  alert(1);

});

btn.attachEvent("onclick",function(){

  alert(2);

});

jq和js中click 事件的几种方式总结和click事件的累加问题解决办法的更多相关文章

  1. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  2. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  3. js中声明Number的五种方式

    转载自:http://www.jb51.net/article/34191.htm <!DOCTYPE html> <html> <head> <meta c ...

  4. js中面向对象(创建对象的几种方式)

    1.面向对象编程(OOP)的特点: 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有的对象下继承出新的对象 多态:多对象的不同形态 一.创建对象的几种方式 javascript 创建对象 ...

  5. js中实现继承的几种方式

    首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...

  6. js中检测数据类型的几种方式

    1.typeof 一元运算符,用来检测数据类型.只可以检测number,string,boolean,object,function,undefined. 对于基本数据类型是没有问题的,但是遇到引用数 ...

  7. JS中访问对象的两种方式区别

    可以使用下面两种方式访问对象的属性和方法 1.对象名.属性名 对象名.方法名() 2.对象名["属性名"] 对象名["方法名"]() var obj = { n ...

  8. js中定义变量的三种方式const,val,let 的区别

    js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始 ...

  9. JS中检测数据类型的几种方式及优缺点【转】

    1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string&quo ...

随机推荐

  1. 【bzoj3436】小K的农场 差分约束系统+最长路-Spfa

    原文地址:http://www.cnblogs.com/GXZlegend/p/6801470.html 题目描述 背景 小K是个特么喜欢玩MC的孩纸... 描述 小K在MC里面建立很多很多的农场,总 ...

  2. LeetCode -- Implement Stacks using Queue

    Question: Implement the following operations of a queue using stacks. push(x) -- Push element x to t ...

  3. BZOJ3143 [Hnoi2013]游走 【高斯消元】

    题目 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点,获得等于这条边的编 ...

  4. java 复习整理(二 数据类型和几种变量)

    源文件声明规则 当在一个源文件中定义多个类,并且还有import语句和package语句时,要特别注意这些规则. 一个源文件中只能有一个public类 一个源文件可以有多个非public类 源文件的名 ...

  5. 汕头市队赛 SRM 07 A 你的麻将会排序吗

    A 你的麻将会排序吗 SRM 07 曾经有过一些沉迷日麻的小孩纸,后来呀,他们都去寻找自己的世界了. kpm也是这样的小孩纸.他想有一只自动整理牌的机器.当麻将以给定的顺序进入机器时,通过机器的运转, ...

  6. Kubernetes仓库搭建

    #生成证书#/etc/pki/tls/openssl.cnf [ v3_ca ]下添加serviceIPsubjectAltName = 169.169.0.11#创建证书169.169.0.11为s ...

  7. Ubuntu配置网络遇到的一些问题

    Ubuntu配置网络遇到的一些问题 在配置Ubuntu网络时,曾遇到了一些问题.查找了一些博客,所幸都解决了.记录一下,以便日后查阅. 设置DNS sudo vim /etc/resolv.conf ...

  8. hdu 3371(启发式合并的最小生成树)

    Connect the Cities Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  9. 携程ELK

    http://www.360doc.com/content/15/1203/00/26186435_517522477.shtml

  10. 计蒜客 28449.算个欧拉函数给大家助助兴-大数的因子个数 (HDU5649.DZY Loves Sorting) ( ACM训练联盟周赛 G)

    ACM训练联盟周赛 这一场有几个数据结构的题,但是自己太菜,不会树套树,带插入的区间第K小-替罪羊套函数式线段树, 先立个flag,BZOJ3065: 带插入区间K小值 计蒜客 Zeratul与Xor ...