四类js常用事件
鼠标事件:
左键单击 onclick
左键双击 ondblclick
鼠标移入 onmouseover onmouseenter
鼠标移出 onmouseout onmouseleave
鼠标按下 onmousedown
鼠标抬起 onmouseup
右键单击 oncontextmenu
onmouseup+οnmοusedοwn===onclick
键盘事件:
键按下 onkeydown onkeypress
键抬起 onkeyup
系统事件:
加载完成后 onload
家在出错后 onerror
窗口调整大小时 onresize
滚动时 onscroll
表单事件:
获取焦点后 onfocus
失去焦点后 onblur
改变内容后 onchange
重置后 onreset
选择后 onselect
提交后 onsubmit
<script>
let box = document.querySelector(".box") ;
box.onclick =()=>{
console.log("鼠标点击触发");
}
// box.ondblclick = ()=>{
// console.log("鼠标左键双击");
// }
// box.onmouseover = ()=>{
// console.log("鼠标移入元素触发");
// }
// box.onmouseout = ()=>{
// console.log("鼠标移出");
// }
// box.onmouseenter= ()=>{
// console.log("鼠标移入元素触发");
// }
// box.onmouseleave= ()=>{
// console.log("鼠标移出");
// }
// box.onmousedown =()=>{
// console.log("鼠标按下");
// }
// box.onmouseup =()=>{
// console.log("onmouseup");
// }
// box.oncontextmenu =()=>{
// console.log("oncontextmenu");
// }
// box.onmouseover = show
// function show() {
// box.style.background = "green"
// }
// box.onmouseout = ()=>{
// box.style.background = "red"
// }
</script>
通过js获取对应的元素节点样式 => 能获取就代表能修改样式
*1. .操作符 => 获取元素样式
元素.style.样式名 获取对应的样式
a. 只能获取行内样式
2. 获取内联样式与外联样式
getComputedStyle(元素节点).样式名 返回一个style完整的样式表
3. 获取行内样式表
元素节点.style.cssText
通过js获取元素节点类名和id名 操作类名和id名修改样式
*1. .操作符 => 获取类名 和 id名
元素.className 获取类名
元素.id 获取id名
h5与 es5
1. 获取属性,获取自定义属性
元素.getAttribute("属性名") 返回属性值
2 设置属性,设置自定义属性
元素.setAttribute("属性名","属性值")
3 删除属性,删除自定义属性
元素.removeAttribute("属性名")
4 切换class类名
元素.classList.toggle("qqq")
元素存在对应class类名删除,否则反之
1.获取class类名
元素.classList
2.添加class类名
元素.classList.add(类名)单个
元素.calssList.add(不限制类名,类名)多个
3.删除class类名
元素.classList.remove(类名) 单个
元素.calssList.rmove(不限制类名,类名) 多个
关于能用css不用js操作
CSS和JS动画,那个的效率更好。_尼古拉斯-托尔斯泰-赵四的博客-CSDN博客
补充
1. 样式是通过连接符 - 连接的, 在js中获取就要小驼峰写法
js事件操作
利用函数事件(逻辑)实现点击按钮显示/隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<button class="but">点击隐藏</button>
<div class="box" style="display: block;">内容</div>
<!--
事件=>行为=> 通过元素绑定条件执行相应的代码
异步=>事件 定时器
元素.onlick 鼠标点击事件
逻辑: 给元素绑定了事件(鼠标物理点击元素后执行事件)
元素.onclick=()=>{执行代码}
元素.onclick=function(){执行代码}
元素.onclick=函数名
补充:三目赋值操作
1.let qwe=1==1?"none":"block"
2.简单效果能使用css实现,就用css
-->
<script>
//点击but隐藏box元素 再次点击显示
let box=document.querySelector(".box")
let but=document.querySelector(".but");
//点击but元素出发对应函数,执行内部代码
but.onclick=show
function show(){
console.log(1);
//执行代码
if(box.style.display=="block"){
box.style.display="none"
}else{
box.style.display="block"
}
//修改元素样式 -元素判断
box.style.display=box.style.display=="block"?"none":"block"
}
</script>
</body>
</html>