一、JavaScript点击事件绑定方法

1.1 HTML onclick事件属性

 <button onclick="clickMe(this)">click me</button>
 function clickMe(this) {
     alert("click me");
 }

1.2 JavaScript onclick事件

 <button id="button">click me</button>
 document.getElementById("button").onclick=clickMe;

1.3 IE4+<script for>

 <button id="button1">click me</button>
 <script for="button1" event="onclick">
     alert("click me");
 </script>

1.4 IE5/windows attachEvent()方法

 <button id="button2">click me</button>
 document.getElementById("button2").attachEvent("onclick",clickMe);

1.5 W3C DOM addEventListener()方法

 <button id="button3">click me</button>
 document.getElementById("button3").addEventListener("click",clickMe);

二、jQuery点击事件绑定方法

2.1 click事件绑定

2.1.1 将函数绑定到click事件

语法:

$(selector).click(function)

实例:

 <button id="button2_1">click me</button>
 $("#button2_1").click(function(e){
     alert(e);
 });
2.1.2 触发click事件

语法:

 $(selector).click()

2.2 dblclick()方法

语法:

$(selector).dblclick(function)

实例:

 <button id="button2_7">click me</button>
 $("#button2_7").dblclick(function(e) {
     alert(e);
 });

2.3 bind()方法 unbind()方法

2.3.1 bind()方法 将事件和函数绑定到元素(可添加一个或多个事件,可传递额外数据到函数)

语法(添加一个事件):

$(selector).bind(event,data,function)

语法(添加多个事件):

$(selector).bind({event:function, event:function, ...})

实例:

 <button id="button2_2">click me</button>
 $("#button2_2").bind("click", function(e) {
     alert(e);
 });
2.3.2 unbind()方法 取消绑定元素的事件处理程序和函数(可添加一个或多个事件,可传递额外数据到函数)

语法(取消绑定一个事件):

$(selector).unbind(event,function)

语法(取消绑定多个事件):

$(selector).unbind(eventObj)

实例:

1 $("#button2_2").unbind();

2.4 live()方法 die()方法

2.4.1 live()方法 为被选元素附加一个或多个事件处理程序

语法:

$(selector).live(event,data,function)

实例:

 <button id="button2_3">click me</button>
 $("#button2_3").live("click", function(e) {
     alert(e);
 });
2.4.2 die()方法 移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序

语法:

$(selector).die(event,function)

实例:

1 $("#button2_3").die();

2.5 delegate()方法 undelegate()方法

2.5.1 delegate()方法 为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序

语法:

$(selector).delegate(childSelector,event,data,function)

实例:

 <button id="button2_4">click me</button>
 $("body").delegate("#button2_4", "click", function(e) {
     alert(e);
 });
2.5.2 undelegate()方法 为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序

语法:

$(selector).undelegate(selector,event,function)

实例:

1 $("#button2_4").undelegate();

2.6 on()方法 off()方法

2.6.1 on()方法 在被选元素及子元素上添加一个或多个事件处理程序

语法:

$(selector).on(event,childSelector,data,function,map)

实例:

 <button id="button2_5">click me</button>
 $("#button2_5").on("click", function(e) {
     alert(e);
 });
2.6.2 off()方法 通常用于移除通过 on() 方法添加的事件处理程序

语法:

$(selector).off(event,selector,function(eventObj),map)

实例:

1 $("#button2_5").off("click");

2.7 one()方法 每个元素只能运行一次事件处理器函数

2.7.1 one()方法 为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数

语法:

$(selector).one(event,data,function)

实例:

 <button id="button2_6">click me</button>
 $("#button2_6").one("click", function(e) {
     alert(e);
 });

三、jQuery点击事件绑定方法比较

jQuery点击事件方法

适用jQuery版本 是否支持未来新添加元素的事件设置

click

适用所有版本

dblclick

适用所有版本

bind

适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。
live
jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替。

delegate

jquery1.4.2及其以上版本。

on

jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式。
one

适用jQuery1.0-jQuery3.1版本

 

