JS事件总结
1. 事件流(事件传播)
描述的是从页面接收事件的顺序。
ie事件流是事件冒泡流,netscape是事件捕获流。
window: window
document: document
html: document.documentelement
body: document.body
div: document.getelementbyid('div')
2. 事件流阶段
(1)事件捕获阶段 (2)处于目标阶段 (3)事件捕获阶段
3. 事件对象
3.1 e.eventphase 描述事件发生的阶段
事件捕获阶段 1
处于目标阶段 2
事件冒泡阶段 3
3.2 事件目标
e.currenttarget === this
e.target
e.srcelement
// 兼容性代码 var target = e.target || e.srcelement;
3.3 事件代理(事件委托)
原理:事件冒泡
3.4 取消默认行为(a链接的跳转行为)
e.preventdefault()
e.returnvalue = false;
return false; (通用)
3.5 事件冒泡
e.bubbles(blur、focus、scroll事件返回值为false)
e.stoppropagation(); // 常用
e.stopimmediatepropagation();
如果有多个相同类型事件的事件监听函数绑定到同一个元素,当该类型的事件触发时,它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopimmediatepropagation() 方法,则当前元素剩下的监听函数将不会被执行。
e.cancelbubble = true;
// 兼容写法 var handler = function(e) { e = e || window.event; if(e.stoppropagation) { e.stoppropagation(); }else { e.cancelbubble = true; } }
4. 事件处理程序
4.1 html事件处理程序
4.2 dom0级事件处理程序
btn.onclick = function(e) { e = e || window.event; console.log(btn.innerhtml = 1); } // 会出现事件覆盖现象 btn.onclick = function(e) { e = e || window.event; console.log(btn.innerhtml = 2); } btn.onclick = null;
4.3 dom2级事件处理程序
btn.addeventlistener('click', function() {}, false); btn.addeventlistener('click', function() {}, false); var handler = function(){ ... } btn.addeventlistener('click', handler, false); btn.removeeventlistener('click', handler);
4.4 ie事件处理程序
btn.attachevent('click', function(){ // 在ie中的this指向全局的window }) btn.detachevent('click', function(){ ... })
处理this指向的办法,用call(target)
5. 事件对象中的属性 坐标位置
5.1 e.clientx/y x/y
相对于当前的浏览器(客户端窗口有效区域)的x轴、y轴的距离。(与滚动条无关)
5.2 e.screenx/y
相对于电脑屏幕的x轴、y轴的距离。
5.3 e.pagex/y
相对于整个页面文档的x轴、y轴的距离。(与滚动条有关)
5.4 e.offsetx/y
相对于当前事件源的x轴、y轴的距离。
上一篇: Java线程的生命周期(有代码演示)
下一篇: LeetCode——最长公共前缀