一、JavaScript点击事件绑定方法1.1 HTML onclick事件属性1 <button onclick="clickMe(this)">click me</button> 1 function clickMe(this) { 2 alert("click me"); 3 } 1.2 JavaScript onclick事件1 <button id="button">click me</button> 1 document.getElementById("button").onclick=clickMe;
1.3 IE4+<script for>1 <button id="button1">click me</button> 1 <script for="button1" event="onclick"> 2 alert("click me"); 3 </script> 1.4 IE5/windows attachEvent()方法1 <button id="button2">click me</button> 1 document.getElementById("button2").attachEvent("onclick",clickMe);
1.5 W3C DOM addEventListener()方法1 <button id="button3">click me</button> 1 document.getElementById("button3").addEventListener("click",clickMe);
二、jQuery点击事件绑定方法2.1 click事件绑定2.1.1 将函数绑定到click事件语法: $(selector).click(function) 实例: 1 <button id="button2_1">click me</button> 1 $("#button2_1").click(function(e){ 2 alert(e); 3 }); 2.1.2 触发click事件语法: 1 $(selector).click()
2.2 dblclick()方法语法: $(selector).dblclick(function)
实例: 1 <button id="button2_7">click me</button> 1 $("#button2_7").dblclick(function(e) { 2 alert(e); 3 }); 2.3 bind()方法 unbind()方法2.3.1 bind()方法 将事件和函数绑定到元素(可添加一个或多个事件,可传递额外数据到函数)语法(添加一个事件): $(selector).bind(event,data,function)
语法(添加多个事件): $(selector).bind({event:function, event:function, ...}) 实例: 1 <button id="button2_2">click me</button> 1 $("#button2_2").bind("click", function(e) { 2 alert(e); 3 }); 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)
实例: 1 <button id="button2_3">click me</button> 1 $("#button2_3").live("click", function(e) { 2 alert(e); 3 }); 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)
实例: 1 <button id="button2_4">click me</button> 1 $("body").delegate("#button2_4", "click", function(e) { 2 alert(e); 3 }); 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)
实例: 1 <button id="button2_5">click me</button> 1 $("#button2_5").on("click", function(e) { 2 alert(e); 3 }); 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)
实例: 1 <button id="button2_6">click me</button> 1 $("#button2_6").one("click", function(e) { 2 alert(e); 3 }); 三、jQuery点击事件绑定方法比较
|
|