js事件委托-事件对象以及相关案例
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js事件委托-事件对象以及相关案例相关的知识，希望对你有一定的参考价值。
接上一章
事件委托
<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.backgroundColor = pink;
)
</script>
</body>
常用的鼠标事件
<body>
我是一段不愿意分享的文字
<script>
//1.contexmenu 我们可以禁用右键菜单
document.addEventListener(contexmenu,function(e)
e.preventDefault();
)
//2.禁止选中文字selectstart
document.addEventListener(selectstart, function(e)
e.preventDefault();
)
</script>
</body>
鼠标事件对象
<script>
//鼠标事件对象 MouseEvent
document.addEventListener(click,function(e)
//1.client 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log(--------------------);
//2.page 鼠标在可视区的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log(--------------------);
//3.screen 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log(--------------------);
)
</script>
案例：跟随鼠标的天使
这个天使图片一直跟随鼠标移动
<style>
img
position: absolute;
top:2px;
</style>
</head>
<body>
<img src="1.jpg" alt="">
<script>
var pic = document.querySelector(img);
document.addEventListener(mousemove,function(e)
//1.mousemove 只要我们鼠标移动1px 就会触发这个事件
//console.log(1);
//2.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，就可以移动图片
var x = e.pageX;
var y = e.pageY;
console.log(x坐标是 + x, y坐标是 + y);
//3.千万不要忘记给left 和top
pic.style.left = x - 50 + px;
pic.style.top = y - 40 + px;
)
</script>
</body>
8.键盘灯常用事件
8.1常用键盘事件
<script>
//常用的键盘事件
//1.keyup 按键弹起的时候触发
document.addEventListener(keyup,function()
console.log(我弹起了);
)
//2.keydown按键按下的时候触发 能识别功能键 如 ctrl shift 左右箭头
document.addEventListener(keydown,function()
console.log(我按下了down);
)
//3.keypress 按键按下的时候触发 不能识别功能键 如 ctrl shift 左右箭头
document.addEventListener(keypress,function()
console.log(我按下了press);
)
//4.三个事件的执行顺序 keydwon -- keypress -- keyup
</script>
案例：模拟京东按键输入内容
- 当我们按下s键，光标就定位到搜索框
案例分析：
<body>
<input type="text">
<script>
var search = document.querySelector(input);
document.addEventListener(keyup,function(e)
if(e.keyCode === 83)
search.focus();
)
</script>
</body>
案例：模拟京东快递单号查询
- 要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。
分析：
<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>
// 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
// 表单检测用户输入： 给表单添加键盘事件
// 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
// 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
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>
以上是关于js事件委托-事件对象以及相关案例的主要内容，如果未能解决你的问题，请参考以下文章