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

  • 其他权益工具投资属于什么科目
  • 纳税人未抄报税是什么意思
  • 房地产增值税抵减土地出让金
  • 交强险可以打折扣吗
  • 有限合伙企业应当
  • 出纳个人账户转公户
  • 费用分割单模板
  • 装修辅材行业辅材现状
  • 发票章没盖在盖章处
  • 培训机构给学员过生日
  • 销售土地如何交增值税
  • 仓库物料入库
  • 纳税人发生纳税义务,未按照规定
  • 2019水利基金税率是多少
  • 并购重组中需要哪些条件
  • 洗衣店每个月水电费多少钱
  • 通行费如何填报表二
  • 参加展会的住宿费计入什么科目
  • 境内企业技术转让 增值税
  • 销项税额抵减会取得专用发票吗为什么
  • 上交印花税分录
  • 未分配利润是什么类科目
  • 转贴现属于什么市场
  • 发票作废什么时候生效
  • 发票认证只认证进项吗
  • 进项退回怎么做账
  • 投资理财产品的优势和劣势
  • 账户禁用无法登录怎么办
  • 什么叫市净率?它有何意义?
  • 医疗机构医疗服务自查报告怎么写
  • 基于php代码实现数据库
  • php的file函数
  • php字符串函数大全
  • 代发工资如何合理避税
  • mac快捷键是什么意思
  • 单位收到的投标通知书
  • 小规模纳税人进项可以抵扣吗
  • pdo_mysql
  • 劳务费可以抵扣进项吗
  • 处理固定资产时的账务处理
  • 索洛维茨在哪
  • 音乐制作人评刀郎新专辑
  • php哪本书最好
  • 员工多了怎么管理办法
  • 应收账款计提坏账准备是什么意思
  • 技术服务合同的税率
  • 银行汇票的特点和用途
  • 法人工资应该怎么处理
  • 购买方收到的违约金
  • 企业以现金形式发工资
  • 优惠的会计分录
  • 应付票据转应付账款分录
  • 应纳税所得额计算公式excel
  • 代扣和代缴的区别
  • 小规模纳税人购入货物收到增值税专用发票
  • 外购的商品用于生产
  • 资产类科目一般是什么
  • 其他应收款款项性质如何填写
  • 主营业务收入分为
  • 餐饮怎么扣税
  • 检查sql脚本语法
  • mysql千万级分页优化
  • win8 preparing automatic repair
  • win10预览版21390
  • windows许可证即将过期怎么办知乎
  • 微软正在准备windows
  • linux怎样挂载
  • ubuntu 18.04怎么用
  • fedora使用
  • win10安装 升级
  • win10通讯
  • crontab环境变量不生效
  • win8.1玩游戏卡
  • win10周年更新版是什么意思
  • [置顶]电影名字《收件人不详》
  • javascript中的类型转换
  • unity jsonutility 数组
  • shell实际例子
  • angularjs2
  • 技术总结2000字
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设