JavaScript中的事件
事件
-
事件流
-
概念:当一个标签触发事件以后,从这个标签沿着一个方向传递,这就叫事件流。是浏览器处理事件的方法。
-
分类:
- 冒泡(从下到上)(IE只支持)
- 捕获(从上到下) (网景)
- DOM事件流—DOM浏览器 (先捕获,后冒泡)(默认冒泡)(如果两种方法都存在,最后顺序由代码决定)
-
-
事件处理方法
-
内嵌事件
尽量避免使用内嵌事件 -
DOM0级事件
- 优点:兼容各个浏览器
- 缺点:只能为一个事件添加一个处理方法
- 添加、删除,可以用null覆盖事件
-
DOM2级事件
-
addEventListener (dom浏览器)
addEventListener("click",function(){},true代表捕获/false代表冒泡)//三个参数
- 缺点:兼容有问题
- 优点:能为一个事件添加多个处理方法
- 删除:removeEventListener 注意三个参数必须一样,特别注意函数名
-
attachEvent (IE浏览器)
- 删除:tetachEvent()两个参数,除去第三个
-
-
-
事件类型
- 鼠标
- mouse
- over out 还会执行 里面有子元素
- enter leave 子元素没有影响
-
键盘
- key -down 一直按着
- up 弹起执行
- 按下弹起执行
-
其他
- onscroll
- 鼠标
-
事件对象(Event)
-
dom浏览器
- 获取方法 :函数里传入一个e
- clientX clientY //鼠标相对于浏览器
- screenX screenY //鼠标相对于窗口
-
IE
e =window.event || e ;
做兼容
-
属性
- onkeydown 键值,不分大小写
- onkeyup
- onkeypress 字符码
- keyCode (常用)
- charCode
- which
-
阻止事件的默认行为(方法)
- e.preventDefault();(dom)
- e.returnValue=false; (IE)
-
阻止事件冒泡
- e.stopProopagation//DOM
- e.cancelBubble=true;//IE
-
-
技巧
- border-collapse:collapse;
- border-spaceing:0;
- 还原颜色 ""
parseInt(moveDiv.style.left || 0); //常见的数初始化技巧
-
事件委托
- 子元素不处理,父元素来处理事件。