事件绑定
1、简单事件绑定
$("button").click(function () {})//可重复绑定，不会被层叠
2、bind()：不推荐使用
$("button").bind("click mouseenter",function () {})//可通过绑定多个事件，但是事件源必须存在文档中
3、delegate()
$(".parentBox").delegate("p", "click", function(){}) //父元素下绑定子元素事件 $("button").delegate("click",function () {})//支持动态创建元素
4、on()
$(.parentBox).on( "click",“span”, function() {}) //父元素下绑定子元素事件 $(selector).on(events，[selector]，[data],handler) //data是传递给函数的数据，event.data可调用 $("button").on("click",function () {})//支持动态创建元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; border: 1px solid #ccc; } </style> <script src="jquery-1.11.1.js"></script> <script> $(function () { $("div").on("click", "button:eq(0)", function () { alert("11"); }); $("button:eq(1)").on("click", function () { alert(22); }); }); </script> </head> <body> <div> <button>点击1</button> <button>点击2</button> </div> </body> </html>
事件解绑
1、unbind()
$(selector).unbind(); //解绑所有的事件 $(selector).unbind(“click”); //解绑指定的事件
2、undelegate()
$( selector ).undelegate(); //解绑所有的delegate事件 $( selector).undelegate( “click” ); //解绑所有的click事件
3、off()
$(selector).off();// 解绑匹配元素的所有事件 $(selector).off(“click”);// 解绑匹配元素的所有click事件 $(selector).off( “click”, “**” ); // 解绑所有代理的click事件，元素本身的事件不会被解绑
事件触发
1、简单事件触发
$(selector).click(); //触发 click事件
2、trigger()：触发浏览器行为
$(selector).trigger(“click”);
3、triggerHandler()：不触发浏览器行为
$(selector).triggerHandler(“focus”);//不会触发默认行为，只会执行函数体的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.11.1.js"></script> <script> //input注册的focus事件虽然被处罚，但是光标并没有进入标签内 $(function () { $("input").focus(function () { alert("input注册的focus被触发") }); $("button").click(function () { $("input").triggerHandler("focus"); }); }); </script> </head> <body> <button>手动触发事件</button> <input type="text"> </body> </html>
事件对象
event.data //传递给事件处理程序的额外数据 event.currentTarget //等同于this，当前DOM对象 event.pageX //鼠标相对于文档左部边缘的位置 event.target //触发事件源，不一定===this event.stopPropagation()； //阻止事件冒泡 event.preventDefault(); //阻止默认行为 event.type //事件类型：click，dbclick… event.which //鼠标的按键类型：左1 中2 右3 event.keyCode //键盘按键代码