首页 > 其他分享 >2024/2/20

2024/2/20

时间:2024-02-28 19:35:32浏览次数:21  
标签:function 20 鼠标 alert 2024 事件 某个 监听

在js中,有很多种的事件监听

常见的鼠标事件监听
事件名 事件描述
onclick 当鼠标单机某个对象
ondblclick 当鼠标双击某个对象
onmousedown 当某个鼠标按键在某个对象上被按下
onmouseup 当某个鼠标按键在某个对象上被松开
onmousemove 当某个鼠标按键在某个对象上被移动
onmouseenter 当鼠标进入某个对象(相似事件onmouseover)
onmouseleave 当鼠标离开某个对象(相似事件onmouseout)
常见的键盘事件监听
事件名 事件描述
onkeypress 当某个键盘的键被按下(系统按钮,如箭头键和功能键无法得到识别)
onkeydown 当某个键盘的键被按下(系统按钮可以识别,并且会先于onkeypress发生)
onkeyup 当某个键盘的键被松开
常见的表单事件监听
事件名 事件描述
onchange

当用户改变某个表单域的内容时,会触发
onfocus 当某元素获得焦点(比如tab键或鼠标点击)
onblur 当某元素失去焦点
onsubmit 当表单被提交
onreset 当表单被重置
常见的页面事件监听
事件名 事件描述
onload 当页面或图像被完成加载
onunload 当用户退出页面

对于事件监听有两种方法,一种通过html标签中的事件属性进行绑定

还有就是通过dom元素属性进行绑定

复制代码
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
  <title>JSP - Hello World</title>
</head>
<body id="whw">
<h1><%= "Hello World!" %></h1>
<button type="button" id="bt1" onclick="on()">按钮1</button>
<button type="button" id="id2" >按钮2</button>
<form action="" style="text-align: center" id="ddd">
  <input type="text" name="username" onblur="onbr()" onfocus="onfus()" onkeydown="onkeydn()">
  <input id="b1" type="submit" value="提交">
</form>
<table width="800px" border="1" cellspacing="0" align="center" onm ouseover="onmousr()" onm ouseout="onmousut()">
  <tr>
    <th>hhh</th>
    <th>666</th>
  </tr>
  <tr>
    <th>www</th>
    <th>888</th>
  </tr>
</table>
<div id="hhh"></div>
<script>
  //两种监听按钮点击事件的的方式
 function on(){
   document.getElementById("hhh").innerHTML="<img src='img/image.png'></img>"
}
document.getElementById("id2").onclick=function ()
{
  document.getElementById("hhh").innerHTML="<img src='img/image1.png'></img>"
}




 function onld()
 {
   alert("页面加载完成");
 }
  document.getElementById("whw").onload=function ()
  {
    alert("页面加载完成");
  }





 function onsubt()
 {
   alert("提交完成");
 }
 document.getElementById("ddd").onsubmit=function ()
  {
    alert("提交完成");
  }




 // 获得焦点和失去焦点如果用alert会卡bug
 function onbr()
 {
   console.log("失焦");
 }
 function onfus()
 {
   console.log("获得焦点")
 }
 function onkeydn()
 {
   alert("按下键盘");
 }
 function onmousr()
 {
   alert("鼠标放回");
 }
 function onmousut()
 {
   alert("鼠标移开");
 }
</script>
</body>
</html>

标签:function,20,鼠标,alert,2024,事件,某个,监听
From: https://www.cnblogs.com/618zyk/p/18041540

相关文章

  • 2024/2/22
    我们的一条数据项目包括,收入(指出)、说明、日期、金额四项,所以我们要自定义一个适配器这里适配器的一个列表的各个单位的类型是一个打包好的类的类型。这个类也是自己创建的packagecom.example.myapplication;publicclasscostList{privateString_id;private......
  • 2024/2/21
    今天根据黑马的视频来完成一些小练习用js来:1.切换图片2.在文本后添加文字3.使所有的复选框被选中<%@pagecontentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtml><html><head><title>JSP-HelloWorld</title></......
  • 2024年性价比高的服务器多少钱?腾讯云最新更新
    在当今这个数据驱动的时代,选择一款合适的服务器对于企业和个人开发者来说至关重要。腾讯云,作为国内领先的云服务提供商,为广大用户提供了多样化的服务器选择。那么,在腾讯云的众多服务器产品中,我们该如何做出明智的选择呢?首先,对于轻量级应用或初创项目,轻量应用服务器无疑是一个经......
  • 20240228
    https://blog.csdn.net/m0_69752994/article/details/134107424https://blog.csdn.net/weixin_37845646/article/details/104686072用三极管代替IO口的通断效果。......
  • 京津冀三省的2015年度的科技成果数据数据分析
    原始题目要求:一、 数据结构分析:(1)京津冀三省的2015年度的科技成果数据原始表,为Access数据库,; (2)要求将三省的科技成果数据汇总到同一表中(要求结果表为MySql数据表);(3)三个原始数据表结构不一致,要求结果表中包括所有的字段,表达意思相同或相似的字段要进行合并,不允许丢失字段(若只有......
  • CF1209G2 Into Blocks (hard version) 题解
    Description给你\(n\),\(q\),\(n\)表示序列长度,\(q\)表示操作次数。我们需要达成这么一个目标状态:如果存在\(x\)这个元素,那么必须满足所有\(x\)元素都必须在序列中连续。然后你可以进行这么一种操作,将所有的\(x\)元素的变为任意你指定的\(y\)元素,并且花费\(cnt[x......
  • 2024 1月
    牛逼题CF1770F,首先由对称可知n是偶数就为0,否则,我们考虑钦定中间那个数的值,我们发现or=y限制很强,考虑容斥一下,然后我们需要去枚举y的每个子集,有一连串连乘\([ai⊆y']\)的东西,我们直接组合数奇偶性逆用,由\([n⊆m]\)变成\(\binom{n}{m}\),\(mod2\),然后就没了loj3067,发现有个简单dp,d......
  • 2024 2月
    耳分解qoj3301,正如算法名称,像耳朵一样分解,一个强连通分量是通过一个更小的强连通分量加入一条链形成的,反之,强连通分量也可以通过次缩成一个环,点双也相同。此题直接dp,\(f_s\)表示s集合构成强连通分量的代价,考虑枚举一条链,\(g_{s,u,v}\)表示目前所有探测到的点集合为s,目前如果将u和......
  • 2024牛客寒假算法基础集训营6 题解 ( A,B,C,D,E,I)
    2024牛客寒假算法基础集训营6题解(A,B,C,D,E,I)A 宇宙的终结题意找到\([l,r]\)区间中有多少数恰好等于三个不同素数的乘积思路数据范围很小,可以考虑暴力,遍历\([l,r]\)区间内每个数,拿每个小于当前数的素数一直往下除,判断是否存在能被恰好3个素数整除的情况代码/********......
  • 2024-02-28:用go语言,有一个由x轴和y轴组成的坐标系, “y下“和“y上“表示一条无限延伸
    2024-02-28:用go语言,有一个由x轴和y轴组成的坐标系,"y下"和"y上"表示一条无限延伸的道路,"y下"表示这个道路的下限,"y上"表示这个道路的上限,给定一批长方形,每一个长方形有(x1,x2,y1,y2),4个坐标可以表示一个长方形,判断这条道路整体是不是可以走通的。以下为正式题目:图片在计算......