js事件以及事件处理函数

事件以及事件处理函数

• 事件定义：事件是由访问WEB页面的用户引起的一系列操作

• 事件绑定方式
  JS有两种事件模型：内联模型和脚本模型

  • 事件处理函数：dom.on事件名 = function(){}

• 事件分类：

  1. 鼠标事件

     • 鼠标点击事件
       • .onclick 单击
       • .ondbclick 双击
     • 鼠标移动
       • .omousedown 按下时触发
       • .onmouseup 松开时触发
       • .onmouseover 移入时触发
       • .onmousemove 移动时触发.onmousemove 移动时触发
       • .onmouseout 当鼠标移出某个元素上方时触发
       • .event.button 鼠标点击左键或右键时触发

  2. 键盘

     • .onselect 用户选择文本框（input 或 textarea）中的字符时触发
     • .oninput 文本框内容发生改变时触发
     • .onchange 当文本框内容改变并失去焦点时触发
     • .onfocus 获取焦点时触发
     • .onblur 失去焦点时触发
     • .onsubmit 点击提交按钮时在form上触发
     • .onreset 点击重置按钮在form上触发
     • .onscroll 当滚动条位置发生改变时触发
       HTML .onload 页面加载完毕后触发

• 事件对象

  • 定义：当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息
  • 兼容写法：e || window.event

• 事件流：
  1. 冒泡——由内向外 阻止冒泡 兼容 支持标准浏览器 evt . stopPropagation （不支持IE浏览器），支持IE低版本 evt. canceBlubble = true
  2. 捕获——由外向内

• 事件委托

  • 利用冒泡事件的原理 为新增的对象添加事件
  • 实现步骤：
    1. 找到当前节点的父节点
    2. 将事件添加到父节点
    3. 找到事件对象，判断触发节点是否是需要的，然后继续操作

window.onload=function(){
​    var   oUl= document.getElementById("oUl");
​    oUl.onclick=function(e){
​    var  evt = e || window.event;
​    var  target=evt.target || window.event.srcElement
​    if(target .nodeName.toLowerCase()=="li"){
​    target.style.backgroundColor = "red"} }
}

• 事件监听
  1. addEventListener()
     • 格式：node.addEventListener( "click" , function(){}，布尔值)
     • 参数：
       • 第一个参数 事件类型
       • 第二个参数 绑定的函数
       • 第三个参数 布尔值 true 事件捕获false 事件冒泡 默认解决了事件重复添加会覆盖的问题
  2. removeEvent()
• 事件默认行为
  1. 阻止事件默认行为return false
  2. evt . preventDefault()
  3. evt.returnfalse=true