由内而外的事件传播(从屏幕里飞出来一支箭的感觉)
由表及里的事件传播(力透纸背的感觉)
事件捕获阶段 -> 处于目标阶段 -> 事件冒泡阶段(拿根针从屏幕扎进去,缝衣服的感觉)
事件捕获是从DOM树根到叶子的事件传播,所以可以在靠近根的位置 捕获 (event.stopPropagation)事件,让叶子收不到事件信号
事件冒泡是从叶子到根的原路返回过程,所以可以在靠近根的位置 集中处理 (event.target)叶子的事件,也就是所谓的事件委托,集中处理可以避免给多个叶子绑定事件处理器,拉低响应速度
处于目标阶段只是规范要求,浏览器没怎么支持
注意:[IE9+]支持事件捕获,事件冒泡是 全浏览器支持 的
HTML:on事件名 = strCode事件处理函数可直接访问的属性 = 全局属性 + 元素所在form中的属性 + 元素本身的属性
自动的作用域扩展方式相当于:
function(){ with(document){//全局属性 with(this.form){//表单属性 with(this){ //本身属性 } } } }
事件处理函数可以直接访问这么多属性,所以,可以这样做:
<form method="post"> <input type="text" name="user_name" value=""> <input type="button" value="获取用户名" onclick="alert(user_name.value)"> </form>
DOM0级:elem.on事件名 = functionName/null;
以这种方式添加的事件处理器在冒泡阶段执行,可直接访问的属性 = 全局属性 + 元素本身的属性
DOM2级:(现代浏览器支持的)elem.add/removeEventListener(事件名, functionName, false/true);
false表示在事件冒泡阶段添加,true表示在事件捕获阶段添加。可直接访问的属性同上
[IE8-]:elem.attach/detachEvent( on事件名 (on不能丢了), functionName);
可直接访问的属性 只有全局属性 ,而且对同一事件添加的多个处理器中,最后添加的最先执行, 与DOM2级标准相反
P.S.[IE8-]只支持事件冒泡,所以没有第三个参数,默认(也只能是)在事件冒泡阶段添加
btn.onclick = function(event){ //event.target;获取事件源 //event.preventDefault();取消默认行为,比如链接的跳转行为 //event.stopPropagation();阻断事件传播 //还有一些不常用的 }
注意:上面代码 并不是 全浏览器兼容的,事件对象的属性也不完整,更多信息请查看 JS原生事件处理(跨浏览器)
UI事件
焦点事件
鼠标事件
滚轮事件
文本事件
键盘事件
合成事件(用IME输入)
变动事件(DOM结构更新)
HTML5事件
设备事件(特定设备,比如游戏机)
触摸与手势事件
利用事件冒泡来减少事件处理器,以提升性能。甚至可以给document对象添加事件处理器,以求更短的交互准备时间(页面元素与事件处理器建立连接需要时间)
事件委托的优点 :
设置事件处理器需要时间更少,因为DOM访问次数变少了
占用内存空间更少,因为事件处理器变少了
交互准备时间变短了,因为页面元素与事件处理器之间需要建立的连接变少了
页面响应速度变快了,因为页面元素与事件处理器之间建立的连接变少了
在目标元素被从DOM树中删除前应该手动移除与之绑定的事件处理器,避免失效的事件处理器占用内存
在页面unload之前,最好手动移除页面中的所有事件处理器,因为[IE8-]在unload页面时,事件处理器会滞留在内存中。可以在unload事件处理器中移除
移除事件处理器的 实质 是断开页面元素与事件处理器之间的连接
创建event对象
初始化event对象的各项属性
触发事件
注意:[IE8-]的实现与DOM规范不同;DOM3级才能完美模拟键盘事件
只有在需要拦截别的事件时才把事件处理器添加在捕获阶段,因为[IE8-]不支持事件捕获
对于动态创建的img元素, 只要设置了src属性就会开始下载相关内容 ,而不是在新元素被插入DOM树后才开始
对于动态创建的script元素,只有插入DOM树后才会开始下载
对于动态创建的link元素(用来加载外部样式),只有插入到 head部分 才能保证浏览器表现一致,而且外部样式默认是 异步加载 的
用in操作符来检测事件支持,例如:
if('onload' in elem){ //do sth }
hover, mouseover, mouseout, mouseenter, mouseleave的区别是什么?
事件委托是 最重要的 优化策略,当然,委托也不是完美的,委托会导致逻辑粘连,比如极端的情况,给document对象添加一个事件处理器就够了,但那将是一个很大只的函数。。。所以,应该在合适的地方尽量用委托
适时移除过期的时间处理器可以减少内存占用,这是空间方面的优化策略