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

  • 如何推广自己的博客?(如何推广自己的微信公众号)

    如何推广自己的博客?(如何推广自己的微信公众号)

  • 荣耀x10max能支持内存卡吗(荣耀x10max支持90hz吗)

    荣耀x10max能支持内存卡吗(荣耀x10max支持90hz吗)

  • qq视频聊天怎么弄上贴纸(qq视频聊天怎么看对方屏幕)

    qq视频聊天怎么弄上贴纸(qq视频聊天怎么看对方屏幕)

  • 手机nfc在哪里打开(手机nfc在哪里打开苹果)

    手机nfc在哪里打开(手机nfc在哪里打开苹果)

  • 苹果8plusa1864是全网通吗

    苹果8plusa1864是全网通吗

  • 微信群删了怎么恢复?(微信群删了怎么恢复找回来)

    微信群删了怎么恢复?(微信群删了怎么恢复找回来)

  • microsoft net framework是什么意思(microsoft net framework有什么用)

    microsoft net framework是什么意思(microsoft net framework有什么用)

  • qq怎么更换聊天背景(qq怎么更换聊天背景全部)

    qq怎么更换聊天背景(qq怎么更换聊天背景全部)

  • ps为什么安装不了(ps为什么安装不了atn的插件)

    ps为什么安装不了(ps为什么安装不了atn的插件)

  • 苹果原装充电器多少瓦(苹果原装充电器哪个好 图拉斯)

    苹果原装充电器多少瓦(苹果原装充电器哪个好 图拉斯)

  • vivo智慧投屏不了(vivoz1智慧投屏)

    vivo智慧投屏不了(vivoz1智慧投屏)

  • 华为che2一tl00m是什么型号(华为型号che2-tl00)

    华为che2一tl00m是什么型号(华为型号che2-tl00)

  • 华为荣耀9x是不是全网通(华为荣耀9x是不是防水的)

    华为荣耀9x是不是全网通(华为荣耀9x是不是防水的)

  • 有固态硬盘还要硬盘吗(有固态硬盘还要加机械硬盘吗)

    有固态硬盘还要硬盘吗(有固态硬盘还要加机械硬盘吗)

  • iphone11超取景框功能怎么使用(iphone11超取景框怎么用)

    iphone11超取景框功能怎么使用(iphone11超取景框怎么用)

  • 华为智能助手路况怎么关闭(华为智能助手路况怎么取消)

    华为智能助手路况怎么关闭(华为智能助手路况怎么取消)

  • 抖音怎么录超过15秒的(抖音怎么录超过三分钟)

    抖音怎么录超过15秒的(抖音怎么录超过三分钟)

  • 华为p20熄屏时间位置(华为p20手机灭屏显示时间设置)

    华为p20熄屏时间位置(华为p20手机灭屏显示时间设置)

  • 开淘宝店的详细步骤(开淘宝店的详细步骤2019)

    开淘宝店的详细步骤(开淘宝店的详细步骤2019)

  • 图像识别过程中特征定义有哪些方式(图像识别目的)

    图像识别过程中特征定义有哪些方式(图像识别目的)

  • 华为畅享9是双卡双待吗(华为畅享9双系统怎么设置)

    华为畅享9是双卡双待吗(华为畅享9双系统怎么设置)

  • p30手机24小时怎么设置(p30如何调24小时)

    p30手机24小时怎么设置(p30如何调24小时)

  • 一加和oppo什么关系(一加和oppo什么时候合并)

    一加和oppo什么关系(一加和oppo什么时候合并)

  • cad量面积(cad量面积如何计算它的面积)

    cad量面积(cad量面积如何计算它的面积)

  • 苹果上怎么用微信支付欢乐豆(苹果上怎么用微信支付微信豆)

    苹果上怎么用微信支付欢乐豆(苹果上怎么用微信支付微信豆)

  • qq如何发闪照(qq如何发闪照视频)

    qq如何发闪照(qq如何发闪照视频)

  • 聊一聊浏览器打印 - window.print(浏览器你)

    聊一聊浏览器打印 - window.print(浏览器你)

  • 前端权限控制(一):前端权限管理及动态路由配置方案(前端权限控制实战)

    前端权限控制(一):前端权限管理及动态路由配置方案(前端权限控制实战)

  • 应纳税所得额的会计分录
  • 出售股东
  • 收到借款利息如何计算
  • 销售费用计入产品生产成本吗
  • 自制原始凭证和原始凭证的区别
  • 合法的扣税凭证图片
  • 润滑油交消费税税率
  • 航天金税交499
  • 支付给对方的押金
  • 办公室的取暖费怎么做会计分录
  • 企业接收政府划入资产的税务处理办法
  • 假的手撕票已经入账了怎么办?
  • 一般纳税人吧
  • 普通发票冲红的限制几张以上
  • 职工福利费包括五险一金吗
  • 二手店铺转让手续流程
  • 商场现金收入如何计算
  • 经办人需要承担风险盘锦交通运输破坏营商环境
  • 应付账款做保理账务怎么处理
  • 货币性项目和非货币性项目的区别是什么?如何进行处理?
  • 1697510586
  • 食堂买菜怎么算
  • 宽带测速器在线测速
  • 发生额对照表
  • 内置管理员无法激活
  • 企业支付宝给别人有什么用
  • 在php中,字符串有哪些表示形式
  • 小微企业免征税额度
  • 有形动产增值税税率是多少
  • 企业接受股权投资概念政府基金
  • kjournald是什么进程
  • 增值税的计税依据包括契税吗
  • 委托加工不提供原材料会计分录
  • framework 4 client profile 不动
  • js正则表达式删除特定字符
  • 一文教会你何为重绘、回流?
  • php单例模式的简写是什么
  • thinkphp框架介绍
  • python的Django框架
  • 嵌入式从业10年,聊聊我对工业互联网和消费物联网的看法 | 文末赠书4本
  • 使用php免费发送短信
  • php面试知识点
  • 所得税申报表上的营业成本怎么填
  • 海关缴款书当月能查到吗
  • sql注入漏洞不会出现在哪个位置
  • 帝国cms使用手册
  • mybatis拦截器执行顺序
  • 发票金额 含税
  • 处置子公司如何纳税
  • 小额贷款在银行需要什么条件
  • 减值准备减少记哪方
  • 幼儿园收取的生活费免税吗
  • 资金退回怎么记账
  • 开会旅游的费用是多少
  • 公司土地和厂房已卖出但是不和员工了解
  • 收到退留抵税额会计分录
  • 发出存货的计价应当采用
  • 党组织专项经费包括什么
  • 酒店代金券是什么意思
  • 长期待摊费用处置
  • 进项税转出补税按多少补税
  • 利润表中公允价值变动为贷
  • 原始单据的重要性
  • microsoft window vista
  • mxoaldr.exe - mxoaldr是什么进程 有什么用
  • keyemain.exe是什么
  • windows7开机显示错误恢复进不去
  • linux设置服务器ip地址
  • scikit-learn svr
  • Cocos2dx 3.2 + vs2012 + win7 改变面黑色背景的大小
  • android系统架构由几部分组成
  • 肉鸡下的鸡蛋可以吃吗
  • linux文件inode详解
  • [置顶]津鱼.我爱你
  • 深入理解计算机系统 电子书
  • 安卓手机怎么设置自动化
  • EasyUI Pagination 分页的两种做法小结
  • 前端框架到底是什么
  • 林则徐家训带来的启示
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设