标签：console 鼠标 高级 事件 document event log
目录
事件委托（代理、委派）
- 事件冒泡本身的特性，会带来坏处，也会带来好处，需要灵活使用
- 事件委托也称为事件代理，在 jQuery 里面称为事件委派
应用场景
生活中有如下场景：
- 100 个学生，100 个快递员，100份快递，领取各自的快递
- 解决方案：快递员将100份快递委托给班主任，班主任将快递放到办公室，学生下课自行领取
实际开发中的场景：
- ul 下有多个 li，要求点击每一个 li 都会执行相应的处理程序
- 以前需要给每一个 li 注册事件，访问 DOM 的次数大大增加，延长了整个页面的交互就绪时间，效率极低
事件委托的原理
不是每个子结点单独设置事件监听器，而是将事件监听器设置在其父节点上，然后利用冒泡原理影响设置每一个子节点
以上的案例中：
- 我们直接给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li
- 因为点击 li，事件就会冒泡到 ul 上，ul 有了注册事件，就会触发事件监听器
事件委托的作用
- 只操作了一次 DOM，提高了程序的性能
<body>
<ul>
<li>路人甲</li>
<li>炮灰乙</li>
<li>流氓丙</li>
<li>土匪丁</li>
<li>小二戊</li>
</ul>
<script>
// 事件委托的核心原理
// 给父节点添加监听器，利用冒泡原理影响设置每个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function(event) {
// alert('你瞅啥！！！');
// e.target 可以得到我们点击的对象
for (var i = 0; i < ul.children.length; i++) {
ul.children[i].style.backgroundColor = '';
}
event.target.style.backgroundColor = 'lightblue';
}, false);
</script>
</body>常用的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
| contextmenu | 禁止鼠标右键菜单 |
| selectstart | 禁止选中文字 |
禁止鼠标右键菜单
- contextmenu
- 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
<body>
该文本禁止右键菜单
<script>
// 显示右键菜单：contextmenu，我们可以禁用它
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
</script>
</body>禁止鼠标选中
- selectstart
- 开始选中
<body>
该文本禁止选中文字
<script>
// 选中文字：selectstart，我们可以禁用它
document.addEventListener('selectstart', function(event) {
event.preventDefault();
});
</script>
</body>鼠标事件对象
- event 对象代表事件的状态，与事件相关的一系列信息的集合
- 现阶段主要使用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器窗口可视区的 X 坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区的 Y 坐标 |
| e.pageX | 返回鼠标相对于文档页面的 X 坐标；IE9+ 支持 |
| e.pageY | 返回鼠标相对于文档页面的 Y 坐标；IE9+ 支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的 X 坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的 Y 坐标 |
<script>
// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(event) {
console.log(event);
console.log('----------------------');
// 1.client：返回鼠标相对于浏览器窗口可视区的 X 和 Y 坐标
console.log(event.clientX);
console.log(event.clientY);
console.log('----------------------');
// 2.page：返回鼠标相对于页面文档的 X 和 Y 坐标
// 开发中经常使用，重点；兼容性问题：IE9+
console.log(event.pageX);
console.log(event.pageY);
console.log('----------------------');
// 3.screen：返回鼠标相对于电脑屏幕的 X 和 Y 坐标
console.log(event.screenX);
console.log(event.screenY);
});
</script>案例：跟随鼠标的天使
案例分析：
- 鼠标不断移动，使用鼠标移动事件：mousemove
- 在页面中移动，给 document 注册事件
- 图片要移动距离，而且不占位置，使用绝对定位
- 核心原理：每次鼠标移动，都会获得最新的鼠标坐标，把这个 x 和 y 坐标作为图片的 top 和 left 值就可以移动图片
<style>
img {
position: absolute;
transform: translate(-50%, -50%);
/* 去掉鼠标箭头，只剩天使 */
cursor: none;
}
</style><body>
<img src="images/angel.gif" alt="">
<script>
var picture = document.querySelector('img');
// mousemove 只要鼠标在页面中移动 1px,就会触发此事件
document.addEventListener('mousemove', function(event) {
var x = event.pageX;
var y = event.pageY;
// 需要给 left 和 top 添加单位 px
picture.style.left = x + 'px';
picture.style.top = y + 'px';
});
</script>
</body>常用的键盘事件
常用的键盘事件
- 事件除了使用鼠标触发，还可以使用键盘触发
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个按键被松开时触发 |
| onkeydown | 某个按键被按下时触发 |
| onkeypress | 某个按键被按下时触发 |
注意：
- 如果使用 addEventListener 不需要加 on
- onkeypress 与另外两个键盘事件的区别：不能识别功能键，如：ctrl、shift、箭头等
- 按下并弹起某个按键的过程中，三个事件的执行顺序：onkeydown -- onkeypress -- onkeyup
<script>
// 常用的键盘事件
// 1.onkeyup 按键弹起时触发
// 传统注册方式
// document.onkeyup = function(event) {
// console.log(event.key + ' 被弹起');
// }
// addEventListener()
document.addEventListener('keyup', function(event) {
console.log(event.key + ' 被弹起了');
});
// 2.onkeydown 按键按下时触发
document.addEventListener('keydown', function(event) {
console.log(event.key + ' 被按下了down');
});
// 3.onkeypress 按键按下时触发，不能识别功能键，比如：ctrl、shift、箭头等
document.addEventListener('keypress', function(event) {
console.log(event.key + ' 被按下了press');
});
</script>
键盘事件对象
| 键盘事件对象的属性 | 说明 |
|---|---|
| keyCode | 返回该键的 ASCII 码值 |
注意：
- onkeydown 和 onkeyup：不区分字母大小写
- onkeypress：区分字母大小写
- 在实际开发中，我们更多的使用 keydown 和 keyup，能识别所有按键（包括功能键）
- keypress 不识别功能键，但是该事件的 keyCode 属性能区分字母大小写，返回不同的 ASCII 码值
<script>
// 键盘事件对象
// keyCode 属性可以得到相应按键的 ASCII 码值
// 1.keyup 和 keydown 事件不区分字母大小写。a 和 A 输出的都是 65
document.addEventListener('keyup', function(event) {
console.log(event.keyCode);
});
document.addEventListener('keydown', function(event) {
console.log(event.keyCode);
})
// 2.keypress 事件区分字母大小写。a 输出的是 97，A 输出的是 65
document.addEventListener('keypress', function(event) {
console.log(event.keyCode);
});
</script> <script>
// 键盘事件对象
// 利用 keyCode 判断哪个键被按下
document.addEventListener('keypress', function(event) {
if (event.keyCode === 97) {
console.log('被按下了的键是a!');
} else {
console.log('被按下了的键不是a!');
}
})
</script>模拟京东按键输入内容
案例分析
- 核心思路：检测用户是否按下 s 键，如果按下 s 键，将光标定位到搜索框中
- 使用键盘事件对象中的 keyCode 属性判断用户按下的是否是 s 键
- 搜索框获得焦点：使用 JS 里面的 focus() 方法
<body>
<input type="text">
<script>
var search = document.querySelector('input');
// 使用 keydown 会在按下 s 键时将 s 输入搜索框
// keyup 不会
document.addEventListener('keyup', function(event) {
if (event.keyCode === 83) {
search.focus();
}
});
</script>
</body>京东快递单号查询
要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容
案例分析
- 快递单号输入内容时，上面的大号字体盒子（con）显示（字号更大）
- 表单检测用户输入：给表单键入键盘事件
- 同时将快递单号里面的值（value）获取过来赋给 con 盒子（innerHTML）
- 如果快递单号里面的内容为空，则隐藏大号字体盒子（con）
- 失去焦点，隐藏 con 盒子
- 获得焦点，并且文本框内容不为空，显示 con 盒子
注意：
- keydown 和 keypress 事件触发时，文字还没有写入文本框中
- keyup 事件触发时，文字已经写入文本框中
<body>
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
// 模拟京东快递单号查询案例
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
jd_input.addEventListener('keyup', function() {
// 如果快递单号里面的内容为空，则隐藏大号字体盒子（con）
if (this.value == '') {
con.style.display = 'none';
} else {
con.style.display = 'block';
// 将快递单号里面的值（value）获取过来赋给 con 盒子（innerHTML）
con.innerHTML = this.value
};
});
// 失去焦点，con 隐藏
jd_input.addEventListener('blur', function() {
con.style.display = 'none';
});
// 获得焦点，且输入框内容不为空，con 显示
jd_input.addEventListener('focus', function() {
if (this.value !== '') {
con.style.display = 'block';
}
});
</script>
</body>标签：console,鼠标,高级,事件,document,event,log 来源： https://blog.csdn.net/weixin_41909678/article/details/119044555
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。