1.事件绑定
DOM中事件绑定方式常用:
元素.addEventListener("事件名", 事件处理函数对象)
元素.removeEventListener("事件名", 原事件处理函数对象)
jQuery:
用.on(),代替了.addEventListener(): $元素.on("事件名",处理函数对象)
用.off(),代替了.removeEventListener(): $元素.off("事件名", 原处理函数对象)
具体jQuery事件可查看jQuery中文文档:
以下列出常用的事件:
change | 下拉列表选中项改变 |
click | 单击 |
dblclick | 双击 |
blur |
失去焦点 |
focus | 获得焦点 |
keydown | 键盘按键按下 |
keyup | 键盘按键抬起 |
mousedown | 鼠标按键按下 |
mouseenter | 鼠标进入(jq) |
mouseleave | 鼠标移出(jq) |
mousemove | 鼠标移动 |
mouseout | 鼠标移出(dom) |
mouseover | 鼠标进入(dom) |
mouseup | 鼠标按键抬起 |
resize | 窗口大小改变 |
scroll | 网页滚动 |
load | 加载完成 |
2.事件委托:
jq中对DOM的事件委托进行了简化
$父元素.on("事件名","选择器",function( ){ //this代替e.target来获得目标元素 var $this=$(this) }) // on()中的选择器是相对于父元素的子选择器
不用自己写if判断。改为在.on()中添加第二个选择器参数,由.on()函数自动用我们提供的选择器作为判断条件,筛选进入事件处理函数的元素对象。只有符合选择器要求的元素才能进入.on()内执行代码,如果不符合选择器要求的元素,不能进入.on执行操作。
这样,就省略了DOM操作中的通过判断e.target.nodeName="标签名"来进行事件委托的步骤。