#总结
上星期五主要内容讲的是事件有事件流的概念,总结来说就是三种传递的方法,dom浏览器默认为从下往上的冒泡方式,但是可以支持捕获方式,而IE只有冒泡。
事件分四种:内嵌事件、DOM0级事件和DOM2级事件、以及IE的事件,第一种事件方式不推荐,DOM0和DOM2两种各有优缺点。
事件的类型有很多种,一般分为鼠标事件、键盘事件和其他。我们可以用传入一个e的方式来获取到Event对象,并使用其属性。少部分事件带有一些默认的行为,我们可以用相应方法予以清除。而事件冒泡也是有阻止其发生的方法的。
除以上内容,还有一个事件委托,概括起来意思就是子节点不处理事件,统一交由父元素处理。
以上知识点都能理解,活用上面有所欠缺,在之后的练习里尽量多使用。
本周的练习基本都能做出来,但是周末这个按钮确实把我难着,实现的效果实在太少,希望明天能好好看看老师思路。
##事件
***
- ###事件流
* 概念:当一个标签触发事件以后,从这个标签沿着一个方向传递,这就叫事件流。是浏览器处理事件的方法。
* 分类:
- 冒泡(从下到上)(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); //常见的数初始化技巧`
- ###事件委托
- 子元素不处理,父元素来处理事件。