位置: IT常识 - 正文

DOM_常用事件(dom事件种类)

编辑:rootadmin
常用事件 onload <script> window.onload = function () { ele = document.getElementById("i") console.log(ele.innerHTML); } </script> </head> <body> <div clas ... 常用事件onload<script> window.onload = function () { ele = document.getElementById("i") console.log(ele.innerHTML); } </script></head><body><div class="background"> <div id="i">ivanlee</div></div>

推荐整理分享DOM_常用事件(dom事件种类),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:dom事件有哪些阶段,dom事件模型由什么组成,常见的dom事件,dom事件种类,dom事件有哪些阶段,dom常用事件,dom事件种类,dom常用事件,内容如对您有帮助,希望把文章链接给更多的朋友!

window.onload的方法解决了js在从上到下编译的时候,无法先解析body里面的内容,后解析<script>标签里的事件。

现在script标签在上面,div标签在下面,加入onload方法可以在解析时进行等待,等到解析完div标签。

onsubmit

很多检验是在提交服务器之前进行的,运用onsubmit方法可以在本地进行验证,如果出错了可以立即停止,不需要交给服务器

<form action="" id="i"> 用户名 <input type="text"> 密码 <input type="password"> <input type="submit"></form></div><script> var ele = document.getElementById("i"); var user = document.querySelector("#i [type=text]") var pwd = document.querySelector("#i [type=password]") ele.onsubmit = function (e){ if(user.value.length < 5){ alert(user.value+"长度应该大于5") return false; // 终止事件执行 // e.preventDefault() // 阻止元素默认行为 } }</script>

当用户名长度小于5时,点击提交之后就会弹窗提示(这个过程不会传给服务器)

onchange <select name="provonce" id="s1"> <option value="hebei">请选择省份</option> <option value="hubei">湖北省</option> <option value="hunan">湖南省</option> <option value="hebei">河北省</option> </select> <select name="provonce" id="s2"> <option value="hebei">请选择城市</option> </select></div><script> var data={"hunan":["长沙","岳阳","张家界"],"hubei":["武汉","襄阳","荆州"],"hebei":["石家庄","保定","张家口"]}; var ele = document.getElementById("s1"); var ele2 = document.getElementById("s2"); ele.onchange = function (){ var cities = data[this.value]; //Array ele2.options.length = 1; //1代表有一个默认显示值:请选择城市 for (var i=0;i<cities.length;i++){ var opt = document.createElement("option"); opt.innerText = cities[i]; ele2.appendChild(opt); } }</script>

onmouse<div id="container"> <div id="title">使用了onmouse事件↓</div> <div id="list"> <div class="item1">第一行</div> <div class="item2">第二行</div> <div class="item3">第三行</div> </div> </div><script> // 1.不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。 // 2.只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。 var container=document.getElementById("container"); var title=document.getElementById("title"); var list=document.getElementById("list"); title.onmouseover = function(){ list.style.display="block"; } container.onmouseleave = function(){ list.style.display="none"; }</script>

onmouseout表示鼠标悬停事件已经发生之后的动作

如果没有离开的动作,那么这三行将会一直被显示,那就需要onmouseleave,表示鼠标离开区域之后发生的动作

DOM_常用事件(dom事件种类)

移开鼠标之后又恢复原来的样子

onkey<input type="text" id="i1"/><script type="text/javascript"> var ele=document.getElementById("i1"); ele.onkeydown=function(e){ console.log("onkeydown",e.key) }; ele.onkeyup=function(e){ console.log("onkeyup",e.keycode) };

onkeyup 事件会在键盘按键被松开时发生。

onkeydown 事件会在用户按下一个键盘按键时发生。

与onkeyup 事件相关的事件发生次序:

onkeydownonkeypressonkeyup

onblur and onfocusvar ele = document.querySelector("#i1");// 获取焦点事件ele.onfocus = function () { console.log("in")};// 失去焦点事件 ele.onblur = function () { if(ele.value.length<5){ ele.value = "太短了,重新输入"; }}

当鼠标点击框的时候,是获取焦点事件鼠标移开以后就失去了,用法就是可以实时的进行判断,如果输入结束可以立即判断输入是否合法。

点击输入框,就输出in了,当我输入‘12’以后并且点击其他地方

冒泡区域

现有两块区域,小的c2,大的c1

<div class="c1"> <div class="c2"></div> </div> <script> var ele1 = document.querySelector(".c1"); ele1.onclick = function () { alert("c1区域") }; var ele2 = document.querySelector(".c2"); ele2.onclick = function (event) { alert("c2区域"); // 如何阻止事件冒泡 event.stopPropagation(); } </script>

一般情况下,鼠标进入绿色区域后,会弹窗显示“c1区域”,到达蓝色部分后会依次弹窗显示“c2区域”,“c1区域”

如果想要达到蓝色区域只属于c2区域,不向外延伸,就加入一个stopPropagation

本文链接地址:https://www.jiuchutong.com/zhishi/310140.html 转载请保留说明!

上一篇:php中__callStatic方法的使用(php static function)

下一篇:discuz 发帖默认权限 模板修改方法(discuz发帖标签)

  • 办税员可以购票吗?
  • 没有销项购买税金税盘如何做账
  • 小规模纳税人征税率为多少
  • 增值税票是什么
  • 小规模免征增值税政策
  • 利润表季度怎么填写
  • 发票红冲原票怎么处理
  • 收到货物损失赔偿标准
  • 纳税人申请退税需要报送的资料和证件有
  • 平价转让股权个税申报表填写
  • 流动负债中的短期借款
  • 建设工程中税费如何承担
  • 法人的往来款可以转为实收资本吗?
  • 月末收到一批b材料,结算凭证未到,估价50000
  • 预收账款企业所得税怎么处理会计分录
  • 企业支付劳务费到底需要发票吗
  • 电子发票二维码怎么下载
  • 社保网上申报操作指南
  • 公积金社保报销会计分录怎么写?
  • 工商年报纳税总额怎么填写才正确
  • 工会经费怎么使用
  • linux CentOS WEB服务器分区方案
  • 银行手续费填在汇算清缴的哪个表
  • 职工教育经费培训费扣除比例
  • 开办费的账务处理实例
  • Win10 KB5004476 可选更新 解决XGP游戏无法安装的问题
  • 收到现金股利会引起什么变化
  • 资产减值的会计政策
  • 公司为员工缴纳社保的基数怎么确定
  • php 编程
  • 换股的具体方式是什么
  • 虚开发票的管理办法是什么?
  • 建筑业会计需要做到哪些
  • 汽车购置税去哪交钱
  • 增值税发票半年能开吗
  • 财务报销单据不能用圆珠笔写吗
  • js鼠标键盘事件
  • vue中webpack用来干啥
  • commonjs的特点
  • pytorch技巧
  • 材料报废及处置方案
  • 税款返还 分录
  • 反射怎么解释
  • 费用按照归属的不同可分为
  • 阴影等级是什么
  • 长期资产包含哪些
  • 差旅费报销金额大于实际发生金额
  • 材料采购账户的借方登记什么
  • 年终奖的个税税率表
  • 企业的管理费用,财务费用和销售费用计不计成本呢
  • 如何恢复sql数据库
  • 发票金额少于付款金额怎么做账
  • 有销项没有进项怎么做分录
  • 筹建期有时间限制吗
  • 用负数表示的例子
  • 分公司出现法律问题谁负责
  • 发票当月没开
  • 暂估有几种处理方法
  • 期间费用是啥
  • SQL Server Alwayson添加监听器失败的解决方法
  • sql server数据库中的null(空值)
  • mysql5.7.26启动失败
  • 电脑bios怎么关
  • slmgr.vbs /dli
  • linux中安装vim命令
  • imac如何删除客人用户
  • win平板装ubuntu
  • 电脑跳出windows 许可
  • win10更新后有线网络无法使用
  • 电脑迅雷影音在哪个文件夹
  • python 单例
  • shell脚本判断字符串是否为空
  • Node.js中的construct构造函数
  • javascript题
  • android 图片滚动
  • 成都市电子税务局网上申报
  • 在北京税前工资8000算多的吗
  • 丹阳税务局一分局领导
  • 海珠税务局许丰
  • 武汉市第二税务稽查局地址
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设