jQuery从入门到熟练(21)

jQuery的事件委托API
设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)移除事件委托: $(parentSelector).undelegate(eventName)
<ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li></ul><li>22222</li><br><button>添加新的li</button><button>删除ul上的事件委托的监听器</button><script src="js/jquery-1.10.1.js"></script><script> // 设置事件委托 $("ul").delegate("li", "click", function () { // console.log(this) this.style.background = "red" }) $("#btn1").click(function () { $("ul").append("<li>新增的li....</li>") }) $("#btn2").click(function () { // 移除事件委托 $("ul").undelegate("click") })</script>
事件坐标event.offsetX/event.offsetY: 原点是当前元素左上角（相对于事件元素左上角）event.clientX/event.clientY: 原点是窗口左上角（相对于视口的左上角）event.pageX/event.pageY: 原点是页面左上角（相对于页面的左上角）