JS 事件 0401
程序员文章站
2022-06-08 19:19:04
...
1.一些标签的禁用属性
标签的一些属性
- readonly 只读属性 禁止使用标签,不能操作,但是可以传参
只能看,不能改,可以传参 - disabled 禁用属性 禁止使用标签,不能操作,也不能传参
你就当没有这个标签 - multiple 多选属性 file,select,可以按ctrl进行多选
都是 布尔属性 在JavaScript中,与checked一样,通过true,fasle来定义
button按钮,也支持禁用属性,添加 disabled 属性,button按钮没有执行效果
<input type="text" readonly>
<input type="text" disabled>
<input type="file" multiple>
<button disabled>点击</button>
<script>
var oBtn = document.querySelector('button');
// 通过定义 true,false ,来设定,是否执行禁用效果
oBtn.disabled = true; // 执行禁用效果,无法操作
oBtn.disabled = false; // 不执行禁用效果,正常使用
oBtn.onclick = function(){
console.log(123);
}
2.事件对象的一些属性
事件对象的相关信息
存储在事件对象中的属性
- 事件对象.offsetX 事件对象.offsetY
点击是,距离 边框线内 标签左上角 坐标 - 事件对象.clientX 事件对象.clientY
点击时,距离 视窗窗口 左上角 坐标 - 事件对象.pageX 事件对象.PageY
点击时,距离 页面 左上角 坐标
如果页面没有滚动,页面的左上角和视窗窗口的左上角重合 ; 两个数值是一样的.
如果页面滚动,页面的左上角不再与视窗窗口的左上角重合 ; 两个数值是不同的.
var oDiv = document.querySelector('div')
oDiv.onclick = function(e){
console.log(e);
}
3.点击效果
点击鼠标,让div出现在,鼠标点击的位置上
实现方式:
点击时,获取鼠标点击位置的坐标,是针对视窗窗口的坐标
将这个数值,作为标签定位的数据
<style>
*{
margin: 0;
padding:0;
}
body{
height: 50000px;
}
div{
width: 100px;
height: 100px;
background: pink;
position: fixed;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div></div>
<script>
// 点击鼠标,让div出现在,鼠标点击的位置上
// 实现方式:
// 点击时,获取鼠标点击位置的坐标,是针对视窗窗口的坐标
// 将这个数值,作为标签定位的数据
var oDiv = document.querySelector('div');
// 如果没有,padding和border,只要获取宽度就可以
// 有px单位,parseInt() 只获取数值,不要px
// 实际项目中,还需要定义兼容性
// var oDivHeight1 = parseInt(window.getComputedStyle(oDiv).height) ;
// 如果要有是有,padding和border,需要使用 offsetHeight 来获取
// 只有数值,没有px单位
// 推荐使用
var oDivHeight2 = oDiv.offsetHeight;
// console.log(oDivHeight1 , oDivHeight2);
var oDivWidth = oDiv.offsetWidth;
window.onclick = function(e){
// console.log(e);
// 这个数值只有 数, 没有px单位
// 作为定位的属性值,需要拼接px单位
// 让标签的左上角和鼠标点击的位置重合
// oDiv.style.left = e.clientX + 'px' ;
// oDiv.style.top = e.clientY + 'px' ;
// 让标签的左上角 和 鼠标点击位置 有间距
// 在原始数值的基础上,再多加上一定的数值
// 这个数值,是根据客户需求而定,现在随便加个数,意思意思
// oDiv.style.left = e.clientX + 20 + 'px' ;
// oDiv.style.top = e.clientY + 20 + 'px' ;
// 让标签的中心 和 鼠标点击位置 重合
// 在原始数值的基础上,再减去定位标签,宽高的一半
oDiv.style.left = e.clientX - oDiv.offsetWidth/2 + 'px' ;
oDiv.style.top = e.clientY - oDiv.offsetHeight/2 + 'px' ;
}
</script>
4.拖拽效果
拖拽的效果 : 当鼠标按下时 ; 并且鼠标移动时
<style>
*{
margin: 0;
padding:0;
}
body{
height: 5000px;
}
div{
width: 100px;
height: 100px;
background: pink;
position: fixed;
top:200px;
left:200px;
}
</style>
</head>
<body>
<div></div>
<script>
var oDiv = document.querySelector('div');
// 在div移动之前,先记录原始的定位数据
var oldTop = window.getComputedStyle(oDiv).top;
var oldLeft = window.getComputedStyle(oDiv).left;
// 当鼠标按下时,鼠标移动,添加事件
window.onmousedown = function(){
window.onmousemove = function(e){
// 将鼠标的坐标,作为div定位的数值,定位的是中心的位置
oDiv.style.left = e.clientX - oDiv.offsetWidth/2 + 'px' ;
oDiv.style.top = e.clientY - oDiv.offsetHeight/2 + 'px' ;
}
}
// 当鼠标抬起时,鼠标移动,赋值null,就没有事件执行了
window.onmouseup = function(){
window.onmousemove = null;
// 可以再给div定义,定位位置,可以返回原始位置
// 也在函数之外,记录存储原始位置
oDiv.style.left = oldLeft;
oDiv.style.top = oldTop;
}
// 如果想要鼠标移动的快点 把 oDiv 改变成 window 或者 document
// 先 鼠标移动,里面定义鼠标按下,抬起
// 鼠标移动时,执行鼠标按下,鼠标按下,计算机只会触发一次
// 鼠标按下,即时是一直按,只会触发一次
// 定义的程序,只会回执一次
// window.onmousemove = function(){
// window.onmousedown = function(){
// console.log(123);
// }
// }
// 按下的时候,执行鼠标移动
// 鼠标移动会一直触发,移动中定义的程序,会一直执行
// window.onmousedown = function(){
// window.onmousemove = function(){
// console.log(456);
// }
// }
</script>
5.可视窗口的宽度高度
<style>
body{
height: 5000px;
width: 5000px;
}
</style>
</head>
<body>
<script>
// 情况1:包括滚动条的宽度高度
// 包含有滚动条宽度高度
// 滚动条的大小,有的时候是16,有的时候是17
// 结果只是数值
// window.innerHeight 高度
// window.innerWidth 宽度
// 情况2:不包括滚动条宽度高度
// document.documentElement.clientHeight 高度
// document.documentElement.clientWidth 宽度
console.log(window.innerHeight);
console.log(document.documentElement.clientHeight);
</script>
6.拖拽效果边界值
<style>
*{
margin: 0;
padding:0;
}
body{
height: 5000px;
}
div{
width: 100px;
height: 100px;
padding: 100px;
background: pink;
border:10px solid black;
position: fixed;
top:0px;
left:0px;
}
</style>
</head>
<body>
<div></div>
<script>
// 拖拽的效果 --- 边界值
// 鼠标移动出页面,但是div要留在页面范围内
// 给定位数值,添加极限范围数值,
// 定位的最大值,最小值,都要有范围
// 最小值 : 上 左 都是 0
var oDiv = document.querySelector('div');
var oldTop = window.getComputedStyle(oDiv).top;
var oldLeft = window.getComputedStyle(oDiv).left;
// 视窗窗口的宽度,高度
var winWidth = document.documentElement.clientWidth;
var winHeight = document.documentElement.clientHeight;
// 当鼠标按下时,鼠标移动,添加事件
window.onmousedown = function(){
window.onmousemove = function(e){
// 根据 鼠标坐标,根据项目需求,计算定位的数值
var x = e.clientX - oDiv.offsetWidth/2;
var y = e.clientY - oDiv.offsetHeight/2;
// 极限值判断
// 最小值都是 0 0
if(x < 0){
x = 0;
}
if(y < 0){
y = 0;
}
// 最大值 可视窗口的宽度/高度 - ( 标签x轴方向 / y轴方向 最终占位 )
if(x > winWidth - oDiv.offsetWidth){
x = winWidth - oDiv.offsetWidth;
}
if(y > winHeight - oDiv.offsetHeight){
y = winHeight - oDiv.offsetHeight;
}
console.log(x,y);
// 将数值作为标签定位的坐标
oDiv.style.left = x + 'px' ;
oDiv.style.top = y + 'px' ;
}
}
window.onmouseup = function(){
window.onmousemove = null;
}
</script>
总结思路
- 一定是 先按下事件,后移动事件 — 先吃饭再刷碗
- 鼠标抬起,给移动定义事件为null
也可以添加其他操作,例如,让标签回到原位
回到原始位置,需要在程序的起始位置,先记录原始的定位坐标 - 基本思路
（1）在定义函数之外,获取浏览器窗口的宽度,高度
不能带有滚动条
（2）获取鼠标的坐标,根据项目需求,来计算表现定位的数值
鼠标的坐标,要根据实际需求而定,目前使用的是相对可视窗口左上角的定位
项目需求不同,+ / - 的数值也不同
（3）设定极值
最小值为 0 0
最大值为 可视窗口宽度/高度 - 标签X轴/Y轴最终占位
（4）将最终的数据,作为标签定位的坐标
必须拼接px单位
7.tab切换
<style>
*{
margin: 0;
padding:0;
}
ul,ol,li{
list-style: none;
}
.cont{
width: 800px;
height: 600px;
border: 5px solid #333;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.cont ul{
width: 100%;
height: 60px;
display: flex;
}
.cont ul li{
flex:1;
font-size: 35px;
color: #fff;
border-left: 2px solid blue;
border-right: 2px solid blue;
background: hotpink;
display: flex;
justify-content: center;
align-items: center;
}
.cont ol{
flex:1;
position: relative;
}
.cont ol li{
width: 100%;
height: 100%;
font-size: 150px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top:0;
left:0;
background: burlywood;
display: none;
}
/* 按钮标签 哪个标签有这个属性,哪个就显示特殊背景颜色 */
.cont ul li.active{
background: skyblue;
color: black;
}
/* 内容标签 哪个标签有这个属性,哪个就显示 */
.cont ol li.active{
display: flex;
}
</style>
</head>
<body>
<div class="cont">
<ul>
<li class="active">按钮1</li>
<li>按钮2</li>
<li>按钮3</li>
</ul>
<ol>
<li class="active">内容1</li>
<li >内容2</li>
<li>内容3</li>
</ol>
</div>
<script>
// tab切换 / 选项卡 效果
// 实现思路:
// 1, ul中的li标签个数 和 ol中li标签个数是相同的
// 按钮和内容是一一对应的
// 2, 点击按钮标签,也就是ul中的li标签
// 给当前这个li标签,添加class样式,给其他的li标签,去除class样式
// 实现思路: 先给所有的li标签,去除class样式
// 再给当前的li标签,添加class样式
// 3, 点击按钮标签,也就是ul中的li标签
// 给 ol 中所有的 li标签,去除class样式
// 给 与 当前 ul>li 索引相同的 ol>li标签,添加样式
var oUllis = document.querySelectorAll('ul li');
var oOllis = document.querySelectorAll('ol li');
// 循环 ul中的所有li,添加点击事件
oUllis.forEach(function(item , key){
// ul中的li标签 , item就是ul中的li标签
item.onclick = function(){
// 1,清除所有的ul,ol,中li的class样式属性
// 循环遍历所有的ul和ol中的标签
oUllis.forEach(function(v , k){
// v是ul中的li标签
v.className = '';
// ul>li和ol>li索引是相同的
// 通过ul中li的索引也可以获取ol中的li标签
// oOllis[k] 就是 ol中的li标签
oOllis[k].className = '';
})
// 循环结束,所有的ul,ol中,li都没有active
// 给当前点击的item标签,也就是ul,li标签,添加样式
item.className = 'active';
// 给ol中,对应的这个标签的索引的li标签,添加样式
oOllis[key].className = 'active';
}
})
// 不想用forEach,也可以试试事件委托
</script>
总结
核心思路:
利用 ul 和 ol 中 li标签个数相同的 特点,优化程序,简化代码
- 获取标签对象
- 给所有的ul中的li标签,添加点击事件
- 点击事件执行的内容
(1),给所有的ul和ol中的li标签,清除样式
(2),给当前点击的ul中的li标签,添加样式
(3),给索引相同的ol中的li标签,添加样式
可以用自己的方式实现,比如多写几个循环,分别操作ul和ol中的标签
也可以尝试事件委托的方式,给div标签,添加点击事件
判断点击的li标签,定义程序
不过这样的话,要给ul中li标签,添加不少的设定,以区别ul>li和ol>li
8.事件绑定
事件：事件是发生并得到处理的操作，即：事情来了，然后处理。
JavaScript 有两种事件绑定模型：内联模型、外联(脚本)模型。
- 事件绑定—内联模式
这种模型是最传统接单的一种处理事件的方法。在内联模型中，事件处理函数是 HTML 标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但它是和 HTML 混写的， 并没有与 HTML 分离。 - 事件绑定—外联(脚本)模式
由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题，我们可以在 JavaScript 中处理事件。这种处理方式就是外联(脚本)模型。
9.事件类型
JavaScript 可以处理的事件类型为：鼠标事件、键盘事件、HTML 事件。
（1）鼠标事件（页面所有标签都可以触发）
| 鼠标事件 | |
|---|---|
| click： | 当用户单击鼠标按钮或按下回车键时触发 |
| dblclick： | 当用户双击主鼠标按钮时触发。 |
| mousedown： | 当用户按下了鼠标还未弹起时触发。 |
| mouseup： | 当用户释放鼠标按钮时触发。 |
| mouseover： | 当鼠标移到某个元素上方时触发。 |
| mouseout： | 当鼠标移出某个元素上方时触发。 |
| mousemove： | 当鼠标指针在元素上移动时触发。 |
（2）键盘事件（表单和全局window）
| 键盘事件 | |
|---|---|
| keydown： | 当用户按下键盘上任意键触发，如果按住不放，会重复触发。 |
| keypress： | 当用户按下键盘上的字符键触发，如果按住不放，会重复触发。 |
| keyup： | 当用户按下了鼠标还未弹起时触发。 |
（3）HTML事件(window事件)
| window事件（全局window） | |
|---|---|
| load： | 当页面完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发。 |
| unload： | 当页面完全卸载后在 window 上面触发，或当框架集卸载后在框架集上触发。 |
| scroll： | 当用户滚动带滚动条的元素时触发。 |
| resize： | 当窗口或框架的大小变化时在 window 或框架上触发。 |
（4）HTML事件(表单事件)
| 表单事件 | |
|---|---|
| blur： | 当页面或元素失去焦点时在 window 及相关元素上触发。 |
| focus： | 当页面或者元素获得焦点时在 window 及相关元素上面触发。 |
| select： | 当用户选择文本框(input 或 textarea)中的一个或多个字符触发。 |
| change： | 当文本框(input 或 textarea)内容改变且失去焦点后触发。 |
| submit： | 当用户点击提交按钮在元素上触发。 |
| reset： | 当用户点击重置按钮在元素上触发。 |
10.事件对象
拿到事件对象：
事件绑定：
元素节点.on + 事件类型 = 匿名函数;
事件对象：一旦完成事件绑定操作，就会产生一个事件对象（系统根据事件绑定自动生成的）。
【注】当点击按钮以后，系统会调用这个函数，系统会自动将事件对象，传入到函数的第一个参数。
拿到事件对象（标准写法）：
11.事件对象属性
事件对象属性(button属性)：button属性(鼠标事件)
事件对象属性(获取鼠标位置)：获取鼠标坐标的属性
| clientX clientY | 原点位置，窗口可视区域左上角为原点 |
| pageX pageY | 原点位置，整个页面的左上角（带滚动高度） |
| screenX screenY | 原点位置，整个屏幕的左上角 |
事件对象属性(修改键)
修改键
有时，我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件。这些键为： Shfit、Ctrl、Alt 和 Meat(Windows 中就是 Windows 键，苹果机中是 command 键)，它们经常被用 来修改鼠标事件和行为，所以叫修改键。
键盘事件对象属性(键码)
键码
在发生 keydown 和 keyup 事件时，event 对象的 keyCode 属性，keyCode 属性的值与 ASCII 码中对应大写字母 或数字的编码相同。字母中大小写不影响。
键盘事件对象属性(字符码)
字符码
Firefox、Chrome 和 Safari 的 event 对象都支持一个 charCode 属性，这个属性只有在发 生 keypress 事件时才包含值，而且这个值是按下的那个键所代表字符的 ASCII 编码。此时 的 keyCode 通常等于 0。
12.事件监听器
事件监听器（浏览器兼容IE8以下）
上一篇： 高通坦言失去iPhone基带订单致2018年亏损：不抱和好希望
下一篇： 我的爱能否把你感动