以下是一些常见的JavaScript事件： 点击事件（click）： 鼠标移动事件（mousemove）： 键盘事件（keydown、keyup）： 表单事件（submit、change）： 页面加载事件...你可以使用该事件来实现根据鼠标位置进行交互的效果，如跟随光标的特效。...; } }); 4：表单事件（submit、change）： 表单事件在用户提交表单或更改表单元素的值时触发。...你可以使用表单事件来验证用户的输入、发送数据或执行其他与表单相关的操作。...你可以使用该事件来实现与页面滚动相关的效果，如导航栏的固定位置或懒加载图片等。
change事件在用户行为导致input | select | textarea的value改变 && (失去焦点 || 回车)时触发。 composition事件在输入法编辑器输入字符后触发。...change change事件触发时机根据表单元素type与用户交互决定。...对于type为radio | checkbox的input，当元素:checked时触发（通过点击或者使用键盘） 对于需要选择的表单元素，当用户完成提交时触发，例如： 点击select中的选项。...其中keydown会在按下任意字符后触发，keyup会在按键弹起后触发（chrome下中/英切换按钮弹起不会触发keyup）。...事件触发顺序 对于input[type="text"]当没有输入中文时，事件触发顺序为： keydown keypress beforeinput input keyup 失去焦点 change 当使用输入法输入
当这些元素的值发生变化后，就会触发change()事件。...(function(e) { $("#result").html(e.target.value) }); 当输入框中的内容改变后，就会触发change()事件，输入框中改变后的内容就会输出到“输出结果...4、submit()事件： 这个是表单提交事件，提交表单时触发。...三、键盘事件： 1、keydown()、keyup()和keypress(): keydown类似于mousedown，按下键盘时的事件；keyup就类似于mouseup，按下键盘再松开的那个时候触发的事件...比如一般的网站登录的时候要输验证码，当你输完验证码，就会立即提示验证码正确还是错误，而不需要点击“登录”按钮后再去判断，这就用到了Ajax。接下来就看看如何使用。
代码片段1: 在表单中禁用“回车键” 大家可能在表单的操作中需要防止用户意外的提交表单，那么下面这段代码肯定非常有帮助： $("#form").keypress(function(e) {...可能针对不同的表单形式，你需要调用不同类型的清楚方法，不过使用下面这个现成方法，绝对能让你省不少功夫。...下面的代码对于ajax操作非常有用，你可以有效的避免用户多次提交数据，个人也经常使用： 禁用按钮： $("#somebutton").attr("disabled", true); 启动按钮： $(..."#submit-button").removeAttr("disabled"); 代码片段4: 输入内容后启用递交按钮 这个代码和上面类似，都属于帮助用户控制表单递交按钮。...使用这段代码后，递交按钮只有在用户输入指定内容后才可以启动。 $('#username').keyup(function() { $('#submit').attr('disabled', !
下述内存主要讲述了《JavaScript高级程序设计（第3版）》第14章关于“表单脚本”。 刚开始人们使用JavaScript，最主要的目的之一就是表单的验证，分担服务器处理表单的责任。...如果表单没有提交按钮，安回车键不会提交表单。 注意，通过上述方式提交表单，浏览器会在将请求发送给服务器之前触发submit事件。 这样就可以决定是否需要验证表单。...提交表单过程中有可能发生的最大问题就是，重复提交表单。 解决方式： （1）第一次提交表单后就禁用提交按钮。 要在“submit”事件处理函数中处理，不能在“click”事件处理函数中处理。...resubmit; 如果是success或error，提示“成功或失败”，然后变为状态恢复初始。...因为某些浏览器中，blur事件会先于change事件；有些会恰好相反！
基础教程之事件监听操作 一、事件监听方法 1.执行事件 $("p").click(); 2.监听事件 $("p").click(function(){ // 动作触发后执行的代码...}); 3.on 绑定事件 $("p").on("click", function(){ alert( "haha" ); }); //可以对后追加的数据生效...mouseleave 鼠标离开 touch 触摸事件 touchstart 触摸开始 touchmove 移动 touchend 触摸结束 键盘事件 keydown 键盘按下 keyup...键盘放开 表单事件 submit 表单提交 change 内容改变 focusin 当元素获得焦点时 focusout 当元素失去焦点时 文档/窗口事件 load 窗口载入 resize...change","#text",function(event){ console.log(event.type) }) $(document).on("
focusout 方法用于监听用户元素失焦操作（如input元素），只有元素失焦后才生效。...focus与blur事件 focus 方法用于监听用户元素聚焦操作（如input元素），只有元素聚焦后才生效。...blur 方法用于监听用户元素失焦操作（如input元素），只有元素失焦后才生效。...change事件 只有当表单元素（input元素、textarea元素、select元素）值发生改变之后并且失焦（针对输入文本的元素，其他立即触发），会触发表单绑定的change事件 方法：$ele.change...事件 keydown方法用于监听用户键盘按下操作，只有键盘按下后才生效，keyup方法用于监听用户键盘松开操作，只有键盘松开后才生效，这两个方法用法及其类似，所以这只介绍keydown事件。
.capture .self .once // 防止事件冒泡 // 提交事件不在重载页面... 可以通过全局 config.keyCodes 对象自定义按键修饰符别名： // 可以使用 v-on:keyup.f1 Vue.config.keyCodes.f1 = 112 按键修饰符... 可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。 ...-- Ctrl + Click --> Do something 九，表单控件绑定 基础用法 用v-model...指令在表单控件元素上创建双向数据绑定。
reset() 将所有表单重置 submit() 提交表单 获取表单对象的方法有很多种，如下： document.getElementById('myForm');//使用ID获取<form...if (e.ctrlKey && e.keyCode == 13) fm.submit();//判断按住了ctrl和enter键触发 PS：在表单中尽量避免使用name="submit"或id="submit...提交数据最大的问题就是重复提交表单。...因为各种原因，当一条数据提交到服务器的时候会出现延迟等长时间没反映，导致用户不停的点击提交，从而使得重复提交了很多相同的请求，或造成错误、或写入数据库多条相同信息。...有一种做法是判断字符是否合法，这是提交后操作的。那么我们还可以在提交前限制某些字符，还过滤输入。
（自顶向下） IE没有捕获事件 触发顺序，先捕获，后冒泡 focus，blur，change，submit，reset，select 等事件不冒泡 复制代码 取消冒泡和阻止默认事件 取消冒泡： W3C标准...event.stopPropagation();但不支持ie9以下版本 IE独有 event.cancelBubble = true; 封装取消冒泡的函数 stopBubble(event) 阻止默认事件: 默认事件 — 表单提交...0/1/2 DOM3标准规定:click事件只能监听左键,只能通过mousedown 和 mouseup来判断鼠标键 如何解决mousedown和click的冲突 复制代码 键盘事件 keydown keyup...keypress keydown > keypress > keyup keydown和keypress的区别 keydown 可以响应任意键盘按键，keypress只可以相应字符类键盘按键 keypress...返回ASCII码，可以转换成相应字符 文本操作事件 input,focus,blur,change 窗体操作类(window上的事件) scroll load
注意：$(A).before(B)的操作，不是将B插入A前面，而是将A插入B前面 删除HTML元素 删除HTML元素一般使用jquery中的remove()和empty() remove()的作用就是从...表单事件： submit，change，focus 窗口事件: scroll，resize 事件绑定 事件绑定语法bind()方法： bind(type,[data],fn) click(),blur...，发生keydown事件，keyup当键盘被松开时发生keyup事件。...keypress()当键盘或按钮被按下时，发生keypress事件。 表单事件 当提交表单时，会发生submit事件。...change()当元素的值发生改变时，会发生change事件，focus()当元素获得焦点时，触发focus事件。blur()当元素失去焦点时触发。
提交事件（submit）： 当表单提交时触发。改变事件（change）： 当表单元素的值改变时触发（通常用于输入框、下拉框等）。...鼠标移入/移出事件（mouseover/mouseout）： 当鼠标移入或移出元素时触发。键盘事件（keydown/keyup）： 当用户按下或释放键盘上的按键时触发。
keydown：键盘按下时触发； keyup：键盘松开时触发； keypress：按一次键后触发。...其他事件 focus：当DOM获得焦点时触发； blur：当DOM失去焦点时触发； change：当、或的内容改变时触发； submit：当...提交时触发； ready：当页面被载入并且DOM树完成初始化后触发。...假设我们想给一个表单绑定submit事件，下面的代码没有预期的效果： // 代码有误: $('#testForm...() { console.log('init B...'); }); $(function () { console.log('init C...'); }); 事件参数 有些事件，如mousemove
表单伪类选择，就是根据表单元素的标签属性来选取某一类表单元素。...");//设置HTML内容 }); }); 对元素的值进行操作 在jQuery中，使用val()方法返回或设置被选元素的value属性。...").appendTo("p"); }); }); 在元素外部插入节点 ---- after()：在被选元素后插入内容 insertAfter()：在被选元素后插入...元素的淡入与淡出 使用hide()与show()方法 show和hide方法可以接受参数控制隐藏的过程.: show(speed,callback) speed参数规定显示或隐藏的速度: - slow...() 文本框内容改变时触发 error() 加载错误时触发 focus() 有元素或者窗口获得焦点时触发 select() 文本框中的字符被选择之后触发 submit() 表单提交之后触发 load()
) 7 hover鼠标悬停事件 有两个参数（方法），鼠标一定到指定对象以及移出时会触发 二 键盘事件 1 keydown 键盘按下时触发的事件 2 keyup...键盘按下松开整个过程触发的事件 //keydown（）和keypress区别 keydown（）按下任意键都会触发，但keypress（）事件只在按下键盘中任意字符键（A-Z）时触发，功能键不会触发（如shift... 1 focus () :获得焦点事件 2 blur()： 失去焦点事件 3 focusin() ：获得焦点事件 4 focusout() :失去焦点事件 5 change...() :元素发生改变时，触发事件 6 select（）:当选中单行文本text或者多行文本areatext时，触发事件 7 submit() :表单提交事件 //focus()和focusin...}) 5 event.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮
10,one one()函数用于为每个匹配元素的一个或多个事件绑定一次性事件处理函数。 要删除通过one()绑定的事件，请使用unbind()或off()函数。...以表单元素为例，使用trigger("submit")可以触发该表单绑定的submit事件，也会执行表单submit事件的默认行为——表单提交操作。...; return false; // 返回值为false，将阻止表单提交 }else if( !...; return false; // 返回值为false，将阻止表单提交 } } ); 24，keydown 25，keypress 26，keyup keydown事件会在按下键盘按键时触发...keyup事件会在按下键盘按键并释放时触发。 例如：你一直按住A键，直到10秒钟后才释放，只会在释放按键的时候触发一次keyup事件。
虽然内联在早期使用较多，但它是和HTML混写的，并没有与HTML分离。...JavaScript事件处理函数及其使用列表 事件处理函数 影响的元素 何时发生 onabort 图像 当图像加载被中断时 onblur 窗口、框架、所有表单对象 当焦点从对象上移开时 onchange...图像、链接、表单 当按键被按下时 onkeypress 文档、图像、链接、表单 当按键被按下然后松开时 onkeyup 文档、图像、链接、表单 当按键被松开时 onload 主题、框架集、图像 文档或图像加载后...window.onload = function () { alert('Lee'); }; unload：当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发。...input.onselect = function () { alert('Lee'); }; change：当文本框(input或textarea)内容改变且失去焦点后触发。
二、防抖案例：搜索查询 比如我们在一个表单中输入内容，JS通过监听输入框值的变化来查询搜索结果，我们会通过keyup事件来处理，当键盘弹起时就会触发keyup事件，在事件处理函数中发送请求处理查询结果。...我们希望当我们抬起键盘间隔几百毫秒后再触发keyup事件处理函数发送请求查询（如果在间隔时间内再次触发keyup事件，就会把上一次的定时器清除，重新再计时）。...节流应用场景 监听滚动事件判断是否到页面底部自动加载更多 搜索联想功能 DOM元素的拖拽功能实现 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹） 防止高频点击提交，防止表单重复提交...节流应用场景 监听滚动事件判断是否到页面底部自动加载更多 搜索联想功能 DOM元素的拖拽功能实现 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹） 防止高频点击提交，防止表单重复提交...； 相同点 都可以通过使用 setTimeout 实现 降低回调执行频率。
表单事件：submit（表单提交）、change（表单元素值改变）、focus（表单元素获得焦点）等。 窗口事件：resize（窗口大小改变）、scroll（滚动条滚动）等。...然后，通过再次使用 on 方法，我们动态地绑定了按钮的鼠标移入事件。这意味着即使按钮是在页面加载后动态生成的，我们仍然能够为它添加新的事件监听器。...通过 setTimeout 函数，我们在一定时间后再次将背景颜色还原，实现了点击时的瞬间特效。 案例二：表单验证 表单验证是 Web 开发中常见的需求之一。...event.preventDefault(); // 进行表单提交前的其他操作 alert("表单验证通过，可以提交！")...在表单提交时，通过 submit 事件阻止默认的提交行为，执行其他操作（比如异步验证、数据提交等）。 结语：奇妙世界的探索 通过本文的学习，我们深入了解了 JQuery 事件绑定的基本原理和用法。
中定义一个方法 stopDefaultEventBtn(){ console.log("stopDefaultEventBtn") } 调用的时候, 我们定义一个submit表单提交按钮..., 我们知道表单有自己的提价时间, 点击按钮将跳转到form表单指定的action地址....submit的自动提交事件, 我们要阻止他, 而是使用我么自定义的stopDefaultEventBtn事件....-- submit 有自己的模式提交事件, 但通常我们不希望使用默认的提交时间, 而是使用我自定义的事件. --> 这时, 我们在调用方法, 发现不会自动跳转到action指定的事件了,...-- submit 有自己的模式提交事件, 但通常我们不希望使用默认的提交时间, 而是使用我自定义的事件. --> .
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
