js、jq事件绑定⽅式总结——以click事件为例⼀、JavaScript点击事件绑定⽅法
1.1 HTML onclick事件属性
1<button onclick="clickMe(this)">click me</button>
1function clickMe(this) {
2    alert("click me");
3 }
1.2 JavaScript onclick事件
1<button id="button">click me</button>
ElementById("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>
ElementById("button2").attachEvent("onclick",clickMe);
1.5 W3C DOM addEventListener()⽅法
1<button id="button3">click me</button>
ElementById("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()⽅法通常⽤于移除通过⽅法添加的事件处理程序
语法：
$(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 });js获取子元素
三、jQuery点击事件绑定⽅法⽐较
jQuery点击事件⽅法适⽤jQuery版本
是否⽀持未来新添加
元素的事件设置
click
适⽤所有版本否
dblclick适⽤所有版本
否bind适⽤所有版本，但是根据官⽹解释，⾃从jquery1.7版本以后bind()函数推荐⽤on()来代替。否live jquery1.9版本以下⽀持，jquery1.9及其以上版本删除了此⽅法，jquery1.9以上版本⽤on()⽅法来代替。
是delegate jque ry1.4.2及其以上版本。是on jquery1.7及其以上版本；jquery1.7版本出现之后⽤于替代
bind()，live()绑定事件⽅式。是one适⽤jQuery1.0-jQuery3.1版本

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。