jsday-12 总结

\1. 事件绑定函数

\2. 事件机制区别

\3. 事件解绑函数

\4. 事件流概念

\5. 阻止冒泡三目

\6. 取消默认行为三目

\7. 事件委托 原理和实现过程

\8. 键盘事件

事件绑定

利用特定的方法可以实现给一个元素的同一个事件添加多个事件处理函数

标准: 元素.addEventListener(事件类型, 事件处理函数, [是否捕获]);

事件类型: 不加on

事件处理函数: 函数名 函数

是否捕获: 默认false冒泡 true: 捕获

ie: 对象不支持“addEventListener”属性或方法

ie和标准事件机制的区别:

\1. 是否加on: ie: 加on 标准: 不加

\2. 是否捕获: ie: 没有捕获 标准: 有捕获

\3. 执行顺序: ie: 倒叙执行 标准: 顺序执行

\4. this的指向: ie: window 标准: 触发源

绑定

function bind(ele, type, fn) {
​
•            // ele: 元素
​
•            // type: 事件类型
​
•            if (ele.addEventListener) {
​
•                // 标准
​
•                ele.addEventListener(type, fn, false);
​
•            } else {
​
•                // ie
​
•                ele.attachEvent('on' + type, fn);
​
•            }
​
•        }

解绑

unbind(div, 'click', a);
​
•        function unbind(ele, type, fn) {
​
•            if (ele.removeEventListener) {
​
•                //标准
​
•                ele.removeEventListener(type, fn, false);
​
​
​
•            } else {
​
•                //ie
​
•                ele.detachEvent('on' + type, fn);
​
•            }
​
•        }

事件流:

当事件发生的时候, 事件在父子节点之间固定的传递顺序。

捕获型事件(标准) 冒泡型事件

捕获阶段: 当事件发生的时候, 事件从window开始往子元素传递

确定目标: 确定鼠标的触发源

冒泡阶段: 触发源接收到事件并且开始处理. 处理完成后, 会将事件从当前往父节点传递,一直到window

所有事件经过的节点, 都会接收并且去触发这个事件

只有标准浏览器的addEventListener 触发捕获型事件

第三个参数设置成ture

阻止冒泡三目:

不想事件往父节点传递的时候 当前节点添加阻止冒泡

/*

标准: 事件对象.stopPropagation();

ie: 事件对象.cancelBubble = true;

兼容: 如果一个方法一个属性 用方法是否存在来做判断

ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;

*/

取消默认行为三目

兼容:

ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;

事件委托(事件代理

\1. 如果现在元素数量过多 执行速度明显降低

\2. 如果元素发生在未来, 后面的元素没有事件

事件委托(事件代理): 将子元素要做的事情交给父元素, 通过target或srcElement找到指定的触发源, 将后续代码交给触发源来处理

键盘事件

document\表单元素

onkeyup 抬起

obkeydown 按下 键盘上任何一个键都可以触发 不区分大小写, 返回大写的编码

特殊键shift + 1 ---> shift + 49 --> ! + 49

obkeypress 按下 键盘上字符可以触发 区分大小分, 返回大写和小写字母的编码

特殊键shift + 1 ---> ! 33