多数内容来自渡一公开课笔记
另外还有这两篇
javascript事件系统的发展史
javascript event（事件对象）详解
1、ele.onxxx = function (event) {}
兼容性很好，但是一个元素只能绑定一个事件处理程序
基本等同于写在 HTML 行间上
this指向dom
<div onclick='console.log("adg")'></div>
2、 ele.addEventListener(type, fn, false);
可绑定多个事件处理程序,不能给同一个函数绑定多次
this指向dom
3、 ele.attachEvent(‘on’ + type, fn);
ie，一个事件同样可以绑定多个处理程序，同一个函数绑定多次都可以
this指向window
封装兼容版
function addEvent (ele,type,handle) {
if(ele.addEventListener) {
ele.addEventListener(type,handle,false);
}else if(ele.attachEvent) {
ele.attachEvent('on' + type,function () {
handle.call(ele);
});
}else {
ele['on'+type] = handle;
}
}
javascript事件系统的发展史
感觉这也是个大神,
我刚学事件绑定的时候,也想过能不能用 onclick 绑定两个函数,
或者说,模拟 addEventListener(); 我没想到, 这位大神是这么做的
<p id="aa" onclick="alert('第一次')">能绑定多个同类型函数</p>
<script type="text/javascript">
var p = document.getElementById("aa")
var addEvent = function(el,type,fn) {
var type = "on"+type
var old = el[type];
if (typeof el[type] != 'function') {
el[type] = fn
}else {
el[type] = function() {
old();
fn();
}
}
}
addEvent(p,"click",function(){alert('第二次')});
addEvent(p,"click",function(){alert('第三次')});
技惊四座有没有?
最亮的实际是这句
var old = el[type];
因为我潜意识当中,el[type] 只能进行赋值, 压根没想到也能取值.
他把原来的函数提取出来和下一个要绑定的函数放一起了.
这个我还无法消化,因为我没有合适的概念去归纳他.
这个感觉就像是 str += 'a'
又感觉像是 惰性函数 在函数里 重写函数.
这个完成的事情是, 每次执行函数的时候,能把之前的函数提取出来,整合成一个函数?
解除事件处理程序
1、ele.onclick = false/‘’/null; ==> 解除 ele.onxxx = function (event) {}
2、ele.removeEventListener(type, fn, false);==>解除 addEventListener(type, fn, false)
3、ele.detachEvent(‘on’ + type, fn); ==> obj.attachEvent(‘on’ + type, fn);
注:若绑定匿名函数，则无法解除
这你就发现一个小问题了, 如果是匿名函数则无法解除,
我们上面封装事件绑定时,为了保证this指向ele,
兼容ie时,我们用了匿名函数,这就导致,我们无法用detach解除该事件绑定?
事件处理模型 — 事件冒泡、捕获
事件处理的两个模型：事件冒泡、捕获（不能同时存在）
<div>
<p>
<span onclick= 'console.log(1)'></span>
</p>
</div>
冒泡: 点击事件 会 依次发生 从 span,p,div,body,html,document,window
捕获:点击事件 发生顺序跟 冒泡方向相反
捕获是 chrome 有,ie没有 addEventListener(type,fn,true) 第三个参数改true就是捕获
触发顺序，先捕获，后冒泡
同一个对象的一个事件处理类型，上面绑定了两个事件处理，分别执行事件冒泡和
事件执行
focus，blur，change，submit，reset，select 等事件不冒泡
阻止冒泡,阻止捕获
封装版本
function stopBubble (e) {
if(e.stopPropagation) {
e.stopPropagation();// chrome
}else {
e.cancelBubble = true;//ie
}
}
e.stopImmediatePropagation(); 这个也可以
用法上有个注意的地方.
想阻止冒泡,应该在子元素上绑定事件,并且阻止冒泡.
想阻止捕获,应该在父元素上绑定捕获事件,并且阻止捕获.
(作为一个小白至今我只碰到过阻止冒泡的需求.)
阻止默认事件(如右键弹出菜单栏,表单提交刷新页面等默认事件)
封装版
function preDefault (e) {
if(e.preventDefault) {
e.preventDefault();
}else {
e.returnValue = false;
}
}
似乎 return false 也能取消默认事件.
a标签的话 还有这种方式.
<a href = "javascript:void(0)">百度</a>
事件对象
事件源,
事件委托:优点：
1. 性能 不需要循环所有的元素一个个绑定事件
2. 灵活 当有新的子元素时不需要重新绑定事件
