事件的点击事件（常用）

最新推荐文章于 2024-08-18 10:54:05 发布

代代烧烤

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量113

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_65916942/article/details/134476875

版权

一、鼠标移动事件

1.鼠标移入 mouseover

2.鼠标移出 mouseout

3.鼠标移动 mousemove

二、表单事件

1、获取焦点 focus

2、失去焦点 blur

3、内容发送改变 change

三、键盘事件

1、按下 keypress

2、按下 keydown

注意：keypress 和keydown有区别看下面上课的笔记

3、弹起 keyup

<!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>

#box{

width: 200px;

height: 100px;

background-color: pink;

margin: 50px auto;

}

</style>

</head>

<body>

<div id="box">盒子</div>

<form action="javascript:;">

<input type="text" id="userName" name="user">用户名

<select name="" id="">

<option value="">选项一</option>

<option value="">选项二</option>

</select>

<button type="submit">提交</button>

</form>

<div id="box2" style="height: 200px; width: 200px; overflow: scroll; background-color: pink;">

滚动事件

<div style="height: 300px;border: red solid 1px ;"></div>

</div>

<button id="btn">回到头部</button>

<script>

var box1=document.getElementById('box');

//1 鼠标事件

//1.1 鼠标移入

box1.addEventListener('mouseover',function(e){

console.log("鼠标移入");

box1.style.backgroundColor='green'

})

//1.2鼠标移出

box1.addEventListener('mouseout',function(e){

console.log("鼠标移出");

box1.style.backgroundColor='pink'

})

//1.3鼠标移动

box1.addEventListener('mousemove',function(e){

console.log("鼠标移动");

})

// 2 页面事件当页面元素加载完毕之后在执行函数内的代码块

window.onload = function(){

//页面已经加载完毕

}

//3、表单事件

//获取焦点

var form=document.querySelector("#userName");

form.addEventListener('focus',function(e){

console.log("获取焦点");

})

//失去焦点

var form1=document.querySelector("#userName");

form1.addEventListener('blur',function(e){

console.log("失去焦点");

})

//注意要内容发生改变才会改变

//内容发送改变

var form2=document.querySelector("#userName");

form2.addEventListener('change',function(e){

console.log("内容发送改变");

})

//菜单内容发送改变

var select=document.querySelector("select");

select.addEventListener('change',function(e){

console.log("内容发送改变");

})

document.querySelector("button").addEventListener('click',function(e){

//阻止默认事件

e.preventDefault();

console.log("获取用户信息",document.querySelector("#userName").value);

var userName=document.querySelector("#userName").value;

if(userName== ''){

alert('用户名不能为空');

}

})

//表单提交事件

document.querySelector("form").οnsubmit=function(e){

//阻止默认事件

e.preventDefault();

var formBox=document.querySelector("form");

console.dir(formBox);

//获取value的两种方式

console.log(formBox[0].value,this[0].value);

}

//4、滚动事件

document.querySelector("#box2").οnscrοll=function(){

console.log('滚动')

//滚动条距离左侧的移动位置

console.log(this.scrollLeft);

//滚动条距离头部的移动位置

console.log(this.scrollTop);

}

document.querySelector('#btn').οnclick=function(){

//回到头部注意要看滚动条设置在哪个元素

document.querySelector("#box2").scrollTop=0;

}

//5、键盘事件

var userBox= document.querySelector('#userName');

userBox.addEventListener('keypress',function(e){

//ketpress:按下监听除功能键 (shift/箭头等)除外的按键按下有效果

// e.keycode 获取当前按下的按键Ascll码值并且区分大小写

console.log('press 键盘按键按下',e.keycode);

})

userBox.addEventListener('keydown',function(e){

//keydown:按下监听所有按键按下都能呗监听到但是它的keycode不区分大小写

// e.keycode 获取当前按下的按键Ascll码值返回的都是大写字母的ascll码值

console.log('press 键盘按键按下',e.keycode);

})

//keyup:弹起所有按键按下都能被监听到

//注意 keycode不区分大小写返回小写字母的ascll码值

userBox.addEventListener('keyup',function(e){

console.log('keyup 键盘按键弹起',e.keycode);

})

</script>

</body>

</html>

代代烧烤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
事件的点击事件（常用）

console.log("获取用户信息",document.querySelector("#userName").value);// e.keycode 获取当前按下的按键Ascll码值返回的都是大写字母的ascll码值。//ketpress:按下监听除功能键 (shift/箭头等)除外的按键按下有效果。<input type="text" id="userName" name="user">用户名。console.log('press 键盘按键按下',e.keycode);
复制链接

扫一扫