【深入研究js事件】
深入研究js事件
-
-
-
- js学习笔记
-
- 1.事件委托
- 2.禁止复制文字和右键菜单
- 3.鼠标事件
- 4.跟随鼠标移动的天使
- 5.键盘事件
- 6.模拟京东按键输入内容
- 7模拟京东单号查询
-
-
js学习笔记
1.事件委托
事件委托 也称为事件代理，再
jQuery里面称为事件委派原理 ：不用给子节点单独设置事件监听器，而是直接将事件监听器设置在其父节点上，利用
冒泡原理影响设置的每个子节点作用：只操作了一次Dom，提高了程序的性能
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<ul>
<li>知否知否,点我应有弹框在手！li>
<li>知否知否,点我应有弹框在手！li>
<li>知否知否,点我应有弹框在手！li>
<li>知否知否,点我应有弹框在手！li>
<li>知否知否,点我应有弹框在手！li>
ul>
<script>
// 原理：给父节点设置监听器 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
alert('知否知否,点我应有弹框在手！');
// e.target得到被点击的对象
e.target.style.color = 'red';
})
script>
body>
html>
2.禁止复制文字和右键菜单
- 禁用鼠标右键菜单
contextmenu阻止默认事件preventDefault
<script>
// 禁用右键菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault(); // 阻止默认事件
})
script>
- 禁止鼠标选中
selectstart
<script>
// 禁止鼠标选中
document.addEventListener('selectstart',function(){
e.preventDefault();
})
script>
3.鼠标事件
-
鼠标在 可视化区域的坐标
e.clientXe.clientY -
鼠标在页面的坐标
pageXpageY -
鼠标在电脑屏幕的坐标
screenXscreenY
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
body{
height: 3000px;
}
style>
head>
<body>
<script>
document.addEventListener('click',function(e){
// console.log(e);
// e.clientX e.clientY得到鼠标在可视化区域的坐标
// 坐标与屏幕是否滚动无关
console.log(e.clientX);
console.log(e.clientY);
// page 鼠标在页面文档的 坐标
console.log(e.pageX);
console.log(e.pageY);
// screen 鼠标在电脑屏幕的 坐标
console.log(e.screenX);
console.log(e.screenY);
})
script>
body>
html>
4.跟随鼠标移动的天使
业务逻辑：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
img{
position: absolute;
}
style>
head>
<body>
<img src="https://img-blog.csdnimg.cn/img_convert/0d1c3156ee79e88e57a59c60cb1a9498.gif" alt="移动的天使">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove',function(e){
// 获取移动的鼠标位置
var x = e.pageX;
var y = e.pageY;
// console.log('x坐标是:'+x+', y坐标是:'+y);
// 把坐标赋给图片 注意需要加上单位 px
pic.style.left = x -48 + "px";
pic.style.top = y - 40 + "px";
})
script>
body>
html>
5.键盘事件
-
onkeyup 按键弹起时触发
-
onkeydown 按键按下触发
-
onkeypress 按键按下触发 不识别功能键
ctrl shift 箭头等 -
执行顺序 onkeydown onkeypress onkeyup
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <script> // 1.onkeydown 键盘按下 document.addEventListener('keydown',function(){ console.log('键盘按下之onkeydown'); }); // 2.onkeyup 键盘抬起 document.addEventListener('keyup',function(){console.log('按键抬起之onkeyup'); }); // 3.onkeypress 键盘按下 document.addEventListener('keypress',function(){ console.log('按键按下之onkeypress'); }); script> body> html> -
判断按下了那个键 keyCode属性 按键对应的
ASCII值
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
document.addEventListener('keydown',function(e){
// console.log(e);
console.log('keydown:'+e.keyCode);
if(e.keyCode===65){
alert('您按下的是a键');
}
else {
alert('您按下的不是a键');
}
// keyup 和 keydown事件不区分字母大小写 a 和 A 都是 65
// 可以通过keypress事件 区分字母大小写
});
document.addEventListener('keypress',function(e){
console.log('keypress:'+e.keyCode);
})
script>
body>
html>
6.模拟京东按键输入内容
- 核心思路：检测用户是否按下 s 键，如果按下s键 ，光标定位到搜索框
- 使用键盘事件对象：e.keyCode判断按下的是否是s键
- 搜索框获得焦点： 使用js的focus()方法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
搜索框: <input type="test">
<script>
// 获取搜索框对象
var search = document.querySelector('input');
// 添加事件 如果用keydown 则会将s写进去
document.addEventListener('keyup',function(e){
// console.log(e.keyCode); 测试s的ascii码值
if(e.keyCode===83){
search.focus();
}
});
script>
body>
html>
7模拟京东单号查询
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
.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 {
content: '';
width: 0;
height: 0;
position: absolute;
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">123div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
div>
<script>
var con = document.querySelector('.con');
var jd_input = document.querySelector(".jd");
jd_input.addEventListener('keyup',function(){
// console.log('输入一个内容');
if(this.value==''){
con.style.display='none';
}
else{
con.style.display = 'block';
con.innerText=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>
keydown和keypress在文本框的特点：事件触发的时候，文字还没有落入文本框con.innerText=this.value
keyup触发时，文件已经落入文本框中啦