标签：完成   隐藏   事件   window   span   监听   定时   时间   事件委托   

小案例带你揭秘JS事件

### 什么是事件？

• 在js中一个事件的组成由那些呢？
  • 谁触发事件：事件源
  • 触发什么事件: 事件的类型
  • 触发事件干什么事：事件处理函数

事件传播的过程

• 捕获阶段
  • 就是从window事件处理函数开始，依次向内，只要事件目标的事件处理函数都会执行
  • 执行顺序是从上到下的函数执行顺序
• 目标阶段
  • 你触发在哪个元素上那么这个事件的目标源就是谁
• 冒泡阶段
  • 从事件目标的时间处理函数开始，依次向外，知道window的事件处理函数触发
  • 执行顺序是从内到外的

事件委托

• 就是我们把要做的事情委托给别人做
• 因为存在冒泡机制，点击子元素的时候，实际上也会同步触发父元素的相同事件
• 所以我们可以把子元素的时间委托给父元素来监听

常见事件

• 我们在写页面的时候经常用到的一些事件
• 大致分为几类，浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件
• 不需要都记住，但是大概要知道

浏览器事件

• load ： 页面全部资源加载完毕
• scroll ： 浏览器滚动的时候触发
• ...

鼠标事件

• click ：点击事件
• dblclick ：双击事件
• contextmenu ： 右键单击事件
• mousedown ：鼠标左键按下事件
• mouseup ：鼠标左键抬起事件
• mousemove ：鼠标移动
• mouseover ：鼠标移入事件
• mouseout ：鼠标移出事件
• mouseenter ：鼠标移入事件
• mouseleave ：鼠标移出事件
• ...

键盘事件

• keyup ： 键盘抬起事件
• keydown ： 键盘按下事件
• keypress ： 键盘按下再抬起事件
• ...

表单事件

• change : 表单内容改变事件
• input : 表单内容输入事件
• submit : 表单提交事件
• ...

触摸事件

• touchstart ： 触摸开始事件
• touchend ： 触摸结束事件
• touchmove ： 触摸移动事件
• ...

事件案例

• 鼠标坐标定位器

• 模拟下拉菜单

        请选择
        

HTML
            
CSS
            
JavaScript
            
Java
            
Python
        

    

• 图片拖拽加回放

    回放
    

• 顺表提起一下一些常见的默认事件
  • a标签的点击会默认跳转地址事件
  • submit点击后表单会直接提交事件
  • contentmenu浏览器奶鼠标右键弹出浏览器菜单事件
• 如何禁止这些默认事件
  • 非IE浏览器使用event.preventDefault();
  • IE浏览器使用event.returnValue = false;
• 阻止默认事件的兼容写法

点击我试试

小案例带你揭秘JS事件

标签：完成   隐藏   事件   window   span   监听   定时   时间   事件委托   

原文地址：https://www.cnblogs.com/xfy196/p/12496868.html