Javascript⾯向对象基础-事件篇
事件基础
事件概述
JavaScript 使我们有能⼒创建动态页⾯，⽽事件是可以被 JavaScript 侦测到的⾏为。
简单理解：触发--- 响应机制。
⽹页中的每个元素都可以产⽣某些可以触发 JavaScript 的事件，例如，我们可以在⽤户点击某按钮时产⽣⼀个事件，然后去执⾏某些操作。
时间三要素
事件源（谁）：触发事件的元素
事件类型（什么事件）：例如 click 点击事件
事件处理程序（做啥）：事件触发后要执⾏的代码(函数形式)，事件处理函数
<body>
<button id="btn">唐伯虎</button>
<script>
// 点击⼀个按钮，弹出对话框
// 1. 事件是有三部分组成事件源事件类型事件处理程序我们也称为事件三要素
//(1) 事件源事件被触发的对象谁按钮
var btn = ElementById('btn');
//(2) 事件类型如何触发什么事件⽐如⿏标点击(onclick) 还是⿏标经过还是键盘按下
//(3) 事件处理程序通过⼀个函数赋值的⽅式完成
alert('点秋⾹');
}
</script>
</body>
执⾏事件的步骤
获取事件源
注册事件(绑定事件)
添加事件处理程序(采取函数赋值形式)
<body>
<div>123</div>
<script>
// 执⾏事件步骤
// 点击div 控制台输出我被选中了
/
/ 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件注册事件
// lick
// 3.添加事件处理程序
console.log('我被选中了');
}
</script>
</body>
分析事件三要素
下拉菜单三要素
关闭⼴告三要素
事件⾼级
注册事件
给元素添加事件，称为注册事件或者绑定事件
注册事件有两种⽅式：传统⽅式和监听注册⽅式
传统注册⽅式
利⽤on开头的事件onclick
<button onclick="alert('hello world')"></button>
特点：注册事件的唯⼀性
同⼀个元素⼀个事件只能设置⼀个处理函数，最后注册的处理函数将会覆盖前⾯的注册处理函数
监听注册⽅式
W3C标准推荐⽅式
addEventListener()它是⼀个⽅法
IE9 之前的 IE 不⽀持此⽅法，可使⽤attachEvent()代替
特点：同⼀个元素同⼀个事件可以注册多个
按注册顺序依次执⾏
事件监听
eventTarget.addEventListener(type, listener[, useCapture])将指定的注册到 eventTarget（⽬标对象）上，当该对象触发指定的事件时，就会执⾏事件处理函数。IE9以后⽀持
type事件类型字符串，⽐如click mouseover
listener事件处理函数，事件发⽣时，会调⽤该监听函数
useCapture布尔值，true在事件捕获阶段调⽤事件处理函数，false(默认值) 在事件冒泡阶段调⽤事件处理函数eventTarget.attacheEvent(eventNameWithOn, callback)将指定的注册到 eventTarget（⽬标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执⾏。IE678⽀持
eventNameWithOn事件类型字符串，⽐如onclick onmouseover
callback事件处理函数，当⽬标触发事件时回调函数被调⽤
<button>传统注册事件</button>
<button>⽅法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
var btns = document.querySelectorAll('button');
// 1. 传统⽅式注册事件
btns[0].onclick = function() {
alert('hi');
}
btns[0].onclick = function() {
alert('hao a u');
}
// 2. 事件侦听注册事件 addEventListener
// (1) ⾥⾯的事件类型是字符串必定加引号⽽且不带on
// (2) 同⼀个元素同⼀个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click', function() {
alert(22);
})
btns[1].addEventListener('click', function() {
alert(33);
})
// 3. attachEvent ie9以前的版本⽀持
btns[2].attachEvent('onclick', function() {
alert(11);
})
</script>
删除事件(解绑事件)
传统注册⽅式
⽅法监听注册⽅法
eventTarget.detachEvent(eventNameWithOn, callback);
<div>删除事件(解绑事件)</div>
<div>删除事件(解绑事件)</div>
<div>删除事件(解绑事件)</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert(11);
// 1. 传统⽅式删除事件
divs[0].onclick = null;
}
// 2. removeEventListener 删除事件
divs[1].addEventListener('click', fn) // ⾥⾯的fn 不需要调⽤加⼩括号
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
// 3. detachEvent
divs[2].attachEvent('onclick', fn1);
function fn1() {
alert(33);
divs[2].detachEvent('onclick', fn1);
}
</script>
删除事件兼容性解决⽅案
var removeEventListener = function(element, evenName, fn){
// 判断当前浏览器是否⽀持 removeEventListener ⽅法
veEventListener){
}else if(element.detachEvent){
element.detachEvent('on'+eventName, fn );
}else{
element('on'+eventName) = null;
}
}
DOM事件流
概念
事件流描述的是从页⾯中接收事件的顺序
事件发⽣时，会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
事件冒泡
IE最早提出，事件开始时由具体的元素接受，然后逐级向上传播到DOM最顶层节的过程
<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>
事件捕获
⽹景最早提出，由DOM最顶层节点开始，然后逐级向下传播到具体的元素接受的过程
<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>
DOM 事件流会经历3个阶段
捕获阶段
当前⽬标阶段
冒泡阶段
DOM事件流
我们向⽔⾥⾯扔⼀块⽯头，⾸先它会有⼀个下降的过程，这个过程就可以理解为从最顶层向事件发⽣的最具体元素（⽬标点）的捕获过程；之后会产⽣泡泡，会在最低点（最具体元素）之后漂浮到⽔⾯上，这个过程相当于事件冒泡。
JS代码中只能执⾏捕获或者冒泡其中的⼀个阶段
onclick和attachEvent只能得到冒泡阶段
实际开发中，事件捕获很少⽤到，更关注事件冒泡
有些事件是没有冒泡的，⽐如onblur onfocus onmouseenter onmouseleave
事件对象
什么是事件对象
事件发⽣后，跟事件相关的⼀系列信息数据的集合都放到这个对象⾥⾯，这个对象就是事件对象。
谁绑定了这个事件。
⿏标触发事件的话，会得到⿏标的相关信息，如⿏标位置。
键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
事件对象的使⽤
事件触发发⽣时就会产⽣事件对象，并且系统会以实参的形式传给事件处理函数。
所以，在事件处理函数中声明1个形参⽤来接收事件对象。
// 这个event就是事件对象我们还喜欢写成e或者ent
}
eventTarget.addEventListener('click', function(event){
// 这个event就是事件对象我们还喜欢写成e或者ent
})
eventTarget.addEventListener('click', fn);
function fn(event){
// 这个event就是事件对象我们还喜欢写成e或者ent
}
事件对象的兼容性处理
事件对象本⾝的获取存在兼容问题：
标准浏览器中是浏览器给⽅法传递的参数，只需要定义形参 e 就可以获取到。
在 IE6~8 中，浏览器不会给⽅法传递参数，如果需要的话，需要到 window.event 中获取查。
解决⽅案：e = e || window.event
<div>事件对象</div>
<script>
var div = document.querySelector('div');
// 事件对象
e = e || window.event;
console.log(e);
// 返回⿏标点击事件对象
}
</script>
事件对象的属性和⽅法
blur事件e.target返回触发事件的对象标准
e.srcElement返回触发事件的对象⾮标准 IE6~8使⽤
e.canceBubble该属性阻⽌冒泡⾮标准 IE6~8 使⽤
e.preventDefault()该⽅法阻⽌默认事件(默认⾏为) ⽐如不让链接跳转
e.stopPropagation()阻⽌冒泡标准
e.target和this的区别
this是事件绑定的元素(绑定这个事件处理函数的元素)
e.target是事件触发的元素
常情况下terget 和 this是⼀致的
但是在事件冒泡时，⽗⼦元素有相同事件，单击⼦元素，⽗元素的事件处理函数也会被触发执⾏
这时候this指向的是⽗元素，因为它是绑定事件的元素对象
⽽target指向的是⼦元素，因为他是触发事件的那个具体元素对象
<div>通常情况</div>
<script>
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
// e.target 和 this指向的都是div
console.log(e.target);
console.log(this);
});
</script>
<ul>
<li>事件冒泡</li>
<li>事件冒泡</li>
<li>事件冒泡</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>
阻⽌默认⾏为
阻⽌默认⾏为
html中⼀些标签有默认⾏为，例如a标签被单击后，默认会进⾏页⾯跳转  <a href="www.baidu">百度</a>
<script>
// 2. 阻⽌默认⾏为让链接不跳转
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); //  dom 标准写法
});
// 3. 传统的注册⽅式
// 普通浏览器 e.preventDefault();  ⽅法
e.preventDefault();
// 低版本浏览器 ie678  returnValue  属性
// 我们可以利⽤return false 也能阻⽌默认⾏为没有兼容性问题
return false;
}
</script>
阻⽌事件冒泡
阻⽌事件冒泡
事件冒泡本⾝的特性，会带来的坏处，也会带来的好处。
e.stopPropagation()标准写法
e.cancelBubble = true;⾮标写法 IE6~8
<div class="father">
<div>⽗亲</div>
<div class="son">son⼉⼦</div>
</div>
<script>
var son = document.querySelector('.son');
// 给son注册单击事件
son.addEventListener('click', function(e) {
console.log('son');
e.stopPropagation(); // stop 停⽌  Propagation 传播
window.event.cancelBubble = true; // ⾮标准 cancel 取消 bubble 泡泡
}, false);
var father = document.querySelector('.father');
// 给father注册单击事件
father.addEventListener('click', function() {
console.log('father');
}, false);
// 给document注册单击事件
document.addEventListener('click', function() {
console.log('document');
})
</script>
阻⽌事件冒泡的兼容性处理
var stopBubble = function(e){
if(e && e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
}
事件委托

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。