JS——DOM事件、事件
一、DOM 事件
1.1 DOM 事件级别
DOM0:element.onclick = function(){
};
DOM2:element.addEventListner('click', function(){
}, false);
DOM3:element.addEventListener('keyup', function(){
}, false);
注:DOM1级没有涉及事件,不是没有DOM1标准。
(true为捕获,false为冒泡,默认值为false)
1.2 DOM 事件模型
捕获、冒泡
1.3 DOM 事件流
捕获阶段
目标阶段
冒泡阶段
1.4 描述DOM事件捕获的具体流程
window → document → html → body → … → 目标元素
1.5 Event对象常见应用
event.preventDefault() // 阻止默认事件
event.stopPropagation() // 阻止冒泡
event.stopImmediatePropagation() // 组织调用相同事件的其它侦听器(事件响应优先级)
event.currentTarget()
event.target()
1.6 自定义事件
var event1 = new Event('test');
ev.addEventListener('test', function(){
console.log('abc');
});
ev.dispatch(event);
二、事件
1 知识点
1.1 通用事件绑定
1.2 事件冒泡
1.3 代理
代理的好处:
① 代码简洁
② 减少浏览器内存占用
1.4 完善通用事件绑定
2 问答
题目:
*编写一个通用的事件监听函数
*描述事件冒泡流程
*对于一个无限下拉加载图片的页面,如何给每个图片绑定事件
2.1 编写一个通用的事件监听函数
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, function(e) {
var target
if (selector) {
target = e.target
if (target.matches(selector)){
fn.call(target, e)
}
} else {
fn(e)
}
})
}
2.3 对于一个无限下拉加载图片的页面,如何给每个图片绑定事件
使用代理
知道代理的两个优点(代码简洁;减少浏览器内存占用)