事件的基本了解

事件：

事件驱动三要素：

• 事件源：触发事件的那个元素
• 事件类型：被js监测到的行为
• 事件处理函数：当事件发生时要进行的处理（事件句柄 || 监听器）

绑定事件监听器

// 不推荐使用
<ele onclick = "fn()">
// 同一元素只能绑定一个相同的事件，后者覆盖前者，属于标准DOM0级事件监听
ele.onclick = function(){}
ele.addEventListener("type",function(){},boolean)
// 示例 (boolean值可不填)
btn.addEventListener("click",function(){
    console.log(111);
})

删除事件监听

ele.onclick = null;
ele.removeEventListener("type",fn,boolean);

事件分类

• window 事件
  1. 加载事件：onload
  2. 滚动事件：onscroll
  3. 窗口尺寸改变事件：onresize
• 鼠标事件
  1. onclick
  2. ondbclick
  3. onmouseenter onmouseleave
  4. onmousemove
  5. onmouseover onmouseout （会冒泡）
• 键盘事件
  1. onkeydown
  2. onkeyup
  3. onkeypress

事件流

事件在页面上的传播顺序

网景 IE 持相反意见

网景：事件是从外向内触发的 （捕获型事件流）

IE：事件是从里往外触发传播的（冒泡型事件流）

标准：在W3C组织下，js同时支持了冒泡和捕获，DOM事件流

// DOM0级绑定方式（冒泡）
ele.onclick = function(){}
// DOM2级绑定方式 boolean值为true：捕获，反之为冒泡
ele.addEventListener("type",fn,boolean)

事件对象 event

脚本引擎在处理js代码时，会自动给事件处理函数提供一个对象，就是event，他记录了关于该事件的相关信息

获取event

1. 现代浏览器 IE9+ 事件处理函数 event
2. 低版本 IE window.event

**处理兼容：let e = event || window.event **

事件目标

通过event.target 就可以获取触发事件的目标元素

event.target 和 this 的区别：

this：绑定该事件的标签元素

键盘事件

• event.keyCode ASCLL码，键值码
• event.key 按键名
• shiftKey altKey …返货布尔值

键盘事件只能绑定在可输入元素身上，和document上

鼠标事件

//鼠标相对浏览器显示区域的坐标‘
event.clientX,event.clientY
// 鼠标相对于页面的坐标
event.pageX,event.pageY
// 鼠标相对屏幕坐标
event.screenX,event.screenY
// 鼠标相对于事件源的坐标
event.offsetX,event.offsetY

停止事件传播

event.stopPropagation();

阻止默认事件

event.preventDefault();

事件委托：

• 把事件绑定在一个不变的祖先元素身上
• 好处
  1. 不用遍历子元素
  2. 新增元素也可以拥有该事件
• 原理：利用事件流，只指定一个事件句柄就可以管理某一类所有事件
• 何时
  1. 子级太多
  2. 子级动态生成

表单 form

表单字段：有value值才称为表单字段

1. input
2. textarea
3. select
4. button
5. fieldset

特殊属性（标志性属性）

1. autofocus 自动获取焦点
2. disabled 禁用
3. selected 下拉列表默认选中
4. checked 单选多选默认选中
5. readonly 只读
6. multiple 下拉列表多选（按住 shift 实现多选）

事件：

1. 焦点事件
   • 获取焦点：ele.onfocus
   • 失去焦点：ele.onblur
2. 改变事件
   • ele.oninput 输入内容时触发
   • ele.onchange 失焦时如果内容发生改变才触发
3. 提交事件
   • 具有提交功能的按钮点击后触发form元素身上的onsubmit 事件 formEle.onsubmit (鲜少使用)
4. 重置事件
   • 具有重置功能的按钮点击触发form元素身上的onreset事件 formEle.onreset（鲜少使用）
5. 让普通按钮具有提交重置功能

// 重置
ele.onclick = function(){
    formEle.reset();
}
// 提交
ele.onclick = function(){
    formELe.submit();
}

select

• 获取所有option：select.options

• 获取某一个option：select.options[index]

• 获取选中的option下标：select.selectedIndex

• select发生变化时获取到选中的option

  select.onchange = function(){
      let i = select.selectedIndex;
      console.log(select[i]);
  }
  

• 获取选中的值：select.value

• 创建option

  let option = new Option("text","value");
  select.options.add(option);
  

• 删除：select.options.remove(index)

• 修改

  select.options[index].value = "beiping";
  select.options[index].text = "北平";