通过HTML网页所呈现的界面是异步的和事件驱动的。步骤：
- 建立用户界面
- 等待又去的事情发生
- 做出相应的反应
- 重复
- 浏览器所实现的事件模型
| DOM第0级事件模型 |
事件处理程序是通过吧函数实例的引用指派到DOM元素的属性而声明的。 或HTML的特性。 当指定到HTML特性上时，匿名函数就会利用特性的值作为函数体而自动创建 onclick <=> click事件 onmouseover <=>mouseover事件 在事件处理程序中，可以利用event参数 违反了不唐突的JavaScript原则 每个元素对于任何特定的事件类型，每次只能注册一个事件处理程序 |
| DOM第2级事件模型 | 1.建立事件 通过一个元素方法而建立：能在同一个元素同一个事件多个事件处理程序 addEventListener(evenType,listener，useCapture） evenType:click,mouseover... listener:函数引用 useCapture: 事件传播，捕获阶段 IE: attchEvent(eventName,handler) |
| JQuery事件模型 | 提供建立事件处理程序的统一方法 允许在每个元素上为每个事件建立多个处理程序 采用标准事件类型名称：click,mouseover 使用Event实例作处理程序的参数 对Event实例的最常用的属性进行规范化 为取消事件和阻塞默认操作提供统一方法 JQuery不支持捕获阶段 |
在大多数浏览器中，Event的实例作为第一个参数传递到处理程序。但ID把Event实例指派到window对象的名为event属性
事件捕获：从根到目标元素调用事件处理程序。IE 不支持捕获阶段
事件冒泡:调用目标元素的事件处理程序，以及父辈的事件处理程序，直到DOM根
阻止事件冒泡： event.stopPropagation() IE: event.cancelBubble=true
取消事件的默认语义： 将处理程序的返回值设置为false。 a, form
- 利用JQuery把事件处理程序绑定到元素上
| 在匹配集的所有元素上建立函数，作为指定事件类型的事件处理程序 | bind(eventType,data,listener) |
eventType: 字符串。click,mouseover or click.scope data:对象，event.data,可省略 listener: 函数 |
包装集 | $(‘#thing‘).bind(‘click.editmode‘,listener1) $(‘#thing‘).bind(‘click.display‘,listner2) $(‘#thing‘).unbind(‘click.editmode‘) 从页面上的所有元素删除editmode命名空间里的所有click绑定 |
| 一些快捷方式 | blur(listener) change click dbclick error focus keydown keypress keyup load mousedown mousemove mouseout mouseover mouseup resize scroll select submit unload |
这种方式无法指定data | ||
| 建立事件，并且执行一次就删掉 | one(eventType,data,listener) | 包装集 | ||
| 从包装集的所有元素中删除可选的已传递参数所指定的事件处理程序 如果不提供参数，则从元素中删除所有的监听程序 |
unbind(eventType,listener) unbind(eventType) |
eventType:可选 listener:可选 |
包装集 | 如果省略参数就会删除所有的监听器 如果函数时匿名的内联函数，则无法删除 |
2. Event对象实例
| altKey | Alt， true/false |
| ctrlKey | Ctrl。 true/false |
| data | bind(,data,,) |
| keyCode | keyup,keydown. 都是大写版本。确定大小写可以用shiftKey |
| metaKey | Meta , true/false |
| pageX | 鼠标事件。事件相对于页面原地的水平坐标 |
| pageY | 鼠标事件。 |
| relatedTarget | 光标离开或进入的元素 |
| screenX | 相对于屏幕原点的水平坐标 |
| screenY | |
| shiftKey | Shift, true/false |
| target | 那个元素上事件被触发 |
| type | 事件类型 |
| which | 键盘：建的数字编码 鼠标：按下的是那个鼠标键 |
影响事件传播函数：
stopPropagation() 防止事件沿DOM树向上传播
preventDefault()取消默认操作事件
停止事件传播且取消事件的默认行为：处理函数返回false
3. 在脚本控制下触发事件处理程序
| 调用所有已匹配元素的，为已传递事件类型而建立的任何事件处理程序 | trigger(eventType) | 字符串 | 包装集 | 没有传播，event实例很多属性没有值。因为作为普通函数调用 |
| 一些简便方式 | blur() click() focus() select() submit() |
包装集 | ||
| 针对click事件。两个处理函数相互切换 | toggle(listenerOdd,listenerEven) | 包装集 | ||
| mouseover,mouseout | hover(overlistener,outlistener) | 包装集 | ||
时间： 2024-11-13 08:20:47