事件对象event
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 400px;height: 400px;border: 1px solid #000;}.son {width: 200px;height: 200px;background-color: #f00;margin: 100px auto;}</style>
</head><body><button>点击</button><div class="father"><div class="son"></div></div><a href="">点击</a><script>// 事件三要素: 1.事件源(给谁绑定事件) 2.事件类型(绑定一个什么事件) 3.事件处理程序(绑定事件后要干嘛)var btn = document.getElementsByTagName("button")[0];// 单击事件// 事件对象 event btn.onclick = function (e) {console.log("点击了");console.log(e);// 属性// 事件的触发者console.log(e.target);}var father = document.getElementsByClassName("father")[0];father.onclick = function (e) {console.log("点击");// 事件触发者console.log(e.target);console.log(e.type);// console.log(e.currentTarget);}// 获取a标签var link = document.getElementsByTagName("a")[0];link.onclick = function (e) {console.log("点击标签");// 阻止默认事件e.preventDefault();}// 键盘事件document.body.onkeydown = function (e) {// 键码console.log(e.keyCode);}</script>
</body></html>
鼠标事件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 400px;height: 400px;border: 1px solid #000;overflow: auto;}.son {width: 200px;height: 800px;background-color: pink;margin: 100px auto;}</style>
</head><body><div class="box"><div class="son"></div></div><script>var box = document.getElementsByClassName("box")[0];// 进入子元素会再次触发box.onmouseover = function () {console.log("鼠标刚进入");}box.onmouseenter = function () {console.log("鼠标完全进入");}box.onmouseout = function () {console.log("鼠标刚要离开");}box.onmouseleave = function () {console.log("鼠标完全离开");}box.onmousemove = function () {console.log("鼠标移动");}box.onmousedown = function () {console.log("鼠标按下");}box.onmouseup = function () {console.log("鼠标弹起");}box.ondblclick = function () {console.log("鼠标双击");}box.onmousewheel = function () {console.log("鼠标滚轮滚动");}box.onscroll = function () {console.log("滚动条滚动");}box.oncontextmenu = function () {console.log("右击菜单");}</script>
</body></html>
键盘事件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>document.body.onkeydown = function (e) {console.log("键盘按下");console.log(e);}document.body.onkeypress = function () {console.log("按着不放");}document.body.onkeyup = function () {console.log("键盘弹起");}</script>
</body></html>
窗口事件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function () {var box = document.getElementsByClassName("box")[0];console.log(box);}</script>
</head><body><div class="box"></div><script>// onload window.onload = function () {console.log("资源加载完成");}window.onresize = function () {console.log("窗口大小改变");}window.onunload = function () {console.log("关闭窗口");}</script>
</body></html>
表单事件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text"><!-- action 提交后的跳转页面 --><form action="./01-DOM事件.html"><input type="text" name="" id=""><input type="submit"><input type="reset"></form><script>var inp = document.getElementsByTagName("input")[0];var form = document.getElementsByTagName("form")[0];// 内容改变事件inp.onchange = function () {console.log("内容改变");}// 获取焦点inp.onfocus = function () {console.log("获取焦点");}// 失去焦点inp.onblur = function () {console.log("失去焦点");}// 输入事件inp.oninput = function () {console.log("输入事件");}// 提交事件form.onsubmit = function () {console.log("提交成功");}// 重置事件form.onreset = function(){console.log("重置");}</script>
</body></html>
注册事件处理程序
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: #f00;}</style>
</head><body><!-- <button onclick="alert('点击')">点击</button> --><div class="box"></div><script>var box = document.getElementsByClassName("box")[0];// 1. on 事件box.onclick = function () {console.log("on 事件");}box.onclick = function () {console.log("第二个事件");}// 2.addEventListener()box.addEventListener("click", function () {console.log("事件1");});box.addEventListener("click", function () {console.log("事件2");});</script>
</body></html>
事件冒泡
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 400px;height: 400px;background-color: #f00;}.son1 {width: 200px;height: 200px;background-color: #0f0;}.son2 {width: 100px;height: 100px;background-color: #00f;}</style>
</head><body><div class="father"><div class="son1"><div class="son2"></div></div></div><script>var father = document.getElementsByClassName("father")[0];var son1 = document.getElementsByClassName("son1")[0];var son2 = document.getElementsByClassName("son2")[0];father.onmouseover = function (e) {console.log("进入" + e.target.className);}father.onclick = function () {console.log(this);}son1.onclick = function (e) {console.log(this);// 阻止事件冒泡e.stopPropagation();}son2.onclick = function (e) {console.log(this);// e.stopPropagation();}// 事件传递过程// 事件捕获// 目标阶段 （事件执行）// `事件冒泡`: 当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。// 在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，// 直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。// 阻止事件冒泡</script></body></html>
事件委托
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav {margin: 0;padding: 0;list-style: none;width: 700px;height: 30px;margin: 30px auto;}li {width: 100px;height: 30px;text-align: center;line-height: 30px;border: 1px solid #ccc;box-sizing: border-box;float: left;}</style>
</head><body><ul class="nav"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>// 事件委托：将原本绑定在子元素身上的事件，现在绑定到父元素身上，利用事件冒泡机制和 事件对象，触发当前事件。var nav = document.getElementsByClassName("nav")[0];nav.onclick = function (e) {// 事件的触发者// console.log(e.target);e.target.style.backgroundColor = "pink";}</script>
</body></html>
