JavaScript事件

JavaScript事件

事件基础

1.绑定事件

• 1.把事件当做HTML元素的属性

<button onclick="code...">

我是按钮

• 2.把事件当做dom对象的方法
  dom.onclick = function(){code....}

  你是按钮

  //获取button元素
  var btn = document.getElementById("btn");
  //给btn元素绑定事件
  btn.onclick = function(){
  document.body.style.backgroundColor = "rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+")";
  }

• 3.事件监听方式

• addEventListener(eventName,fn,true/false)

• attachEvent(eventName,fn)

  它是按钮

  //获取 btn1 对象
  var btn1 = document.getElementById("btn1");
  //给btn1绑定事件
  btn1.addEventListener("click", function(){
  document.body.style.color = "rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+")";

  });

事件监听的正规写法

事件监听

---

按钮

2.解除事件的绑定

• 1.绑定方式：把事件当做html元素属性/把事件当做dom对象的方法

重新绑定一个空的function,覆盖前面

• 绑定方式 是事件监听方式

• removeEventListener(event,fn)

• detachEvent(event,fn)

  //获取按钮bth2
  var btn2=document.getElementById('btn2');
  //给btn btn0 btn1取消绑定
  btn2.onclick=function(){
  btn.onclick=function(){

  };

  document.getElementById('btn0').onclick=function(){

  };

  btn1.removeEventListener("click",randomColor)
  }

3.this的用法

• 循环给一组元素绑定事件的时候

• 事件作为html元素属性的时候函数调用，传this表示该元素

  
  
  
  
  
  
  
  
  

  
  
  • 哈哈哈
  
  
  • 嘿嘿嘿
  
  
  • 嘻嘻嘻
  
  
  • 呵呵呵
  
  
  • 咦咦咦
  
  
  
  
  
  

事件类型

1.鼠标事件

• click 单击

  单击

• dblclick 双击

• contextmenu 右击

• mouseover 鼠标放上

• mouseout 离开

• mousedown 按下

• mouseup 抬起

• mousemove 鼠标移动

2.键盘事件

• keydown 键盘按键按下

• keyup 抬起

• keypress 键盘按键按下，并不是所有的按键都可以触发（只有可以输入字符的按键）

  
  

3.文档事件

• load 加载完成
• unload 关闭
• beforeunload 文档关闭

4.表单事件

• submit 提交事件
• reset 表单重置
• blur 失去焦点
• focus 获得焦点
• change 改变
• select input或textarea内容被选中的时候触发

5.图片事件

• abort 图片加载中断
• load 图片加载完成
• error 图片加载错误

6.其他事件

• scroll 滚动事件
• resize 绑定给window,窗口尺寸发生变化

Event对象

Event种类

• mouseEvent
• keyboardEvent
• focusEvent

属性

• clientX

• clientY

• keyCode

• target 具体触发事件的元素

event.target的应用

• 小丽丽


• 小丽丽


• 小丽丽


• 小丽丽


• 小丽丽


• 小丽丽

---

添加

方法

• stopPropagation() 阻止冒泡
• preventDefault() 阻止默认动作

事件的冒泡和捕获

• 捕获阶段先找大的后找小的
• 冒泡从小到大（冒泡阶段触发）
• 先捕获后冒泡