事件委托（代理）鼠标事件对象键盘事件案例：跟随鼠标移动的图片案例：模拟京东按键输入内容

科技2022-07-12 142

事件委托

也称为事件代理，在jQuery里称为事件委派

是事件冒泡带来的好处

原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

提高了程序的性能

例：

<body> <ul> <li>点击</li> <li>点击</li> <li>点击</li> <li>点击</li> </ul> <script> var ul = document.querySelector("ul"); ul.addEventListener("click", function (e) { //给ul 设置的事件，但点击每个li 都会弹出对话框 alert("我是li"); //也可给li设置点击后li的背景颜色变换 e.target.style.backgroundColor = "pink"; }); </script> </body>

常用的鼠标事件（提升版）

常用鼠标事件：

鼠标事件触发条件contextmenu禁止鼠标右键菜单selectstart禁止选中文字 contextmenu 主要用来控制何时显示上下文菜单，主要用于程序员取消默认的上下文菜单 div.addEventListener("contextmenu", function (e) { e.preventDefault(); }); selectstart 禁止选中文字 div.addEventListener("selectstart", function (e) { e.preventDefault(); });

鼠标事件对象

client鼠标在可视区的 X 和 Y 坐标

e.clientX 返回鼠标相对于浏览器窗口可视区的坐标X。

e.clientY 返回鼠标相对于浏览器窗口可视区的坐标Y

page 鼠标在页面文档的 X 和 Y 坐标

e.pageX 返回鼠标相对于页面文档的坐标X IE9+ 支持

e.pageY 返回鼠标相对于页面文档的坐标Y IE9+ 支持

screen 鼠标在电脑屏幕的 X 和 Y 坐标

e.screenX 返回鼠标相对于电脑屏幕的 X 坐标

e.screenY 返回鼠标相对于电脑屏幕的 Y 坐标

document.addEventListener("click", function (e) { //1.client : 鼠标在可视区的 x 和 y 坐标 console.log(e.clientX); console.log(e.clientY); //2.page : 鼠标在页面文档的 x 和 y 坐标 console.log(e.pageX); console.log(e.pageY); //3.screen 鼠标在电脑屏幕的 X 和 Y 坐标 console.log(e.screenX); console.log(e.screenY); });

案例：跟随鼠标移动的图片

案例分析：

鼠标不断地移动使用鼠标事件 mousemove在页面中，给document 注册事件图片要移动距离，而且不占位置，使用绝对定位即可核心原理：每次鼠标移动，我没都会获得新的鼠标坐标，把这个 x 和 y 坐标设为图片 top left 值即可 <style> img { position: absolute; width: 80px; height: 80px; } </style> </head> <body> <img src="images/pig.gif" alt="" /> <script> var img = document.querySelector("img"); document.addEventListener("mousemove", function (e) { //mousemove 只要移动鼠标，都会触发这个事件 var x = e.pageX; var y = e.pageY; //千万不要忘记给x y 加单位 img.style.left = x + "px"; img.style.top = y + "px"; }); </script> </body>

键盘事件

onkeyup：释放某个键盘键时触发。onkeydown：在键盘上按下某个键时触发。onkeypress：按下某个键盘键时触发。但不能识别功能键ctrl shift 左右箭头等。执行顺序：down -> press ->up更多使用：keyup keydown //1.onkeyup 释放某个键盘键时触发 document.onkeyup = function () { console.log("我弹起了"); }; // 或 document.addEventListener('keyup',function(){ // console.log("我弹起了"); // }) //2.onkeydown 在键盘上按下某个键时触发 document.onkeydown = function () { console.log("我弹起了"); }; //3.onkeypress 按下某个键盘键时触发。但不能识别功能键ctrl shift 左右箭头等。 document.onkeypress = function () { console.log("我弹起了"); };

键盘事件对象

keyup keydown 都不区分大小写值 a和A 得到的都是65

keypress 区分大小写值比如：a和A 得到的都是65

注意：keydown 和 keypress 在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中，keyup 事件触发的时候，文本已经落入文本框里了

//键盘事件对象的keyCode属性可以得到想要的ASCII码值 document.addEventListener("keyup", function (e) { if (e.keyCode == 65) { console.log("您按下了a键"); } else { console.log("您没有按下a键"); } });

案例：模拟京东按键输入内容

当按下s键，光标就自动定位到搜索框核心思路：

检测用户是否按下s键，如果按下了，就把光标自动定位到搜索框使用键盘事件对象里面的keyCode来判断用户按下的是否是s键搜索框获得焦点：使用js中的 focus()方法 <input type="text" /> <script> var search = document.querySelector("input"); document.addEventListener("keyup", function (e) { console.log(e.keyCode); if (e.keyCode === 83) { search.focus(); } }); </script>

Processed: 0.013, SQL: 8