<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件绑定</title>
<style>
.parent {
width: 400px;
height: 300px;
background-color: cadetblue;
overflow: hidden;
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: chocolate;
margin: 10px;
}
</style>
<script>
function myfun() {
alert('点击')
}
window.onload = function() {
// 1.获取需要绑定事件的dom节点
var parent = document.getElementById('parent')
// 2.给当前dom节点绑定事件
parent.onclick = function(event) {
console.log('this',this);
console.log('目标源元素',event.target);
console.log('当前触发事件元素',event.currentTarget);
console.log(this === event.currentTarget);
// console.log('点击了parent');
}
}
</script>
</head>
<body>
<div class="parent" id="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child">three</div>
</div>
</body>
</html>
事件就是用户或浏览器自身执行的某种动作,响应某个事件的函数为事件处理程序,事件处理程序以
"on"
开头
(onclick,onload)
l HTML事件处理程序
某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的
HTML
特性来指定。
这个特性的值应该是能够执行的
JavaScript
代码。
<input type="button" value="clickMe" onclick = "alert('is clicked')"><input type="button" value="clickMe" onclick = "showMsg()"><script type="text/javascript">function showMsg(){alert("is clicked");}</script>
点击按钮会调用
showMsg()
函数,事件处理程序的代码在执行时,有权访问全局作用域的任何代码。
缺点
:
1)
时差问题,用户可能会在
HTML
元素以出现在页面上就触发相应的事件,但当时
的事件处理程序有可能尚不具备执行的条件。
2)
这种扩展事件处理程序的作用域链在不同
浏览器中会导致不同结果。
3)HTML
与
JavaScript
代码紧密耦合。
l DOM0级事件处理程序
通过
javascript
制定事件处理程序的传统方式,将一个函数赋值给一个事件处理程序属性。
特点是简单,跨浏览器。
var btn = document.getElementById("btn");btn.onclick = function(){alert('cliked');}
dom0
级方法制定的事件处理程序被认为是元素的方法,因此这个时候时间处理程序
是在元素的作用域中运行,
this
指向当前元素。
btn.onclick = null; // 删除事件处理程序
l DOM2级事件处理程序
DOM2
级规范以一种符合逻辑的方式来标准化
DOM
事件,
IE9, Firefox, Opera,Safari, Chrome
全部已经实现了
"DOM2
级事件
"
模块的核心部分。
IE8
是最后一个仍然
使用其专有事件系统的主要浏览器
addEventListener() 事件绑定
参数:
要绑定的事件名
作为事件处理的函数
布尔值:
true
在捕获阶段调用事件处理程序;
false
在冒泡阶段调用
removeEventListener()事件删除
参数:
要删除的事件名
作为事件处理的函数
布尔值:
true
在捕获阶段调用事件处理程序;
false
在冒泡阶段调用
可以添加多个事件处理程序,并且按照添加她们的顺序触发。移除事件传入的参数与添加处理程序时使用的参数相同,添加事件时如果使用匿名函数将无法删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM2级事件绑定</title>
<script>
window.onload = function() {
// 1.获取绑定事件的dom节点
var dom = document.getElementsByTagName('div')[0]
// 2.给目标元素绑定DOM0事件
dom.onclick = function() {
console.log(1);
}
// dom.onclick = function() {
// console.log(1);
// console.log(2);
// }
// 3.DOM2级的事件绑定
// 优点:在不影响之前绑定事件的基础上,继续绑定其他事件
// 缺点:IE8级以下浏览器不支持
var myfun = function() {
console.log(2);
}
var myfun1 = function() {
console.log(3);
}
dom.addEventListener('click',myfun)
dom.addEventListener('click',function() {
console.log(4);
})
dom.addEventListener('click',myfun1)
// 4.解绑事件
// DOM2级事件解绑只能解绑具名函数,匿名函数无法解绑
dom.removeEventListener('click',myfun)
}
</script>
</head>
<body>
<div class="box">
点击
</div>
</body>
</html>