注册事件的两种方式:
<button>传统注册事件</button> <button>方法监听事件</button> <button>ie9 attacEvent</button> <script> var btns = document.querySelectorAll('button'); //1. 传统注册事件 //特点:注册事件的唯一性 同一个元素只能设置一个处理函数 最后的函数会覆盖前边的注册函数 btns[0].onclick = function () { alert('hi~~'); } btns[0].onclick = function () { alert('hao a you'); } //2.方法监听事件 IE9之前不支持 可以用attachEvent()代替 //w3c标准推荐方法 addEventListener()他是一个方法 //特点:同一个元素同一个事件可以注册多个监听器 按照注册顺序依次执行 //addEventListener里的事件类型是字符串 必须加引号 并且不带on btns[1].addEventListener('click', function () { alert('第一次'); }) btns[1].addEventListener('click', function () { alert('第二次'); }) //3. attachEvent ie9以前的版本支持 几乎不用 btns[2].attachEvent('onclick', function () { alert('11'); }) </script>
删除事件
<div>1</div> <div>2</div> <div>3</div> <script> var divs = document.querySelectorAll('div'); divs[0].onclick = function () { alert('11'); //1. 传统方式解绑事件 divs[0].onclick = null;//解绑事件 点击触发一次函数 再次点击无反应 } //2. 方法监听注册事件 removeEventListener divs[1].addEventListener('click', fn) //fn不需要调用加小括号 function fn() { alert('22'); divs[1].removeEventListener('click', fn); } //3. divs[2].attachEvent('onclick', fn1); function fun1 () { alert('33'); divs[2].detachEvent('onclicl', fn1); } </script>
DOM事件流的三个阶段
<div class="father">father <div class="son">son</div> </div> <script> //dom事件流 三个阶段 //1. JS代码中只能执行捕获或者冒泡其中一个阶段 //2. onclick和attachEvent(ie)只能得到冒泡阶段、 //3. 捕获阶段 如果addEventListener 第三个参数true 处于捕获阶段 document->htm->body->father->son // var son = document.querySelector('.son'); // son.addEventListener('click', function () { // alert('son'); // }, true); // var father = document.querySelector('.father'); // father.addEventListener('click', function () { // alert('father'); // }, true); //先弹出father 再弹出son //4. 冒泡阶段 如果addEventListener 第三个参数false 处于捕冒泡阶段 son->father->body->html->docment var son = document.querySelector('.son'); son.addEventListener('click', function () { alert('son'); }, false); var father = document.querySelector('.father'); father.addEventListener('click', function () { alert('father'); }, false); //先弹出son 再弹出father document.addEventListener('click', function () { alert('docment'); }) </script>
事件对象
<div>123</div> <script> var div = document.querySelector('div'); //传统的点击事件 div.onclick = function (e) { // console.log(e); // console.log(window.e);//ie678的写法 //解决兼容性写法 e = e || window.e; } // 方法监听事件e = e || window.e // div.addEventListener('click', function(e) { // console.log(e); // }) //1. event就是一个事件对象 写到我们监听函数的 小括号里的 当形参来看 //2. 事件对象只有有了事件才会存在,他是系统给我们自动创建的 不需要我们传递参数 //3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的:比如鼠标点击里边就包含里鼠标的相关信息(鼠标坐标),如果是键盘事件里面包含键盘事件的相关信息(判断客户按下了哪个键) //4. 这个事件对象我们可以自己命名 比如event、evt、e //5. 这个时间也有兼容性问题 ie678通过window.evnet //兼容性写法: e = e || window.e; </script>
事件对象属性和方法
<div>123</div> <a href="https://www.baidu.com/">百度</a> <form action="https://www.baidu.com/"> <input type="submit" value="提交" name="sub"> </form> <script> //常见事件对象的属性和方法 //1. 返回事件类型 var div = document.querySelector('div'); div.addEventListener('click', fn); div.addEventListener('mouseover', fn); div.addEventListener('mouseout', fn); function fn (e) { console.log(e.type); } //2. 阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交 var a = document.querySelector('a'); a.addEventListener('click', function (e) { e.preventDefault();//DOM标准写法 }) //传统的注册方式 a.onclick = function (e) { //普通浏览器 e.preventDefault();方法 // e.preventDefault(); //低版本浏览器 ie678 returnValue属性 // e.returnValue; //我们可以利用return false也能组织默认行为 没有兼容性问题 return false;//缺点:return后的代码不执行了 而且只限用传统的注册方式 } </script>
事件对象阻止默认行为
<div>123</div> <a href="https://www.baidu.com/">百度</a> <form action="https://www.baidu.com/"> <input type="submit" value="提交" name="sub"> </form> <script> //常见事件对象的属性和方法 //1. 返回事件类型 var div = document.querySelector('div'); div.addEventListener('click', fn); div.addEventListener('mouseover', fn); div.addEventListener('mouseout', fn); function fn (e) { console.log(e.type); } //2. 阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交 var a = document.querySelector('a'); a.addEventListener('click', function (e) { e.preventDefault();//DOM标准写法 }) //传统的注册方式 a.onclick = function (e) { //普通浏览器 e.preventDefault();方法 // e.preventDefault(); //低版本浏览器 ie678 returnValue属性 // e.returnValue; //我们可以利用return false也能组织默认行为 没有兼容性问题 return false;//缺点:return后的代码不执行了 而且只限用传统的注册方式 } </script>
事件委托
<ul> <li>1111111</li> <li>1111111</li> <li>1111111</li> <li>1111111</li> <li>1111111</li> </ul> <script> // 事件委托的原理: // 不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子结点 var ul = document.querySelector('ul'); ul.addEventListener('click', function (e) { // alert('666'); 点li弹出666 //e.target可以得到点击的对象 //e.target.style.backgroundColor = 'pink'; //点击哪个li就变色 //点击前清除所有的背景色 for (var i = 0; i < ul.children.length; i++) { ul.children[i].style.backgroundColor = ''; } e.target.style.backgroundColor = 'pink'; }) </script>
常用的鼠标事件
我是一段不愿意分享的文字 <script> //1. 禁用右键菜单 contextmenu document.addEventListener('contextmenu', function (e) { e.preventDefault(); }) // 2. 禁止选中文字 selectstart document.addEventListener('selectstart', function (e) { e.preventDefault(); }) </script>
鼠标事件对象
<style> body { height: 3000px; } </STyle> </head> <body> <script> //鼠标事件对象 MouseEvent document.addEventListener('click', function(e) { //1. client 鼠标在可视区域的坐标(和滚动条无关) console.log(e.clientX); console.log(e.clientY); //2. page 鼠标在页面文档的坐标(和滚动条有关) console.log(e.pageX); console.log(e.pageY); }) </script>
跟随鼠标的天使
<style> img { position: absolute; width: 50px;height: 50px; } </style> </head> <body> <img src="images/ts.jpg" alt=""> <script> var pic = document.querySelector('img'); document.addEventListener('mousemove', function (e) { //1. mousemove 只要鼠标移动1px 就会出发这个事件 // console.log(1); //2.核心原理:每次移动鼠标,我们都会获得一个最新的鼠标坐标 把这个xy坐标作为哦图片的top left值 就可以移动图片了 var x = e.pageX; var y = e.pageY; console.log('x的坐标是'+x,'y的坐标是'+y); pic.style.left = x-25+'px';//-高度的一半25 为了让图在鼠标的中间位置 pic.style.top = y-25+'px'; }); </script>
常用的键盘事件
<script> //常用的键盘事件 //1. keyup 按键弹起的时候触发 // document.onkeyup = function () { // console.log('我弹起了'); // } document.addEventListener('keyup', function () { console.log('我弹起了'); }) //2. keydown 按键按下的时候触发 可以识别功能键 document.addEventListener('keydown', function () { console.log('我按下了down'); }) //3. keypress 按键按下的时候触发 不识别功能键 document.addEventListener('keypress', function () { console.log('我按下了press'); }) //4.三个事件的执行顺序 keydown->keypress->keyup </script>
键盘事件对象-keyCode属性
<script> //键盘事件对象中的keyCode属性可以得到相应键的ASCII码值 //1. keyup keydown 不区分字母大小写a和A得到都是65 document.addEventListener('keyup' ,function (e) { console.log('keyup'+e.keyCode); /* 键盘输入a和A得到都是65 */ }) //2. keypress 区分字母大小写 document.addEventListener('keypress' , function (e) { console.log('keypress'+e.keyCode);//输入a是97 A是65 }) </script>
模拟京东案输入框案例
<input type="text"> <script> //核心思路:检测用户是否按了S键,如果按下 就把光标定到搜索框里 //使用键盘事件对象里边的keyCode 判断用户按下的是否是s //搜索框获得焦点:使用js里边的focus()方法 var search = document.querySelector('input'); document.addEventListener('keyup', function (e) { ///用keyup 不同keydown :keyup抬起才触发 keydown会把s也放入搜索框内 if (e.keyCode == 83) { search.focus(); } }) </script>
京东快递单号查询案例
<!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>Document</title> <style> .search { position: relative; /* width: 178px; */ margin: 100px; } .con { display: none; position: absolute; top: -40px; width: 171px; border: 1px solid rgba(0, 0, 0, 2); box-shadow: 0 2px 4px rgba(0, 0, 0, 2); padding: 5px 0; font-size: 18px; line-height: 20px; color: #333; } .con::before { position: absolute; content: ''; width: 0; height: 0; top: 28px; left: 18px; border: 8px solid #000; border-style: solid dashed dashed; border-color: #fff transparent transparent ; } </style> </head> <body> <div class="search"> <div class="con"> 123 </div> <input type="text" placeholder="请输入您的快递单号" class="jd"> </div> <script> //快递单号输入内容时,上面的大号字体盒子(con) 显示(这里的子号更大) //表单检测用户输入:给表单添加键盘事件 //同时把快递单号里面的值(value) 获取过来赋值给con盒子 (innerHTML)作为内容 //如果快递单号为空 则隐藏大号字体盒子(con)盒子 var con = document.querySelector('.con'); var jd_input = document.querySelector('.jd'); jd_input.addEventListener('keyup', function() { if (this.value == '') { con.style.display = 'none'; }else { con.style.display = 'block'; con.innerHTML = this.value; } }) </script> </body> </html>