JavaScript学习Day13笔记

Day13笔记

一、JavaScript事件

事件三要素

• 事件源

  ​ 获取事件源：getElement、querySelector

• 绑定事件（事件类型）

  ​ 1、鼠标事件

  ​ 2、键盘事件

  ​ 3、表单事件

  ​ 4、编辑事件

  ​ 5、页面相关事件

• 事件处理函数（匿名函数）

事件调用方式

• 属性事件

  <标签 事件="事件处理函数调用语句" />

• 事件绑定

  nodeEle.事件名 = function(){}
  // 当同一个节点绑定同一种事件时，前面的事件处理函数会被覆盖，只执行最后一种。

• 事件监听

 nodeEle.addEventListener('事件'，function(){},boolean)
 // 事件不需要加on
 // 当同一个节点监听同一种事件时，每一种事件处理函数都会执行。
 // 当boolean  =>  true时，事件处理函数冒泡执行（从子节点开始向上执行）。
 // 当boolean  =>  false（默认值）时，事件处理函数捕获执行（从父节点开始向下执行）。
 // event.stopPropagation  =>  停止冒泡/捕捉，但当前节点事件处理函数会执行，下一个节点不执行。

二、鼠标事件

事件	说明
onclick	鼠标单击事件
ondbclick	鼠标双击事件
onmouseover	鼠标移入事件（hover）
onmouseout	鼠标移出事件
onmousemove	鼠标移动事件
onmousesedown	鼠标按下事件
onmouseup	鼠标松开事件

三、表单事件

事件	说明
onsubmit	表单提交时触发事件 οnsubmit="return boolean" 当boolean == true时，会执行action； 当boolean == false时，不会执行action
onfocus	获取焦点时触发事件
onblur	失去焦点时触发事件
onchange	当元素失去焦点并且内容发生改变时触发此事件
onresst	当表单重置时触发事件

// 阻止表单action提交。
event.preventDefault()