目录
事件解绑
事件类型
事件对象
鼠标事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="btn">抽奖</button><script&lick = function(){console.log("谢谢惠顾")//console.log(this) this.disabled = "disabled" //点完 禁用 }//事件解绑dom0 dom节点 。onclick = lick = function(){console.log("谢谢惠顾")lick = null}//时间解绑dom2function handler(){console.log("谢谢惠顾")veEventListenner("click",handler)}btn.addEventListener("click",handler)//兼容性 低版本 解绑function handler(){console.log("谢谢惠顾")btn.detachEvent("onclick",handler)}btn.attachEvent("onclick",handler)</script>
</body>
</html><!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>#box3{width:100px;height:100px;background:yellow;}#child{width:100px;height:100px;background:red;}</style>
</head>
<body><button id="btn">click</button><button id="btn2">mouse</button><button id="box3">mouse2</button><div id="box"><div id="child"></div></div><script>
//鼠标事件
//click 点击执行
//ablclick 双击执行lick = function(){console.log("单机执行")}ablclick = function(){console.log("双机执行")}//contextmenu 右键单击//点击按钮 extmenu = function(){ //document是点击页面任意处extmenu = function(){console.log("右键单击，自定义右键菜单")}//mousedown usedown = function(){console.log("鼠标按下")}usemove = function(){console.log("鼠标移动")}useup = function(){console.log("鼠标抬起")}//移入移出 mouseover mouseout 在子元素和父元素之间也会出现移入移出useover = function(){console.log("移入")}useout = function(){console.log("移出")}//移入移出 mouseenter mouseleave 在子元素和父元素之间 没有 出现移入移出useenter = function(){console.log("移入")}useleave = function(){console.log("移出")}</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" id="username"><script>
//window document 输入框 keydown = function(){console.log("按下键盘"，“判断是不是回车键”)}keyup = function(){console.log("抬起键盘"，“判断是不是回车键”)}</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action=""><input type="text" id="username"><input type="reset"><input type="submit" value="提交"></form><script>
//focus blur 表单事件focus = function(){console.log("获取焦点")}blur =function(){console.log("失去焦点")}//change 获取焦点，失去焦点的对比里面内容不一样才会触发hange =function(){console.log("change")}//input 内容不一样input =function(){console.log("input")}//submit , submit =function(){console.log("submit","校验表单内容")return set =function(){console.log("reset")}</script>
</body>
</html><!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>div{width: 100px;height: 100px;background-color:blue;}</style></head>
<body><div id="box"></div><script>
//触摸事件uchstart = function(){console.log("touchstart")}uchmove = function(){console.log("touchmove")}uchend = function(){console.log("touchend")}uchcancel = function(){ //在触摸屏幕时 突然来了一个电话console.log("touchcancel")}</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" id="username"><div id="box"></div><script&keyup = function(evt){console.log(evt.keyCode)if(evt.keyCode===13){console.log("创建节点")}}lick = function(evt){console.log(evt)}//兼容性 lick = function(evt){evt = evt || window.eventconsole.log(evt)}</script>
</body>
</html><!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>*{margin:0;padding:0;}body{width: 2000px;height: 2000px;}div{width: 200px;height: 200px;background:skyblue;margin:100px;}p{width: 100px;height: 100px;background:red;margin:30px;}</head>
<body><div id="box"><p></p?</div><script>
//clientX clientY 距离浏览器可视窗口的左上角的坐标值
//pageX pageY 距离页面文档流的左上角的坐标值
//offsetX offsetY 距离触发元素的左上角坐标值lick = function(evt){console.log(evt.clientX,evt.clientY)console.log(evt.pageX,evt.pageY)console.log(evt.offsetX,evt.offsetY)}</script>
</body>
</html>本文发布于:2024-02-02 18:13:16，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170686941245551.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