js、jq事件绑定方式总结——以click事件为例的更多相关文章

  1. 移动端和pc端事件绑定方式以及取消浏览器默认样式和取消冒泡

    ### 两种绑定方式 (DOM0)1.obj.onclick = fn; (DOM2)2. ie:obj.attachEvent(事件名称,事件函数); 1.没有捕获(非标准的ie 标准的ie底下有 ...

  2. jQuery事件绑定方式(转)

    bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多 ...

  3. jQuery三种事件绑定方式.bind(),.live(),.delegate()

    .bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...

  4. jquery 事件委托三种事件绑定方式.bind(),.live(),.delegate()

    http://www.ituring.com.cn/article/467# http://www.cnblogs.com/lvdabao/archive/2013/08/30/3290603.htm ...

  5. JS Event事件流(冒泡机制、捕获机制、事件绑定)

    1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...

  6. click事件的累加绑定,绑定一次点击事件,执行多次

    最近做项目为一个添加按钮绑定点击事件,很简单的一个事情,于是我按照通常做法找到元素,使用jquery的on()方法为元素绑定了点击事件,点击同时发送请求.完成后看效果,第一次点击没有问题.再一次点击后 ...

  7. 关于移动端click事件绑定的一个细节

    click是最常见的点击事件,但是对于移动终端,比如手机,一般都是以touch事件代替的,而click事件在手机也是生效的,只是会有1-2秒左右的延迟,那么当你想要用click而非touch事件的时候 ...

  8. Jquery中的事件绑定$(&amp;quot;#btn&amp;quot;).bind(&amp;quot;click&amp;quot;,function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  9. javascript之事件绑定

    曾经写过一篇随笔,attachEvent和addEventListener,跟本文内容有很多相似之处 本文链接:javascript之事件绑定 1.原始写法 <div onclick=" ...

随机推荐

  1. 一次dell R420 电源故障引发的“血案”

    说“血案”有写夸张了,其实是也就熬了一夜的通宵,做运维的伤不起啊,作为一名运维工程师,像这种服务器突发故障半夜起床的情况属于家常便饭,见怪不怪了,开始说正事: 前几天半夜12点左右,收到服务器宕机的消 ...

  2. python操作系统环境变量

    获取整个系统变量的方法是os.environ,这是一个os的class类型,使用的时候可以转换为字典类型 environ_value = dict(os.environ) 这样就可以看所有的key,e ...

  3. [iOS OpenCV错误解决]

    (编译使用O-C会出现错误:<list> not found) (未添加系统库会出现的错误:undefined symbols for architecture armv7) iOS工程调 ...

  4. yum install nginx

    先安装nginx的yum源 http://nginx.org/en/linux_packages.html#stable 找到链接,安装: rpm -ivh http://nginx.org/pack ...

  5. 安卓开发_浅谈Service

    一.Service(服务) Service是Android程序中四大基础组件之一,它和Activity一样都是Context的子类,区别在于它没有UI界面,是在后台运行的组件. public abst ...

  6. Struts2应用的开发流程

    Struts2的开发流程 为了能够在eclipse中使用Struts2在进行开发时,需要根据需要导入一些有关的jar包: 在官网下载相关的压缩包,这里下载了两个:struts-2.3.30-all.z ...

  7. OAF_VO系列3 - Binding Style绑定方式

    在OAF VO开发中,Binding Style主要用于对VO的where clause做动态传值,总共有三种方式 1.       Oracle Named 2.       Oracle Posi ...

  8. frequentism-and-bayesianism-chs-iv

    frequentism-and-bayesianism-chs-iv 频率主义与贝叶斯主义 IV:Python的贝叶斯工具   这个notebook出自Pythonic Perambulations的 ...

  9. IPC——数据报套接字通信

    Linux进程间通信——使用数据报套接字 前一篇文章,Linux进程间通信——使用流套接字介绍了一些有关socket(套接字)的一些基本内容,并讲解了流套接字的使用,这篇文章将会给大家讲讲,数据报套接 ...

  10. MySQL5.7表空间加密

    MySQL5.7开始支持表空间加密了,增强了MySQL的数据文件的安全性,这是一个很不错的一个功能,这个特性默认是没有启用的,要使用这个功能要安装插件keyring_file. 下面就来看看怎么安装, ...