打开一个新页面或者刷新的时候触发 demo查看 相当于onload，加载页面时触发，但是在不同浏览器触发的有所不同 第一次加载页面时，onpageshow在ie浏览器中不触发，其他情况都触发 11.onresize...} 13.onpopstate 当浏览器窗口记录改变时运行的脚本， 14.onredo 当文档执行撤销时触发的事件 二、form事件属性 由html表单内触发的事件，通常使用在form元素中 1.onblur...=myfun()的事件，当input失去焦点的时候产生什么样的效果 demo查看 2.onfocus 元素获得焦点时触发事件，和onblur相反 demo查看 3.onchange 当元素值被改变的时候触发事件...required属性来使用 required如果使用该属性，代表必填字段，oninvalid是当元素无效时触发的事件 function myfun() { alert('填写为空') } demo查看 8.onreset 表单中重置按钮被点击时触发
1.onblur：元素失去焦点时触发 Onblur 经常用于表单验证，所有主要浏览器都支持 onblur 事件 onblur="myFunction()"> 支持该事件的...：表单元素的内容改变时触发 当用户改变input输入框内容时执行，也可用于单选框与复选框改变后触发的事件，所有主要浏览器都支持。...5.onfocusout：元素即将失去焦点时触发 onfocusout 事件在元素即将失去焦点时触发。onfocusout 事件类似于 onblur 事件。主要的区别是 onblur 事件不支持冒泡。...不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。...另外一点不同是 onchange 事件也可以作用于 和 元素。
事件概念 某些组件被执行了某些操作后，触发某些代码的执行； 事件：某些操作，如点击，双击，鼠标移动，键盘按下……； 2、事件源 组件，如按钮、文本输入框等； 3、监听器 代码； 4、注册监听 将事件源与监听器绑定...，当事件源上发生了某个事件，则出发执行某个监听器代码； 二、常见的事件 1、点击事件 onclick：点击事件 ondblclick：双击事件； 2、焦点事件 onblur：失去焦点； onfocus：...onmouseup：鼠标按键被松开； 5、键盘事件 onkeydown：某个键盘按键被按下； onkeypress：某个键盘按键被按下并松开； onkeyup：某个键盘按键被松开； 6、选中和改变 onchange...：域的内容被改变； onselect：文本被选中； 7、表单事件 onsubmit：确认按钮被点击； -- 可以阻止表单提交，方法返回false则表单被阻止 onreset：重置按钮被点击；
虽然内联在早期使用较多，但它是和HTML混写的，并没有与HTML分离。...JavaScript事件处理函数及其使用列表 事件处理函数 影响的元素 何时发生 onabort 图像 当图像加载被中断时 onblur 窗口、框架、所有表单对象 当焦点从对象上移开时 onchange...表单复位按钮 单击表单的reset按钮 onresize 窗口 当选择一个表单对象时 onselect 表单元素 当选择一个表单对象时 onsubmit 表单 当发送表格到服务器时 PS：所有的事件处理函数都会都有两个部分组成...input.onchange = function () { alert('Lee'); }; focus：当页面或者元素获得焦点时在window及相关元素上面触发。...form.onsubmit = function () { alert('Lee'); }; reset：当用户点击重置按钮在元素上触发。
前言 相信做网站对JavaScript再熟悉不过了，它是一门脚本语言，不同于Python的是，它是一门浏览器脚本语言，而Python则是服务器脚本语言，我们不光要会Python，还要会JavaScript...键盘事件 onkeydown #按键被按下 onkeypress #按键被按下并松开 onkeyup #按键被松开 3)框架事件 onabort 图像的加载被中断 onerror 在加载文档或图像时发生错误...4).表单对象 onblur 元素失去焦点 onchange 文本域的内容被改变 onfocus 元素获得焦点 onreset 重置按钮 onselect 文本选中 onsubmit 确认提交 总结
第一部分：form表单基础 表单验证使用onblur还是onchange....表单验证的作用：把输入的表单数据传入给JavaScript代码进行验证，可以让网络应用程序更加可靠，也能减少服务器的负担，同时减少客户端与服务器的带宽。...form对象是一个数组，负责存储表单中所与域的值，但它的数组元素并非利用数值索引存储，而是使用域独有的name属性设定的标示符。在后台服务器接收form表单域的值也是通过name来作为标示符的。...onchange事件不可以用于验证表单域的值是否为空。onblur事件适合触发数据验证。如何处理用户复制/粘贴文本到表单域中?...(onblur和onfocus是相反事件) onblur事件:表单域失去焦点时触发。 onfocus事件:表单元素或表单域获得输入的焦点时触发。
2、onfocus：元素获得焦点 3）加载事件：1、onload：一张页面或一幅图像加载完成 4）鼠标事件：1、onmousedown：鼠标按钮被按下，定义方法时，定义一个形参接受event对象，event... 2、onkeypress 某个键盘按键被按下并松开 3、onkeyup 某个键盘按键被松开 6）选中和改变：1、onchange...2、onreset 重置按钮被点击 【举例】基本事件示例 <!...} }*/ /* //改变事件 document.getElementById("city").onchange...* 3、给各个表单项绑定onblur事件 * */ window.onload = function () { document.getElementById
JavaScript事件 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。事件是基于对象存在，事件通常可以修饰多种对象。...，将js代码与HTML元素代码分离开，更加方便统一管理维护。...问题：HTML 元素添加事件， 与JS添加事件是否可以完全等价？ 在实际开发中，如果传参数，使用HTML元素绑定事件，如果不传参数，使用JS绑定事件。传参数也可以使用与JS绑定事件【使用匿名函数】。...event对象 火狐没有全局event对象，必须在发生事件时，产生一个event对象 ，传递默认方法 6.form的提交、重置事件 submit/reset onsubmit = "return validateForm..." 对表单进行校验 7.改变事件 onchange 制作select联动效果 ---- 省市联动 重点 ： onclick 、onchange 、onblur、 onsubmit 8.默认事件的阻止和传播阻止
浏览器事件 常用浏览器事件与DOM事件，包括鼠标事件、键盘事件、框架/对象事件、表单事件、剪贴板事件、打印事件、拖动事件、多媒体事件、动画事件、过渡事件。...onmessage: 窗口对象接收消息事件时触发。 onchange: 窗口内表单元素的内容改变时触发。 oninput: 窗口内表单元素获取用户输入时触发。...onreset: 窗口内表单重置时触发。 onselect: 窗口内表单元素中文本被选中时触发。 onsubmit: 窗口内表单中submit按钮被按下触发。...ontoggle: 该事件在用户打开或关闭元素时触发。 表单事件相关 onblur: 元素失去焦点时触发。 onchange: 该事件在表单元素的内容改变时触发。...onreset: 表单重置时触发。 onsearch: 用户向搜索域输入文本时触发。 onselect: 用户在输入框内选取文本时触发。 onsubmit: 表单提交时触发。
事件通常与函数结合使用，函数不会在事件发生前被执行！...onblur 元素失去焦点。 onchange 域的内容被改变。 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。...(<body 和 <frameset) 2 表单事件 属性 描述 DOM onblur 元素失去焦点时触发 2 onchange 该事件在表单元素的内容改变时触发( <input, <keygen,...元素获取用户输入时触发 3 onreset 表单重置时触发 2 onsearch 用户向搜索域输入文本时触发 (<input="search") onselect 用户选取文本时触发 ( 使用onwheel 事件替代 ononline 该事件在浏览器开始在线工作时触发。 onoffline 该事件在浏览器开始离线工作时触发。
标签全局标准属性 规定了8个全局标准属性 class属性 用于定义元素的类名 id属性 用于指定元素的唯一id 注意该属性的值在整个HTML文档中具有唯一性 style属性 用于指定元素的行为样式 使用该属性后将会覆盖任何全局的样式设定...form表单事件 onblur当元素失去焦点时触发 onchange在元素的元素值被改变时触发 onfocus当元素获得焦点时触发 onreset当表单中的重置按钮被点击时触发 onselect在元素中文本被选中后触发...onsubmit在提交表单时触发 keyboard键盘事件 onkeydown在用户按下按键时触发 onkeypress在用户按下按键后，按着按键时触发。...onmousedown当元素上按下鼠标按钮时触发 onmousemove当鼠标指针移动到元素上时触发 onmouseout当鼠标指针移出元素时触发 onmouseover当鼠标指针移动到元素上时触发...onmouseup当在元素上释放鼠标按钮时触发 media媒体事件 onabort当退出时触发 onwaiting当媒体已停止播放但打算继续播放时触发。
文本框失去焦点事件、获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件...，我们可以使用jQuery的焦点函数focus(),blur()。...focus()：得到焦点时使用，和javascript中的onfocus使用方法相同。...如： $(“p”).focus(); 或$(“p”).focus(fn) blur()：失去焦点时使用，和onblur一样。...代码如下： 第二种： jQuery 原理：让表单的val值等于其title值。
2、id属性 用于指定元素的唯一id 要注意该属性的值在整个HTML文档中要具有唯一性 3、style属性 用于指定元素的行内样式 使用该属性后将会覆盖任何全局的样式设定 4、title属性 用于指定元素的额外信息...onunload：在用户从页面离开时发生，例如点击跳转，页面重载，关闭浏览器窗口等。 2、Form表单事件 onblur：当元素失去焦点时触发。 ...onchange：在元素的元素值被改变时触发。 onfocus：当元素获得焦点时触发。 onreset：当表单中的重置按钮被点击时触发。 ...onsubmit：在提交表单时触发。 3、Keyboard键盘事件 onkeydown：在用户按下按键时触发。 onkeypress：在用户按下按键后，按着按键时触发。...onmousedown：当在元素上按下鼠标按钮时触发。 onmousemove：当鼠标指针移动到元素上时触发。 onmouseout：当鼠标指针移出元素时触发。
document.documentElement是专门获取html这个标签的 获取body的方法（document.body） document.body是专门获取body这个标签的 二.事件句柄 属性 当以下情况发生时，...出现此事件 onabort 图像加载被中断 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onerror 当加载文档或图像时发生某个错误...某个鼠标按键被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开 onmouseover 鼠标被移到某元素之上 onmouseup 某个鼠标按键被松开 onreset 重置按钮被点击...onresize 窗口或框架被调整尺寸 onselect 文本被选定 onsubmit 提交按钮被点击 onunload 用户退出页面 三.使用方法 1.获取单个元素 2.单个元素发送的事件 3.发生的内容相关替换...inp.onkeydown = function () { console.log('按下') }; 四.提取元素里面的内容 innerHTML:获取文本包括标签 innerText:获取文本不包括标签 val:获取表单里面的值
前言 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。...onfocus 元素获取焦点时触发 onblur 元素失去焦点时触发 onchange 该事件在表单元素的内容改变时触发, , , 和 ...onfocus 元素获取焦点时触发 onsubmit 表单提交时触发 onload 加载页面 onload 通常用于 元素，在页面完全载入后(包括图片、css文件等等。)...种方式 一、在 HTML body 中: 二、在 script 中 window.onload=function(){do something...}; 使用示例...onfocus 获取焦点的时候触发 onblur 当元素失去焦点的时候触发 使用示例 onfocus 获取焦点 和 onblur 失去焦点 <form
JS事件相关知识点整理 JS事件的驱动机制 常见JS事件 点击事件---onclick 焦点事件 获取焦点事件---onfocus 失去焦点事件----onblur 域内容改变事件---onchange...="callPolice()"/> ---- 域内容改变事件—onchange 域内容改变事件：元素组件的值发生改变时触发 代码演示: 时，弹出一个对话框--> onchange="callPolice()"> 大忽悠 小朋友时，弹出一个对话框--> 大忽悠和小朋友 ---- 表单提交事件—onsubmit 代码演示...-- 表单提交按钮被点击----- 执行run1() onsubmit 用于表单的校验 该事件能够控制表单的提交 true 表单成功提交 false 阻止表单提交
背景 在前端开发的过程中,一些表单的输入经常需要输入多个内容,如果采用一个输入框+逗号分隔的方式,展示起来不是很清晰,一般需要采用标签的方式 需求 可以指定空状态时的标题 设置标签颜色 每个标签的最大长度...={(e) => setInputValue(e.target.value)} onBlur={handleInputConfirm} onPressEnter={handleInputConfirm...join(separator) }); }; 编辑状态 当我们处于编辑状态的时候,打开表单后,它原本就有内容了 监听一下表单的内容,如果存在,则使用分隔标记分隔后塞入tags中 useEffect((...={(e) => setInputValue(e.target.value)} onBlur={handleInputConfirm} onPressEnter=...={(e) => setInputValue(e.target.value)} onBlur={handleInputConfirm} onPressEnter=
HTML属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现 如：class=”a” 不同属性之间用“空格”隔开 HTML属性和属性值之间用...存储空间中的数据发生变化时）运行脚本 onundo 当文档执行撤销时运行脚本 onunload 当用户离开文档时运行脚本 表单事件 属性 描述 onblur 当元素失去焦点时运行脚本 onchange...当元素改变时运行脚本 oncontextmenu 当触发上下文菜单时运行脚本 onfocus 当元素获得焦点时运行脚本 onformchange 当表单改变时运行脚本 onforminput 当表单获得用户输入时运行脚本...oninput 当元素获得用户输入时运行脚本 oninvalid 当元素无效时运行脚本 onreset 当表单重置时运行脚本。...ontoggle 当用户打开或关闭 元素时触发
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。...3.鼠标单击事件( onclick ） onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。...） onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。...onblur="message()"> 8.内容选中事件（onselect） 选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，...注意：不同浏览器对onunload事件支持不同。 <!
最近使用antd UI 的表单提交数据,数据里面有的是数组，有的是对象。提交的时候还要去校验参数，让人非常头疼。...如图 自定义表单组件，在 Form.Item 组件下使用。 Form.Item子节点的props接收两个参数：value,onChange。...props 类型 描述 value any 表单对应的Form.Item上name的值。 onChange function 修改表单属性值。...last, setLast] = useState(null); // 值改变就调用 onChange 因为使用的是对象所以调用的时候传对象。...type="primary" onClick={submit}> submit ); } 若需要使用表单验证自定义组件的值
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
