JavaScript 事件
- EventTarget 接口
- 事件的本质是程序各个组成部分之间的一种通信方式,也是异步编程的一种实现。DOM 节点的事件操作(监听和触发),都定义在EventTarget接口。所有节点对象都部署了这个接口。
- 事件模型
- 监听函数浏览器的事件模型,就是通过监听函数(listener)对事件做出反应。事件发生后,浏览器监听到了这个事件,就会执行对应的监听函数。这是事件驱动编程模式(event-driven)的主要编程方式。JavaScript 有三种方法,可以为事件绑定监听函数。HTML 的 on-属性HTML 语言允
- Event 对象
- 事件发生以后,会产生一个事件对象,作为参数传给监听函数。浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype对象。Event对象本身就是一个构造函数,可以用来生成新的实例。event = new Event(type, options);Even
- 鼠标事件
- 鼠标事件的种类鼠标事件主要有下面这些,所有事件都继承了MouseEvent接口(详见后文)。(1)点击事件鼠标点击相关的有四个事件。click:按下鼠标(通常是按下主按钮)时触发。dblclick:在同一个元素上双击鼠标时触发。mousedown:按下鼠标键时触发。mouseup:释放按下的鼠标键时
- 键盘事件
- 键盘事件的种类键盘事件由用户击打键盘触发,主要有keydown、keypress、keyup三个事件,它们都继承了KeyboardEvent接口。keydown:按下键盘时触发。keypress:按下有值的键时触发,即按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发。对于
- 进度事件
- 进度事件的种类进度事件用来描述资源加载的进度,主要由 AJAX 请求、<img>、<audio>、<video>、<style>、<link>等外部资源的加载触发,继承了ProgressEvent接口。它主要包含以下几种事件。abort:外
- 表单事件
- 表单事件的种类input 事件input事件当<input>、<select>、<textarea>的值发生变化时触发。对于复选框(<input type=checkbox>)或单选框(<input type=radio>),用户改变选项时
- 触摸事件
- 触摸操作概述浏览器的触摸 API 由三个部分组成。Touch:一个触摸点TouchList:多个触摸点的集合TouchEvent:触摸引发的事件实例Touch接口的实例对象用来表示触摸点(一根手指或者一根触摸笔),包括位置、大小、形状、压力、目标元素等属性。有时,触摸动作由多个触摸点(多根手指)组成
- 拖拉事件
- 拖拉事件的种类拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里。拖拉的对象有好几种,包括元素节点、图片、链接、选中的文字等等。在网页中,除了元素节点默认不可以拖拉,其他(图片、链接、选中的文字)都可以直接拖拉。为了让元素节点可拖拉,可以将该
- 资源事件
- beforeunload 事件beforeunload事件在窗口、文档、各种资源将要卸载前触发。它可以用来防止用户不小心卸载资源。如果该事件对象的returnValue属性是一个非空字符串,那么浏览器就会弹出一个对话框,询问用户是否要卸载该资源。但是,用户指定的字符串可能无法显示,浏览器会展示预定义
- session 历史事件
- pageshow 事件,pagehide 事件默认情况下,浏览器会在当前会话(session)缓存页面,当用户点击“前进/后退”按钮时,浏览器就会从缓存中加载页面。pageshow事件在页面加载时触发,包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码
- 网页状态事件
- DOMContentLoaded 事件网页下载并解析完成以后,浏览器就会在document对象上触发 DOMContentLoaded 事件。这时,仅仅完成了网页的解析(整张页面的 DOM 生成了),所有外部资源(样式表、脚本、iframe 等等)可能还没有下载结束。也就是说,这个事件比load事件
- 窗口事件
- scroll 事件scroll事件在文档或文档元素滚动时触发,主要出现在用户拖动滚动条。window.addEventListener('scroll', callback);该事件会连续地大量触发,所以它的监听函数之中不应该有非常耗费计算的操作。推荐的做法是使用requestAnimationFr
- 剪贴板事件
- 以下三个事件属于剪贴板操作的相关事件。cut:将选中的内容从文档中移除,加入剪贴板时触发。copy:进行复制动作时触发。paste:剪贴板内容粘贴到文档后触发。举例来说,如果希望禁止输入框的粘贴事件,可以使用下面的代码。inputElement.addEventListener('paste', e
- 焦点事件
- 焦点事件发生在元素节点和document对象上面,与获得或失去焦点相关。它主要包括以下四个事件。focus:元素节点获得焦点后触发,该事件不会冒泡。blur:元素节点失去焦点后触发,该事件不会冒泡。focusin:元素节点将要获得焦点时触发,发生在focus事件之前。该事件会冒泡。focusout:
- CustomEvent 接口
- CustomEvent 接口用于生成自定义的事件实例。那些浏览器预定义的事件,虽然可以手动生成,但是往往不能在事件上绑定数据。如果需要在触发事件的同时,传入指定的数据,就可以使用 CustomEvent 接口生成的自定义事件对象。浏览器原生提供CustomEvent()构造函数,用来生成 Custo
- GlobalEventHandlers 接口
- 指定事件的回调函数,推荐使用的方法是元素的addEventListener方法。div.addEventListener('click', clickHandler, false);除了之外,还有一种方法可以直接指定事件的回调函数。div.onclick = clickHandler;这个接口是由G