offset

翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素

获得元素距带有定位父元素的位置

获得元素自身的大小（宽度高度）

注意：返回的数值都不带单位

offset系列属性	作用
element.offsetParent	返回该元素带有定位的父级元素，如果父级都没有定位则返回body
element.offsetTop	返回元素距带定位父元素上方的偏移
element.offsetLeft	返回元素距带定位父元素左方的偏移
element.offsetWidth	返回自身的宽度（包含 padding border content）
element.offsetHeight	返回自身的高度（包含 padding border content）

事件对象

event就是一个事件对象，写到侦听函数的小括号里当形参来看

e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie678
e.type	返回事件的类型比如click mouseover 不带on
e.cancelBubble	阻止事件冒泡非标准 ie678
e.returnValue	方法：阻止默认行为非标准比如不让链接跳转 ie678
e.preventDefault()	方法：阻止默认行为标准比如不让链接跳转
e.stopPropagation()	阻止事件冒泡标准

事件鼠标的坐标

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器可视窗口的X坐标
e.clientY	返回鼠标相对于浏览器可视窗口的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 ie9以上
e.pageY	返回鼠标相对于文档页面的Y坐标 ie9以上
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

键盘事件

1.onkeyup 某个按键被松开时触发
2.onkeydown 某个按键按下时触发
3.onekeypress 某个按键按下时触发-不识别功能键（区分大小写）
执行顺序 keydown-keypress-keyup

var document = document.documentElementdocument.addEventListener('keyup',function(e){console.log('某个按键谈起了up它的阿斯克码值是' + e.keyCode)if(e.keyCode == 97){window.alert('您按下了数字1  成就值+9')}else{alert('按下1试试')}
})document.addEventListener('keydown',function(e){console.log('某个按键按下了down它的阿斯克码值是'+e.keyCode)
})document.addEventListener('keypress',function(e){console.log('某个按键按下了press它的阿斯克码值是'+e.keyCode)
})var input = document.querySelector('input')document.addEventListener('keyup',function(e){if(e.keyCode == 83){input.focus()}
})

输入框放大显示的案例

文本框输入内容时，上面大号字体盒子显示文本框的内容
如果文本框为空就隐藏大号盒子
使用 keydown keypress 触发的时候键盘按下文字还没有落入文本框中所以使用keyup
当文本框失去焦点时就隐藏大号盒子
重新获取焦点并且文本框内容不为空就显示大号盒子

<style>.con{width: 660px;margin: 80px auto;position: relative;}input{width: 300px;display: block;height: 40px;line-height: 40px;font-size: 14px;padding: 0px 12px;margin: 0 auto;}.big{position: absolute;width: 440px;border: 1px solid #999;line-height: 60px;font-size: 26px;left: 110px;top: -70px;padding: 0px 12px;display: none;}.big::before{content: '';position: absolute;top: 60px;left: 32px;border-top: 10px solid black;border-left: 6px solid transparent;/* border-bottom: 10px solid black; */border-right: 6px solid transparent;}.big::after{position: absolute;top: 60px;left: 32px;border-top: 6px solid #fff;border-left: 6px solid transparent;/* border-bottom: 10px solid black; */border-right: 6px solid transparent;content: "";}
</style>
<img src="06.png" alt="" style="display: block">
<div class="con"><div class="big">123</div><input type="text">
</div><script>var big = document.querySelector('.big'),input = document.querySelector('input');input.addEventListener('keyup',function(e){if(this.value !== ''){big.innerHTML = this.valuebig.style.display = 'block'}else{big.style.display = 'none'}})//input.onblur//input.focusinput.addEventListener('blur',function(){big.style.display = 'none'})input.addEventListener('focus',function(){if(input.value !== ''){big.style.display = 'block'}})
</script>

offset、事件对象、事件鼠标的坐标、键盘事件、输入框放大显示的案例相关推荐

浏览器滑块、鼠标事件、鼠标滑轮、键盘事件详细说明
鼠标滑轮必须是在 mousewheel 事件中注册事件 window.addEventListener("mousewheel ",function(){}); event ...
小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录一.WXML 模板语法数据绑定事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式在事件处理函数中为 ...
python键盘触发事件_Python爬虫之Selenium实现键盘事件
一.常用按键按键说明 Keys.BACK_SPACE 回退键(BackSpace) Keys.TAB 制表键(Tab) Keys.ENTER 回车键(Enter) Keys.SHIFT 大小写转换 ...
Web基础——JavaScript之事件绑定与事件对象
目录 1.事件的绑定 2.事件的绑定(注意事项) 3.失去焦点和获得焦点 4.键盘事件 5.鼠标事件 6.表单事件 7.页面加载事件 8.下拉框事件 9.事件对象 10.currentTarget和t ...
【12-16】事件对象
一.事件对象的属性 1.键盘事件: 只有window,document,表单元素可以触发 keydown 按键按下 keypress 按键按住 keyup(触发一次) 按键弹起 2. ...
2020.11.18第十三章事件（事件处理程序；事件对象；事件类型：UI事件；焦点事件；鼠标与键盘事件变动事件模拟事件）
事件处理程序 html事件处理程序(直接在html中书写script) <!-- //#### 事件处理程序 //html时间程序可以直接在HTML文件中写,而且还可以引用其他地方的方法和函数 ...
html鼠标各种坐标,HTML坐标系与鼠标事件坐标
HTML坐标系与鼠标事件坐标在开发中处理鼠标事件时,经常会碰到 offset.scroll.client 这几个关键字,每次处理页面元素的坐标和偏移前,都要网上去搜资料,还会踩一些坑,影响开发效率. ...
HTML5 Canvas鼠标与键盘事件
演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...
js中的事件对象event （获取元素的,x,y坐标）
event的使用获取元素的,x,y坐标如图所示当鼠标放在上面那个框上时获取其坐标,并且在下面框中显示其实需要使用到鼠标移动事件 onmousemove event 事件对象中封装了当前事项相关 ...

offset、事件对象、事件鼠标的坐标、键盘事件、输入框放大显示的案例