位置: 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发帖标签)

  • iphone电池鼓包的征兆(苹果电池鼓包有危险吗)

    iphone电池鼓包的征兆(苹果电池鼓包有危险吗)

  • 为什么小号扩列不能匹配(小号扩列怎么没有了)

    为什么小号扩列不能匹配(小号扩列怎么没有了)

  • 哪里可以充5块钱话费(哪里充5块钱话费)

    哪里可以充5块钱话费(哪里充5块钱话费)

  • 复印机可以打印吗(复印机可以打印手机上的图片吗?)

    复印机可以打印吗(复印机可以打印手机上的图片吗?)

  • 手机流量用起来卡怎么办(手机流量用起来好快)

    手机流量用起来卡怎么办(手机流量用起来好快)

  • 手机坐公交怎么刷卡(手机坐公交怎么刷)

    手机坐公交怎么刷卡(手机坐公交怎么刷)

  • 一个手机可以注册几个微信号(一个手机号可以注册几个微信号)

    一个手机可以注册几个微信号(一个手机号可以注册几个微信号)

  • 抖音小店可以卖不同类目的产品吗(抖音小店可以卖淘宝的东西吗)

    抖音小店可以卖不同类目的产品吗(抖音小店可以卖淘宝的东西吗)

  • 不是原装的线会把手机充坏吗(不是原装的线充电好吗)

    不是原装的线会把手机充坏吗(不是原装的线充电好吗)

  • 苹果平板a1566是什么型号(苹果平板a1566是什么时候生产的)

    苹果平板a1566是什么型号(苹果平板a1566是什么时候生产的)

  • 华为有没有黑暗模式(华为手机有没有黑暗模式)

    华为有没有黑暗模式(华为手机有没有黑暗模式)

  • 微信被屏蔽后显示什么(微信被屏蔽之后发消息是怎样的)

    微信被屏蔽后显示什么(微信被屏蔽之后发消息是怎样的)

  • 抖音直播间抽卡怎么用(抖音抽卡怎么才能抽到2021)

    抖音直播间抽卡怎么用(抖音抽卡怎么才能抽到2021)

  • 华为watch gt2怎么打电话(华为watchgt2怎么连接苹果手机)

    华为watch gt2怎么打电话(华为watchgt2怎么连接苹果手机)

  • 陌陌注销后多久可以重新注册(陌陌注销后多久生效)

    陌陌注销后多久可以重新注册(陌陌注销后多久生效)

  • 苹果充新机什么意思(什么叫苹果充新机)

    苹果充新机什么意思(什么叫苹果充新机)

  • 手机丢了怎么补办手机卡(手机丢了怎么补办手机号码)

    手机丢了怎么补办手机卡(手机丢了怎么补办手机号码)

  • 抖音能用手机号找人吗(一部手机能用两个抖音号吗)

    抖音能用手机号找人吗(一部手机能用两个抖音号吗)

  • 淘宝直播怎么缩小窗口(淘宝直播怎么缩小返回桌面)

    淘宝直播怎么缩小窗口(淘宝直播怎么缩小返回桌面)

  • airpods怎么改名字(airpods要怎么改名字)

    airpods怎么改名字(airpods要怎么改名字)

  • 小米手机msa怎么禁止(小米手机mmi码怎么开启)

    小米手机msa怎么禁止(小米手机mmi码怎么开启)

  • 如何让手机录的视频更清晰(如何让手机录的视频内存变小)

    如何让手机录的视频更清晰(如何让手机录的视频内存变小)

  • retina显示屏相当于几k(retina屏和led屏)

    retina显示屏相当于几k(retina屏和led屏)

  • oppoa9是新款吗(oppoa9什么上市的)

    oppoa9是新款吗(oppoa9什么上市的)

  • vivox27水印相机怎么设置(vivox50水印相机)

    vivox27水印相机怎么设置(vivox50水印相机)

  • Win10系统怎么设置程序在指定CPU上运行?(win10系统怎么设置锁屏壁纸)

    Win10系统怎么设置程序在指定CPU上运行?(win10系统怎么设置锁屏壁纸)

  • 工程施工企业收入确认成本结转案例
  • 民营医院的财务管理制度
  • 什么是实收资本其入账价值如何确定
  • 第二季度纳税申报
  • 资产负债表中本期盈余等于什么?
  • 环保设备折旧年限和残值率
  • 企业清算的所得税处理包括哪些内容
  • 将资产货物用于业务宣传增值税
  • 销售人员的提成一般是多少
  • 银行已扣社保会计分录怎么做
  • 亏损企业交税
  • 增值税普通发票几个点
  • 微税平台怎么打印发票
  • 违约金的涉税处理
  • 何为销项税额
  • 关于个人所得税下列说法正确的是
  • 先入库发票未到分录
  • 企业向国有银行贷款的利率
  • 贷款利息可以抵扣吗
  • 审计报告报备流程
  • 小额贷款公司可以放贷吗
  • 存货跌价准备计提原则
  • 采购费用应计入材料采购成本
  • 企业的债权资产
  • 履约保证金计入什么会计科目
  • win11任务栏全部显示
  • 电脑显示器模糊不清晰是什么原因
  • 删除桌面上的图标用什么键
  • linux attached
  • 内置管理员无法打开此应用
  • 五彩鲍鱼的做法
  • 员工重复报销后如何处理
  • 事件监听处理的实现原理
  • 委托加工不提供原材料会计分录
  • 合法票据的有哪些
  • vue.config.js 中 devServer.proxy 配置说明,以及配置正确不生效问题
  • 蒙特城堡干红葡萄酒价格
  • 实收资本增加印花税申报流程
  • 计提本月财务费用会计分录
  • 办理完税证明需要什么资料
  • 大额的维修费用怎么摊销
  • 依法无需办理税务登记证
  • 如何开具通用电子发票
  • mysql中如何设置默认值
  • 补贴收入是否缴纳个税
  • 预交的城建税及附加税
  • 银行代发的工资公司要求返还然后发一半
  • 企业送给客户的礼品怎么做分录
  • 收银电脑怎么录商品
  • 事业单位可以购买工作服吗
  • 股东借款转增资本公积会计处理
  • 采购费用属于什么会计分录
  • 对公账户 发票
  • 收款凭证和付款凭证是出纳人员收款、付款的依据
  • 公司法人可以变更给老人吗
  • mysql忘记了初始密码
  • win10 发布
  • Windows Server 2003服务器群集创建和配置指南
  • main.exe是什么意思
  • win8截屏在哪个文件夹
  • 怎么取消桌面右下角图标隐藏
  • windows10稳定版本
  • Win10系统安装步骤
  • win10周年版
  • WIN10安装教程
  • django定时器
  • java框架怎么用
  • 安卓画图板
  • 批处理应用实例
  • bat批量创建文件夹及子文件夹
  • python算法怎么用
  • 防止shell脚本重复执行
  • unity怎么写接口
  • adb push、adb install 和强制安装
  • android 轮播
  • 使用jquery实现的项目
  • 电子税务局实名认证
  • 新的国家税务局发票怎么冲红
  • 双公开双反馈什么意思
  • 湖南省税务举报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设