js(jquery)绑定点击事件

<button type="submit" id="test">test</button>

第一种

$("#test").click(function(event){

/* Act on the event */});

另外一种

document.getElementById(‘#foo‘).addEventListener(‘click‘, function() {

/* Act on the event */}, false);

第三种

html

<button type="submit" id="test" onclick="test()">test</button>

js

function test(){/* Act on the event */}

第四种

$(‘#test‘).bind(‘click‘, function() {/* Act on the event */ });

第五种

$( "#test" ).on( "click", function() {/* Act on the event*/ } );

第一种和另外一种的效果是一样,能够附加多个事件处理函数,并非仅仅有使用jquery才干做到。

第三种方法不推荐使用,原则上HTML代码仅仅能体现网页的结构。详细的行为应该使用javascript代码进行绑定。

除非页面上绑定事件的元素超过上万个,否则响应速度的时候就不必纠结了。仅仅做个事件绑定还是非常快的。我測试了一下,使用addEventListener绑定3000次,耗时3-4毫秒。

假设项目中统一使用jQuery的话。建议使用第一种做法,顺便还攻克了IE的不兼容问题。

时间: 2025-01-13 00:43:23

js(jquery)绑定点击事件的相关文章

jquery绑定点击事件动画BUG

jq中的animate()方法所实现的动画在绑定事件的同时会产生各种类型的BUG,在事件选择的时候我会尽可能的使用mouseenter和mouseleave来避免 mouseover和mouseout所产生的事件冒泡.如果单独使用个animate的话,在快速移入移出的时候,会重复触发事件,而产生队列 没有被清除,重复执行的bug,这个时候可以使用stop()来清除队列,停止上一步动画.如果遇到一个上下模式的动画类型,是用animate的时候就要注意避免在移动的时候,移出模块而产生反复移入移出的闪

jquery的on绑定点击事件执行两次的解决办法

js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的alert会执行两次,相应地数组删除也执行两次,具体代码如下(其中.tabDel是页面加载之后新生成的元素,故不能用普通的$(‘.tabDel).click(function(){})的方法添加点击事件): 上网找的解决方法大概有一下两种:1.在用 on 绑定 click 事件之前,对该事件解绑,也就是

js jquery插入元素后事件会被注销

  js jquery插入元素后事件会被注销 document.body.innerHTML += <div id="dd">test</div>  //这个会注销事件 $(document.body).append(str);//使用这个 也可以绑定事件. 例子: //快捷键双击 $(".app_shortcut_item").dblclick(function () { var id = $(this).attr("id&quo

ListView绑定点击事件

代码如下: cList.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick( AdapterView<?> listView, //listView本身 View itemView, //listView的子View int p1, //位置参数 long p2 //位置参数 ) { //TODO } } ListView绑定点击事件,布布扣,bubuko.com

js触发按钮点击事件

js触发按钮点击事件 博客分类: javascript 模拟JS触发按钮点击功能 Html代码   <html> <head> <title>usually function</title> </head> <script> function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); document.getElement

js中的点击事件(click)的实现方式

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js中的点击事件(click)的实现方式</title> </head> <body> <!-- 第三种方式--> <button id="btn" onclick="threeFn()

JS同时绑定单双击事件

这两天工作上遇到这种情况,需要在tree组件上的每个节点绑定单双击事件,怎么实现呢?借助js的定时器来实现这个功能吧,思路是这样的:给定时器设置一个时间,如果在该时间段内用户点击一次则触发单机事件,大于1的话就执行双击事件.废话不多说,这里我们用一个示例来说明: 首先要引入jQuery,这里用jquery来为测试元素绑定事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

微信小程序学习总结(2)------- 之for循环,绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习. 先说一下此次项目本人体会较深的几个关键点:微信地图.用户静默授权.用户弹窗授权.微信充值等等. 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:  1. 想必大家的都知道wx:for,如下就不用我啰嗦了: <view class="myNew" wx:for="{{list}}">{{item.title}}<view

fastclick.js --- 解决移动端点击事件300ms延时

Fast Click 是一个简单.易用的库,专为消除移动端浏览器从物理触摸到触发点击事件之间的300ms延时. 为什么会存在延迟呢? 从你触摸按钮到触发点击事件,移动端浏览器会等待接近300ms,原因是浏览器会等待以确定你是否执行双击事件 兼容性 Mobile Safari on iOS 3 and upwards Chrome on iOS 5 and upwards Chrome on Android (ICS) Opera Mobile 11.5 and upwards Android B