当前位置：首页 > news >正文

网站中的给我留言怎么做/电脑优化大师

news 2025/7/1 1:24:04

网站中的给我留言怎么做,电脑优化大师,网站备案是否收费,中国建设移动门户网站目录事件监听的使用方式常见的事件监听事件的绑定、解绑事件冒泡键盘事件、键码鼠标事件事件监听的使用方式  <body onload"alert(onload);"><!-- js不区分单引…

<!-- onload可以写在body中，也可以在js脚本中写成window.onload事件监听 -->
<body onload="alert('onload');"><!-- js不区分单引、双引，字符串用单引、双引均可 --><button id="btn" onclick="alert('click');">click me</button><script>// window.οnlοad=function(){//   alert("onload");// }var ele=document.getElementById("btn");// 以属性的形式设置事件监听。可以写匿名函数ele.onmouseover=function(){console.log("mouseover");}function out(){console.log("mouseout");}// 也可以调用，注意只写函数名，函数名后面不加()// 加()表示调用，只在加载页面时执行1次，起不到事件监听的作用ele.onmouseout=out;</script></body>

事件监听可以以属性的形式写在html标签中，但不推荐这样做，因为和html页面内容杂糅在一起，东一处西一处，不好维护。

html只写页面结构、内容，css写页面样式，js完成交互（事件监听）。

样式尽量写在.css文件、style标签中，js代码尽量写在.js文件、script标签中，好维护一些，不要与html页面内容杂糅在一起。

常见的事件监听

#键盘按键，不包括鼠标按键
onkeydown  #按键按下
onkeypress  #按键按住
onkeyup  #释放按键
#这3个事件组成一个onclick事件，onclick事件在onkeyup之后触发#鼠标按键
onmousedown
onmouseuponclick  #单击
ondblclick  #双击
#键盘按键、鼠标按键的单双击都算onmousedown  #鼠标移入的一刹那
onmousemove  #鼠标在该元素上移动
onmouseout  #⿏标移出#表单元素
onchange  #元素值（value）改变
onfocus  #聚焦
onblur  #失焦
onsubmit  #提交#页面加载完成
onload  #常用于body元素
window.onload  #在js脚本中可用onload还要先getElement获取元素，可以直接用这个，更简单

此外还有媒体播放onplay、拖放ondrag等。

事件监听是全小写

事件的绑定、解绑

var app=document.getElementById("app");function out(){console.log("mouseover");
}// 绑定事件监听。参数：事件、处理事件的函数，函数可以使用匿名函数，但使用匿名函数解绑不了
app.addEventListener("mouseover",out);// 解除事件监听
app.removeEventListener("mouseover",out);

onmouseover这些带on的事件监听，其实都是对addEventListener()的封装，已经设置好了事件

事件冒泡

<div id="father"><div id="son"></div>
</div>

事件默认会逐级冒泡，会被所有设置了该事件监听的祖先元素处理。

eg. 父元素、子元素都监听了鼠标移入事件，如果子元素发生鼠标移入事件，事件先被子元素处理，再冒泡到父元素，被父元素处理，因为子元素也是父元素的一部分，也算父元素发生了该事件。

可以在某一级取消事件冒泡，取消之后该事件不再往上一级冒泡

var son=document.getElementById("son");son.onmouseover=function(){//....   // 处理事件event.cancelBubble=true;  //取消事件冒泡。Bubble 冒泡
}

event是js预定义的事件对象名，表示一个事件对象。

如果不想使用这个名称，可以在参数表末尾写一个形参表示事件对象。

事件会自动传入。

键盘事件、键码

有时候需要监听指定的按键，比如按Enter发送消息，那就需要判断按下的键是不是Enter。

键盘上的每个按键都对应一个键码，键码是一个数字，根据键码来判断按下的是哪个键。

<input type="text" id="input" /><script>var input=document.getElementById("input");input.onkeydown=function(){if(event.keyCode==13)console.log("你按了Enter");// 监听组合键if(event.ctrlKey && event.keyCode==67)console.log("你按了Ctrl+C");}
</script>

键码表参考：
https://www.bejson.com/othertools/keycodes/

组合键：ctrlKey、shiftKey、altKey
均为布尔值，如果按住了ctrl，那ctrlKey的值就是true，以此类推。

鼠标事件

有时候需要监听鼠标事件，比如左键按下、获取单击位置的坐标

var app=document.getElementById("app");// 按下鼠标按键时
app.onmousedown=function(){// 键盘是keyCode，鼠标是button。鼠标左键是0，中键（滚轮）是1，右键是2if(event.button==0){  // 在浏览器中的横纵坐标，以浏览器左上角书签栏下面的地方为原点console.log(event.clientX);console.log(event.clientY);// 在屏幕上的横纵坐标，以屏幕左上角为原点console.log(event.screenX);console.log(event.screenY);}
}// 释放鼠标按键时
app.onmouseup=function(){if(event.button==0){// 点击点的横纵坐标console.log(event.clientX);console.log(event.clientY);console.log(event.screenX);console.log(event.screenY);}
}