一 查漏补缺 知识点记录
事件处理程序：事件捕获 目标对象 事件冒泡。
事件绑定方法有几种呢？分别有什么区别？
一 直接绑定在htm元素上。
- this指向的是当前的目标对象，但是因为执行函数的时候是在全局执行，所以函数内部调用的this是指向全局的。
- 默认会有一个event的事件对象,你不需要从函数中传进去，也不需要在函数内部定义。
- 在html上的onclick传入的是js的代码，所以需要加括号，当事件触发的时候，自动执行。
- 处理程序发生在事件冒泡阶段。
this指向 默认有event对象
<button id='mybtn' onclick='handleClick(this.id)' >点击提交</button>
//js代码部分
function handleClick(test) {
console.log(this, '测试this的指向', test, event);
}
// 输出 window，测试this的指向，mybtn，event（事件对象）
事件处理发生在冒泡阶段。当点击子按钮的时候，先执行子按钮的事件处理，再执行父元素的事件处理程序。
// html代码
<div class='father'>
<div class='son' onclick="handleClick('我是父亲')">
<button class='mybtn'>按钮</button>
<button class='btn2' onclick="handleClick('我是儿子')">3333</button>
</div>
</div>
// js代码
function handleClick(num) {
// console.log(this, '测试this的指向', event, num);
console.log(num);
}
//输出
我是儿子
我是父亲
二 使用DOM0级处理程序（在事件冒泡阶段被处理）
使用目标的对象事件
- 事件处理程序发生在冒泡阶段。
- this指向当前的目标对象。
- 使用
btn.onclick = null去清除删除事件处理程序。
btn.onclick = function(){}
btn.onclick = handleClick;
btn.onclick = null ;
三 使用DOM2级事件处理。(false则发生在事件冒泡，true则发生在事件捕获阶段。)
- 可以通过设置第二个参数来确定要发生在哪个阶段。
- this的指向是当前事件处理的对象。
- 使用
btn.removeEventListener('click, handleClick, false')来消除事件。（匿名函数不可消除。） - 当一个元素绑定了一个点击事件，调用了两次函数，那么事件处理程序会以添加它们的相同的顺序被触发。
father.addEventListener('click', function(event){
console.log(this.className, '这是父亲的');
console.log(event.target.className, '这是真正被点击的对象');
console.log(event.currentTarget.className, '这是事件正在被触发的时候的对象');
}, false)
son.addEventListener('click', function(event){
console.log(this.className, '这是儿子的');
console.log(event.target.className, '这是真正被点击的对象');
console.log(event.currentTarget.className, '这是事件正在被触发的时候的对象');
}, false)
-
father.addEventListener('click', handleClick, true)
son.addEventListener('click', handleClick, true)
father.removeEventListener('click', handleClick, true)
son.removeEventListener('click', handleClick, true)
四 IE中使用attachEvent 来实现（发生在事件冒泡阶段。）
- this指向的是window对象。
- 可以使用
btn.detachEvent('onclick', handleClick)来实现事件消除。 - 事件名称前需要加on。
- 当一个元素绑定了一个点击事件，调用了两次函数，那么事件处理程序会以添加它们的相反的顺序被触发。
btn.attachEvent('onclick', function(){
window === this // true
})
事件处理中的event需要知道的几个点
- event.target : 用户进行操作处理的事件对象。
- event.currentTarget: 因为事件冒泡或者事件捕获而被处理的事件对象。
😆举个例子。
// dom2 window.addeventlistener
// 其中son是father的子元素，false，所以事件发生在冒泡阶段。
father.addEventListener('click', function(event){
console.log(this.className, '这是父亲的this');
console.log(event.target.className, '这是真正被点击的对象');
console.log(event.currentTarget.className, '这是事件正在被触发的时候的对象');
}, false)
son.addEventListener('click', function(event){
console.log(this.className, '这是儿子的this');
console.log(event.target.className, '这是真正被点击的对象');
console.log(event.currentTarget.className, '这是事件正在被触发的时候的对象');
}, false)
// 当点击son的时候，输出如下,因为是发生在冒泡阶段
// 所以当son被点击之后，先执行son的函数，其中event.target是此次真正被用户点击的对象，则为son。
// 而event.currentTarget则是动态的，看整个事件流到哪里，就是谁。
son 这是儿子的this
son 这是真正被点击的对象
son 这是事件正在被触发的时候的对象
father 这是父亲的this
son 这是真正被点击的对象
father 这是事件正在被触发的时候的对象
