JavaScript事件

柏林的夜空 · 发表于 2023-11-18 09:56:43

一、 JavaScript事件
在前端中，页面的每次交互和特效都是一个事件，其中任何一个html元素都是一个事件源，一个很事件源可以添加多个事件。
二、事件中的event对象
只要发生一个事件就会产生一个event事件，event代表事件的状态
1、event事件常见的属性和状态

2、阻止默认事件的发生
对于一些标签来说，他们拥有自己的事件，比如：a标签可以跳转，submit/button可以提交表单，reset可以重置按钮，那么如果想要给这些按钮添加事件，并且不让他执行对应的默认事件的话，就需要使用自制时间发生；阻止默认事件的方法有两种：使用的是事件对象的方法来阻止event.stopPropagation();或者 return fales；
3、事件流-冒泡机制
事件的流向，是由两个机制，一个是事件的捕获元素由外向内，另一个是元素的冒泡由内向外

注意：如果存在浏览器的兼容性问题可能会导致不同浏览器出现冒泡程度不同
4、阻止冒泡的方法
event.stopPropagation()
兼容性写法：

if(event && event.stopPropagation){ // w3c标准
event.stopPropagation();
}else{ // IE系列 IE 678
event.cancelBubble = true;
}

复制代码

“DOM事件流”：三个阶段：事件捕获，成为目标阶段，事件冒泡
三、 js触发事件的方式有哪些
1、在js获取元素/标签元素.事件名称 = 匿名函数 / function(){}
2、元素.事件名称 = 函数名称
3、在html中触发 onclick = "代码段 / 函数调用"
四、鼠标事件

五、键盘事件

想要区分键盘上的每个按键，是通过键盘的keyCode值来判断的，所以想要知道按下的是哪个按键，可以使用event.keyCode

document.onkeyup = function(){
console.log(event.keyCode);
}

复制代码

案例：控制小人移动

</head>
<body>
<img src="https://www.cnblogs.com/./img/ren_q_1.gif" alt="">

复制代码

var box = document.querySelector('.box')
var img = document.querySelector('.box img');
var flag = true;
var left = 0;
var tops = 0;
var timer = null;
function dong(walk) {
flag = !flag;
var imgname = flag ? `ren_${walk}_1.gif` : `ren_${walk}_2.gif`
img.src = './img/' + imgname;
}
timer=setInterval(function () {
dong('q');
}, 200);
clearInterval(timer)
document.onkeydown = function () {
switch (event.keyCode) {
case 65:
left -= 10;
dong('l')
break;
case 87:
tops -= 10;
dong('h')
break;
case 68:
left += 10;
dong('r')
break;
case 83:
tops += 10;
dong('q')
break;
}
box.style.left = `${left}px`;
box.style.top = `${tops}px`;
}

复制代码

六、光标事件

案例：小米官网搜索框

*{
margin: 0;
padding: 0;
}
input{
width: 300px;
height: 50px;
outline: 0;
border: 1px solid rgb(118, 118, 118);
margin-left:100px ;
}
ul{
width: 300px;
height: 0px;
border: 0px solid #ff6700;
margin-left: 100px;
overflow: hidden;
}
li{
list-style: none;
line-height: 50px;
margin-left: 20px;
color: #666;
}
</style>
</head>
<body>
<input type="text" name="" id="inp">
<ul id="ul">
<li>小米家电</li>
<li>小米手机</li>
<li>红米手机</li>
<li>小米电脑</li>
<li>小米平板</li>
<li>小米手表</li>
</ul>
</body>

复制代码

var height = 0;
var timer = null;
inp.onfocus= function(){
inp.style.border = '1px solid #ff6700';
timer = setInterval(function(){
if(height >=300){
clearInterval(timer)
}else{
height+=10
ul.style.height = height+'px';
ul.style.border = '1px solid #ff6700';
}
},20)
}
inp.onblur = function(){
inp.style.border = '1px solid rgb(118, 118, 118)';
ul.style.display = 'none'
}

复制代码

七、窗口事件

八、表单事件

案例：苏宁登录页面

当输入input框内时会出现×，点击取消内容，密码框出现小眼睛，点击睁开会实现密码框显示

</head>
<body>
<input type="text" name="" id="inp1" placeholder="请输入手机号/用户名/邮箱">X<br>
<input type="password" name="" id="inp2" placeholder="请输入密码"><img src="https://www.cnblogs.com/./xiaomi.img/yanjing_yincang_o.png" alt="">X

复制代码

九、单选框和复选框被选中

案例：简易购物车案例

<table border='1' width="500">
<tr>
<td>选择</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品价格</td>
<td>总价</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>上衣</td>
<td>
<button >-</button>
5
<button >+</button>
</td>
<td >100</td>
<td ></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>裤子</td>
<td>
<button >-</button>
2
<button >+</button>
</td>
<td >200</td>
<td ></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>包包</td>
<td>
<button >-</button>
1
<button >+</button>
</td>
<td >300</td>
<td ></td>
</tr>
<tr>
<td>全选:<input type="checkbox" id="checkAll"/></td>
<td colspan="4" id='totlePrice'>总价：0</td>
</tr>
</table>

复制代码

[code] // 1. 获取所有的复选框 var sel = document.querySelectorAll('.sel'); var prices = document.querySelectorAll('.price'); var onePrices = document.querySelectorAll('.prices'); var nums = document.querySelectorAll('.num'); var adds = document.querySelectorAll('.add'); var jians = document.querySelectorAll('.jian'); // 2. 给复选他添加事件 for(var i=0;i

JavaScript事件

本帖子中包含更多资源