【深入研究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>Document</title>
</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.clientX e.clientY
鼠标在页面的坐标 pageX pageY
鼠标在电脑屏幕的坐标 screenX screenY

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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>Document</title><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);// 把坐标赋给图片 注意需要加上单位 pxpic.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>Document</title>
</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>Document</title>
</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>Document</title>
</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>Document</title><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">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(){// 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触发时，文件已经落入文本框中啦

【深入研究js事件】相关推荐

js 监听安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输使用场景类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息技术原理跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...
Linux事件循环阻塞,深入浅析Node.js 事件循环、定时器和process.nextTick()
什么是事件循环尽管JavaScript是单线程的,但通过尽可能将操作放到系统内核执行,事件循环允许Node.js执行非阻塞I/O操作. 由于现代大多数内核都是多线程的,因此它们可以处理在后台执行的多 ...
给RadioButtonList这些加JS事件
给RadioButtonList这些加JS事件 <script language="javascript" type="text/javascript&qu ...
JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...
js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){resizeTo(640,480);//设置浏览器窗口尺寸moveTo( ...
JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲事件的冒泡机制和添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段捕获阶段是指从父层往子层找.比如 <body> ...
js事件之神奇的onclick
21:58 2013/7/1 <a href="#" οnclick="alert(123124);" >链接</a> 意思是鼠标点击链 ...
js事件流的三个阶段
2019独角兽企业重金招聘Python工程师标准>>> js事件流分为三个阶段: 1.事件捕获:当某个元素出发某个事件,顶层对象document就会发出一个事件流, 随着DOM树的节 ...
js事件监听器用法实例详解
这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体 ...

【深入研究js事件】

深入研究js事件

js学习笔记

1.事件委托

2.禁止复制文字和右键菜单

3.鼠标事件

4.跟随鼠标移动的天使

5.键盘事件

6.模拟京东按键输入内容

7模拟京东单号查询

【深入研究js事件】相关推荐

最新文章

热门文章