目录
1-1 取消冒泡事件的方式一：子级内部设置stopPropagation()
1-2 取消冒泡事件的方式二：子级内部设置.cancelBubble = true;
2、默认事件的两种取消方式：preventDefault()，return false;
一、事件的两种绑定方式
1、on事件绑定方式
var div = document.querySelector('.div'); // on事件 div.onclick = function () { console.log("点击1"); } div.onclick = function () { console.log("点击2"); } // 只打印"点击2",原因：只能绑定最后一个方法 // 事件的移除 div.onclick = null;2、非on事件绑定方式
// 非on事件的绑定 // addEventListener('事件名', 回调函数, 冒泡方式) //注意：回调函数存在匿名和非匿名两种绑定形式。 document.addEventListener('click', function() { console.log("点击1"); }) document.addEventListener('click', function() { console.log("点击2"); }) // 非on事件可以同时绑定多个方法，被绑定的方法依次被执行 // addEventListener第三个参数(true|false)决定冒泡的方式 function fn () {} document.addEventListener('click', fn); // 事件的移除 document.removeEventListener('click', fn); // 注:绑定与移除需要指向同一个方法(地址)，即必须使用非匿名函数进行绑定
二、事件参数event
//存放事件信息的回调参数 body.onclick = function (ev) { // 事件的兼容 // event = ev | windows.event // ev = ev | event; ev参数调用的两种写法 //由于考虑到窗口的兼容问题，如果写入event 则调用参数需要带上前缀windows.event //如果写入ev，则调用则能省去前缀，通常被选择 // 点击传过来的是 MouseEvent,存储着鼠标触发事件的一系列信息 console.log(ev); console.log("body click"); }
三、事件的冒泡与默认事件
1、事件的冒泡：子位于父内部，子触发，父也一起触发事件。
<style type="text/css"> .sub { width: 100px; height: 100px; background-color: red; position: absolute; left: 50px; top: 50px; } .sup { width: 200px; height: 200px; background-color: orange; position: relative; /*position: absolute; top: 50px; left: 100px;*/ margin: 50px auto; } body { border: 1px solid black; } </style> <body> <div class="sup"> <div class="sub"></div> </div> </body> <script type="text/javascript"> var sub = document.querySelector('.sub'); var sup = document.querySelector('.sup'); var body = document.querySelector('body'); sub.onclick = function (ev) { console.log("sub click"); } sup.onclick = function (ev) { console.log("sup click"); } body.onclick = function (ev) { console.log(ev); console.log("body click"); } </script>
1-1 取消冒泡事件的方式一：子级内部设置stopPropagation()
sub.onclick = function (ev) { ev.stopPropagation(); console.log("sub click"); } sup.onclick = function (ev) { console.log("sup click"); } body.onclick = function (ev) { console.log(ev); console.log("body click"); }1-2 取消冒泡事件的方式二：子级内部设置.cancelBubble = true;
sub.onclick = function (ev) { ev.cancelBubble = true; console.log("sub click"); } sup.onclick = function (ev) { console.log("sup click"); } body.onclick = function (ev) { console.log(ev); console.log("body click"); }
2、默认事件的两种取消方式：preventDefault()，return false;
默认事件：浏览器自带的窗口事件，例如如鼠标右键唤出菜单
注意：若父级的默认事件被取消，子级的默认事件也会被取消
// 默认事件: 鼠标右键 oncontextmenu sub.oncontextmenu = function (ev) { ev.preventDefault(); console.log("sub menu click"); } body.oncontextmenu = function (ev) { console.log("body menu click"); return false; }
四、鼠标事件
1.常用鼠标事件
- onclick：鼠标点击
- ondblclick：鼠标双击
- onmousedown：鼠标按下
- onmousemove：鼠标移动
- onmouseup：鼠标抬起
- onmouseover：鼠标悬浮 onmouseenter
- onmouseout：鼠标移开 onmouseleave
- oncontextmenu：鼠标右键
var div = document.querySelector('.div'); // 双击 div.ondblclick = function () { console.log("双击了"); } // 鼠标按下 div.onmousedown = function () { console.log("按下"); } // 鼠标抬起 div.onmouseup = function () { console.log("抬起"); }2.常用事件参数ev
- ev.clientX：点击点X坐标
- ev.clientY：点击点Y坐标
- 查看鼠标event属性
document.onclick = function(ev){ console.log(ev) }
// 鼠标移动 div.onmousemove = function (ev) { // 鼠标在页面中的位置 console.log("x的坐标:", ev.clientX); console.log("y的坐标:", ev.clientY); console.log("移动"); }
五、键盘事件
1、键盘事件
- onkeydown：键盘按下
- onkeyup：键盘抬起
2、事件参数ev
- ev.keyCode：按键编号
- ev.altKey：alt特殊按键
- ev.ctrlKey：ctrl特殊按键
- ev.shiftKey：shift特殊按键
<head> <meta charset="UTF-8"> <title>键盘事件</title> <style type="text/css"> .div { width: 200px; height: 200px; background-color: red; /*margin: 50px auto;*/ position: absolute; top: 0; left: 100px; } </style> </head> <body> <div class="div"></div> </body> <script type="text/javascript"> var div = document.querySelector('.div'); // 操作一般标签,键盘事件绑定给document // 表单标签(可以录入文本),键盘事件绑定给表单标签 document.onkeydown = function (ev) { console.log(ev); //查看键盘的所有属性 // console.log(ev.keyCode); switch(ev.keyCode) { case 37: console.log("左"); div.style.left = div.offsetLeft - 3 + "px"; break; case 38: console.log("上"); div.style.top = div.offsetTop - 3 + "px"; break; case 39: console.log("右"); div.style.left = div.offsetLeft + 3 + "px"; break; case 40: console.log("下"); div.style.top = div.offsetTop + 3 + "px"; break; } } </script>
3、实现键盘控制平滑运动
<head> <meta charset="UTF-8"> <title>键盘控制平滑运动</title> <style type="text/css"> .div { width: 100px; height: 100px; background-color: red; position: absolute; top: 120px; left: 100px; } </style> </head> <body> <div class="div"></div> </body> <script type="text/javascript"> var div = document.querySelector('.div'); // 能否向左|右|上|下运动 var l_able = false; var t_able = false; var r_able = false; var b_able = false; //定时器，延迟16毫秒执行 setInterval(function () { if (r_able == true) { div.style.left = div.offsetLeft + 3 + 'px'; // 右 } // l_able为假,则后者短路,可以实现if的简写 l_able && (div.style.left = div.offsetLeft - 3 + 'px'); // 左 t_able && (div.style.top = div.offsetTop - 3 + 'px'); // 上 b_able && (div.style.top = div.offsetTop + 3 + 'px'); // 下 }, 16); document.onkeydown = function (ev) { switch(ev.keyCode) { case 37: l_able = true; break; case 38: t_able = true; break; case 39: r_able = true; break; case 40: b_able = true; break; } } document.onkeyup = function (ev) { console.log(ev); switch(ev.keyCode) { case 37: l_able = false; break; case 38: t_able = false; break; case 39: r_able = false; break; case 40: b_able = false; break; } } </script>
六、表单事件
- onfocus：获取焦点
- onblur：失去焦点
- onselect：文本被选中
- oninput：值改变
- onchange：值改变，且需要在失去焦点后才能触发
- onsubmit：表单默认提交事件
<body> <form action=""> <input type="text" name="usr"> <button type="submit">提交</button> </form> <div></div> </body> <script type="text/javascript"> var form = document.querySelector('form'); var ipt = document.querySelector('input'); var btn = document.querySelector('button'); var div = document.querySelector('div'); ipt.onfocus = function(){ console.log("input 焦点"); } ipt.onblur =function(){ console.log("input 失去焦点"); } ipt.onselect = function () { console.log("文本被选中了"); } // 值改变就触发 //innerText 自动触发下方框 ipt.oninput = function () { console.log("输入值正在改变"); div.innerText = this.value; } // 键盘抬起触发 ipt.onkeyup = function () { console.log("键盘抬起，值改变"); div.innerText = this.value; } // 改变了值，并且丢失焦点触发 ipt.onchange = function () { console.log("值改变 丢失焦点"); div.innerText = this.value; } // form的专有事件 form.onsubmit = function () { console.log("提交"); return false; } </script>
七、文档事件 :由window调用
- onload：页面加载成功
- onbeforeunload：页面退出或刷新警告，需要设置回调函数返回值，返回值随意
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>文档事件</title> <!-- 代码自身至下解析 --> <script type="text/javascript"> var div = document.querySelector('div'); console.log(div); // null </script> <script type="text/javascript"> // 文档加载完毕,触发 window.onload = function () { var div = document.querySelector('div'); console.log(div); } </script> </head> <body> <div class="div"></div> </body> <script type="text/javascript"> window.onbeforeunload = function () { return false; } </script> </html>
八、图片事件
- onerror：图片加载失败
<body> <img src="img/001.png" alt=""> </body> <script type="text/javascript"> var img = document.querySelector('img'); img.onerror = function () { console.log("图片加载失败了"); } </script>
九、页面事件
- onscroll：页面滚动
- onresize：页面尺寸调整
- window.scrollY：页面下滚距离
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>页面事件</title> <script type="text/javascript"> //浏览器的滚轮 window.onload = function () { window.onscroll = function () { console.log(window.scrollY); } window.onresize = function () { console.log(window) } } //页面标签的滚轮 window.onload = function(){ var d = document.querySelector('.d'); d.onscroll = function () { console.log(d); } } </script> <style> .d{ width: 150px; height : 150px; overflow: scroll; } </style> </head> <body> <div class="d"> br*100 </div> br*100 </body> </html>