一些简单常用的事件

事件：能被JS监听到的行为

事件三要素

• 事件源：触发事件的源头，谁触发了这个事件

• 事件类型：是哪种事件类型-如：鼠标事件，键盘事件

  ​ click、dbclick、mouseover、mouseout

• 事件处理函数：事件触发后执行的行为（{}会执行的代码）

关于this

• 事件中的this：指向事件源
• 普通函数中的this：指向window

This的形式

• 形式一：

  • oBtn.onclick = function(){this指向的就是oBtn}

• 形式二：

  • oBtn.onclick = fn

​ function fn ( ) {this的指向就是oBtn}

• 形式三：

  • function fn(obj){obj 指代的就是点击元素}

• 4、 普通函数内的this

  ​ function method(){ consoloe.log(this) }

  ​ method()

事件的绑定

• DOM0级事件绑定（事件注册）

  • 语法：事件源.on事件类型 = 事件函数
  • Adj；div.onclick = function () {}
  • 缺点：不能给同一个对象的同一个事件进行多次绑定
  • 优点：书写简单，兼容性好

• DOM2级事件绑定（事件监听）

  • IE高版本的写法

    • 语法：事件源.addEventListener(“事件类型”，事件处理，布尔值)。第三个参数可以酌情删去

    • 优点：可以给同一个对象的同一个事件进行多次绑定

    • 缺点：兼容性不好（IE低版本的不支持该写法）

  • IE低版本的写法

    • 语法：事件源.attachEvent(“on事件类型”,事件处理函数)
    • 此处只有两个参数

• adj：需求：点击div，变色，变内容

  • DOM0级事件绑定(如下之后第二个事件可以生效)

    oDiv.onclick = function () {
    this.style.backgroundColor = 'yellow'
    // }
    oDiv.onclick = function () {
     this.innerHTML = 'yellow'
    // }
    

  • DOM2级事件绑定(如下可以生效)

    oDiv.addEventListener('click',function(){
    		this.style.backgroundColor = 'yellow'
    	})
    oDiv.addEventListener('click',function(){
    		this.innerHTML = 'yellow'
    	})
    

事件解绑

• DOM0级解绑
  • 事件源.on事件类型 = null
• DOM2级解绑
  • 注意：先绑定再移出
  • 1.绑定：事件源.addEventListener(‘事件类型’，fn)
  • 2.解绑：事件源.removeListener(‘事件类型’,fn)

事件类型

鼠标事件

• click单击
• dblclick双击
• mouseover/mouseout 鼠标移入移出
• mouseenter/mouseleave 移入移出
• mousedown/mousemove/mouseup 按下 移动 抬起
• contextmenu 右键

表单事件

• focus 获取焦点时触发
• blur 市区焦点时触发
• input 输入内容时触发（只要有改变就会触发）
• change 内容改变时触发（相较于默认内容，触发必须失焦）
• submit 提交时触发
• reset 重置时触发

键盘事件

注！：只有部分事件可以绑定键盘事件，window document 表单元素

• keydown：按下键盘时触发，会连续触发
• keypress：按住键盘时触发，会连续触发，与按住不易区分
• keyup：从键盘抬起时触发，抬起一次触发一次，较为常用

浏览器事件（仅有window触发）

• window.onscroll = function(){} 页面滚动时触发
• window.onresize = function(){} 页面窗口大小发生改变时触发
• window.onload = function(){} 页面资源加载结束后触发

事件对象：

• 作用：时间对象中包含（记录）该事件发生时的一系列信息

• 时间对象的获取：

  • 标准浏览器下获取：

    • 事件处理函数的参数位置，这个参数就是事件对象

      odiv.onclick = function(e){
      e就事件对象
      }

  • IE低版本获取：时间处理函数的内部用window.event来表示时间对象

  • 处理兼容性问题

    odiv.onclick = function(e){
    		var ev = e || window.event;//ev就是兼容性的事件对象
    	}
    

• 鼠标事件对象的一些属性：

  • e.pageX和e.pageY：鼠标点击位置距离页面的左偏移量和上偏移量
  • e.clientX和e.clientY：鼠标点击位置距离浏览器窗口的左偏移量和上偏移量
  • e.offSetX和e.offSetY：鼠标点击位置距离自身元素（事件源）的左偏移量和上偏移量