打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
jq和js中click 事件的几种方式总结和click事件的累加问题解决办法


 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);

});

 

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
事件
js动态添加事件的方法
JS 中的事件綁定、事件監聽、事件委託 | Poetry's Blog
addEventListener()与removeEventListener()
JS普通添加事件和事件绑定的区别 onclick addEventListener
JS FF浏览器attachEvent兼容方法
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服