DOM0 级事件
缺点:虽然实现了内容与行为相分离,但是元素仍然只能绑定一个监听函数
演示代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点啊" id="input">
<script>
var obj = document.getElementById('input');//id为input的标签
obj.onclick = function () {//将这个按钮绑定点击事件如果点击就执行以下内容
console.log('你好呀!我是DOM0级事件');//控制台弹出此文字
function fun() {//定义一个函数
console.clear();//清空控制台里面的内容
}
setTimeout(fun,1000);//1000毫秒也就是一秒之后清空控制台的内容
}
</script>
</body>
</html>
DOM2级事件
通过两个函数来给对象添加和删除处理程序,
分别是addEventListener()和removeEventListener();
它们都有三个参数:
- 要处理的事件名,
- 事件处理程序(函数名),
- 一个布尔值,true表示在捕获阶段触发,fasle表示在冒泡阶段触发。但为了兼容性没什么必要就选择冒泡阶段触发。
演示代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点啊" id="input">
<script>
var obj = document.getElementById('input');//id为input的标签
obj.funclick = function () {
console.log('你好呀!我是DOM2级事件');
};
obj.addEventListener('click',obj.funclick,false);//在冒泡阶段处理点击事件
obj.removeEventListener('click',obj.funclick,false);
</script>
</body>
</html>
注意:removeEventListener()的参数必须与addEventListener()一致,否则就会失败
所以处理程序不要使用无名函数
就像这样:obj.addEventListener('click',function(){},false);
添加后,虽然可以添加成功,但是却无法移除
事件对象
在触发DOM事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息,包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如,鼠标事件对象中会包含鼠标位置信息,而键盘事件对象中,会包含按键信息等等。触发事件时,产生的事件对象会作为参数传给处理程序
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点啊" id="input">
<script>
var obj = document.getElementById('input');//id为input的标签
obj.onmouseover = function (e) {
console.log(e); //参数e是事件对象,包含了事件相关的各种信息
}
//如果要在一个元素对象上处理不同的事件就要用type来处理
obj.onclick = function (e) {
switch (e.type) {
case 'click':console.log('click');break;
case 'mouseover':console.log('mouseover');break;
}
}
</script>
</body>
</html>
还有一个十分重要的事件
//文档加载完毕事件(只响应一次)
window.onload = function(){
//文档加载完了之后在操作DOM,就会避免在DOM加载完之前就执行相关代码而失败的问题
}
鼠标、键盘事件
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 1px solid red;
width: 100px; height: 100px;
}
</style>
</head>
<body>
<div>我是div</div>
<input type="text" value="" id="input">
<script>
window.onload = function () {
var btn = document.getElementsByTagName('div')[0];
btn.onmouseover = function(e){
//鼠标在div区域内悬停事件
//事件对象e中保存了事件相关的信息
e.buttons; //区分按的是鼠标左键,还是右键等
console.log(e);
}
//键盘事件
var text = document.getElementsByTagName('input')[0];
text.onkeypress = function ( e ){
//按键(onkeypress不会响应ctrl,alt,shift,win等按键onkeydown可以响应)响应处理
e.key; //按键的字符
// e.keyCode; //按键的虚拟键码
console.log(e);//打印事件对象e中的内容
console.log("你按下的是键盘上的",e.key,"键");//打印用户按下了哪个键
}
}
</script>
</body>
</html>