包含了 注册事件,事件监听,删除事件,DOM事件流,事件对象,阻止默认行为,阻止事件冒泡以及事件委托的一些笔记
文章目录
1. 事件高级
1.1 注册事件(2种方式)
给元素添加事件,称为 注册事件 或者 绑定事件
注册事件有两种方式:传统方式 和 监听注册方式
传统注册方式
- 利用on开头的事件 onclick
<button onclick = "alert("hi~")"></button>
- btn.onclick = function(){}
- 特点:注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
监听注册方式
- w3c 标准 推荐方式
- addEventListener() 是一个方法
- IE9 之前的 IE 不支持此方法,可使用 attachEvent() 代替
- 特点:同一个元素同一个事件可以注册多个监听器
- 按注册顺序依次执行
1.2 事件监听
addEventListener()事件监听(IE9以后支持
eventTarget.addEventListener(type, listener[, userCapture])
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数
该方法接收三个参数:
- type:事件类型字符串,比如click、mouseover,注意这里不要带 on
- listener:事件处理函数,事件发生时,会调用该监听函数
- useCapture:可选参数,是一个布尔值,默认是false。
attachEvent()事件监听(IE678支持)
eventTarget.attachEvent(eventNameWithOn, callback)
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,指定的回调函数就会被执行。
该方法接收两个参数:
- eventNameWithOn:事件类型字符串,比如onclick、onmouseover,注意要带 on
- callback:事件处理函数,当目标触发事件时回调函数被调用
注意:IE8 及早期版本支持
事件监听兼容性解决方案
封装一个函数,函数中判断浏览器类型
function addEventListener(element, eventName, fn) {
//判断当前浏览器是否支持 addEventListener 方法
if(element.addEventListener) {
element.addEventListener(eventName, fn); //第三个参数默认是 false
}else if(element.attachEvent) {
element.attachEvent('on'+eventName, fn);
}else {
//相当于传统方式注册事件
element['on'+eventName] = fn;
}
}
1.3 删除事件(解绑事件)
1. 传统注册方式
eventTarget.onclick = null;
1. 方法监听注册方式
- eventTarget.removeEventListener(type, listener[, userCapture]);
- eventTarget.detachEvent(eventNameWithOn, callback);
<div>1</div>
<div>2</div>
<div>3</div>
<script type="text/javascript">
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
console.log("div1");
//1. 传统方式删除事件
divs[0].onclick = null;
}
//2. removeEventListener 删除事件
divs[1].addEventListener('click',fn); //里面的fn 不需要小括号
function fn() {
console.log("div2");
divs[1].removeEventListener('click',fn);
}
//3. detachEvent
divs[2].attachEvent('onclick',fn1);
function fn1() {
console.log("div3");
divs[2].detachEvent('onclick',fn1);
}
</script>
删除事件兼容性解决方案
function removeEventListener(element, eventName, fn){
//判断当前浏览器是否支持 removeEventListener 方法
if(element.removeEventListener) {
element.removeEventListener(eventName, fn);//第三个参数 默认是false
}else if(element.detachEvent) {
element.detachEvent('on'+eventName, fn);
}else {
element['on'+eventName] = null;
}
}
1.4 DOM事件流
html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。
当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。
那么是先执行父元素的单击事件,还是先执行div的单击事件 ???
事件流 描述的是从页面中接收事件的顺序。
事件 发生时会在元素节点之间按照特点的顺序传播,这个传播过程 即 DOM事件流
比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了 body,单击了html,单击了document。
- 事件冒泡:IE最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到到DOM最顶层节点的过程。
- 事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到到最具体的元素接收的过程。
DOM事件流会经历3个阶段:
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
我们向水里面扔一块石头,首先它会有一个下降的过程, 这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后会产生泡泡,会在最低点(最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。
注意:
- js代码中只能执行捕获或者冒泡其中一个阶段。
- onclick 和 attachEvent 只能得到冒泡阶段。
- addEventListener(type, listener[, userCapture])第三个参数如果是 true,表示事件捕获;如果是false(不写默认是false),表示事件冒泡。
- 实际开发过程中,更常用到事件冒泡。
- 有些事件是没有冒泡的,比如:onblur、onfocus、onmouseenter、onmouseleave
事件冒泡
执行顺序:son-father-document
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// onclick 和 attachEvent(ie) 在冒泡阶段触发
// 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略
// son -> father ->body -> html -> document
var son = document.querySelector('.son');
// 给son注册单击事件
son.addEventListener('click', function() {
alert('son');
}, false);
// 给father注册单击事件
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
// 给document注册单击事件,省略第3个参数
document.addEventListener('click', function() {
alert('document');
})
</script>
事件捕获
执行顺序:document-father-son
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
// document -> html -> body -> father -> son
var son = document.querySelector('.son');
// 给son注册单击事件,第3个参数为true
son.addEventListener('click', function() {
alert('son');
}, true);
var father = document.querySelector('.father');
// 给father注册单击事件,第3个参数为true
father.addEventListener('click', function() {
alert('father');
}, true);
// 给document注册单击事件,第3个参数为true
document.addEventListener('click', function() {
alert('document');
}, true)
</script>
1.5 事件对象
什么是事件对象
事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象。
比如:
- 谁绑定了这个事件
- 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。
- 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。
事件对象的使用
事件触发发生时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。
所以,在事件处理函数中声明1个形参用来接收事件对象。
//这个 event 就是事件对象,有时候还会写出 e 或 evt
eventTarget.onclick = function(event) {
}
eventTarget.addEventListener('click',function(event){
})
eventTarget.addEventListener('click', fn)
function fn(event) {
}
事件对象的兼容性处理
事件对象本身的获取存在兼容问题:
- 标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。
- 在 IE6~8 中,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 中获取查找。
解决:e = e || window.event;
只要“||”前面为false, 不管“||”后面是true 还是 false,都返回 “||” 后面的值。
只要“||”前面为true, 不管“||”后面是true 还是 false,都返回 “||” 前面的值。
事件对象的属性和方法
e.target 和 this 的区别
- this 是事件绑定的元素(绑定这个事件处理函数的元素) 。
- e.target 是事件触发的元素。
通常情况下terget 和 this是一致的,
但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),
这时候this指向的是父元素,因为它是绑定事件的元素对象,
而target指向的是子元素,因为他是触发事件的那个具体元素对象。
<div>123</div>
<script>
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
// e.target 和 this指向的都是div
console.log(e.target);
console.log(this);
});
</script>
事件冒泡下的 e.target 和 this
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// 我们给ul 绑定了事件 那么this 就指向ul
console.log(this); // ul
// e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
console.log(e.target); // li
});
</script>
1.6 阻止默认行为
html 中的一些标签有默认行为,例如 a 标签被单击后, 默认会进行页面跳转
<a href="http://www.baidu.com">百度</a>
<script>
// 2. 阻止默认行为 让链接不跳转
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); // dom 标准写法
});
// 3. 传统的注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
e.returnValue = false;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题
return false;
alert("return");
}
</script>
注意:
return false 虽然也能阻止默认行为,没有兼容性问题,但是 return false之后,就中止后面代码的运行,即alert("return")
不执行
1.7 阻止事件冒泡
事件冒泡本身的特性,会带来的坏处,也会带来的好处。
-
标准写法:利用事件对象里面的 stopPropagation() 方法
e.stopPropagation(); -
非标准写法:IE678 利用事件对象 cancelBubble 属性
e.cancelBubble = true;
<div class="father">
<div class="son">son儿子</div>
</div>
<script>
var son = document.querySelector('.son');
// 给son注册单击事件
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation(); // stop 停止 Propagation 传播
window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
}, false);
var father = document.querySelector('.father');
// 给father注册单击事件
father.addEventListener('click', function() {
alert('father');
}, false);
// 给document注册单击事件
document.addEventListener('click', function() {
alert('document');
})
</script>
阻止事件冒泡的兼容性处理
if(e && e.stopPropagation) {
e.stopPropagation();
}else {
window.event.cancelBubble = true;
}
1.8 事件委托
由于事件冒泡本身的特性,所以产生了事件委托
什么是事件委托
把事情委托给别人,代为处理
事件委托也称事件代理,在 jQuery 里面称为 事件委派
说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。
<ul>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
</ul>
点击每个 li 都会弹出对话框,以前需要通过 循环给 每个li注册事件,且访问 DOM 的次数增多,就会延长整个页面的交互就绪时间。
事件委托的原理
给父元素注册事件,利用事件委托,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素
事件委托的作用
- 我们只操作了一次 DOM ,提高了程序的性能。
- 动态新创建的子元素,也拥有事件。
<ul>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
<li>点击改变背景颜色</li>
</ul>
<script type="text/javascript">
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e) {
//e.target 这个可以得到我们点击的对象。
e.target.style.backgroundColor = 'skyblue'
})
</script>