常用事件 click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） ready...= $("#div1") // 鼠标点击 $li.click(function(){ // this指的是当前发生事件的对象...$text.focus(function(){ $(this).css({'background':'red'}); }); // 失去焦点...: this指的是当前发生事件的对象，但是它是一个原生js对象 $(this) 指的是当前发生事件的jquery对象 2....小结 jQuery常用事件: click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发
1 事件 一 .鼠标事件 1.ready（）页面载入事件：载入文档节点 2 click（）熟悉的单击事件 3 dbclick（）双击事件 4 mousedown() /mouseup... 首先来了解一下事件冒泡和捕获 事件冒泡：内部事件先触发，然后在触发外部事件 事件捕获：外部事件先被触发，然后在触发内部元素 mouseover（）/mouseout()... 2 blur()： 失去焦点事件 3 focusin() ：获得焦点事件 4 focusout() :失去焦点事件 5 change() :元素发生改变时，触发事件...可以在父元素上检测子元素获得焦点的情况 而focusout可以在父元素上检测子元素失去焦点情况 四 其他事件 1 scroll（）滚动滚动条时触发的事件 2 resize（）当调整窗口大小时触发的事件...在mousedown、mouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值（相当于event.button）。
在移动端上稍微有些不同，毕竟所有控制——无论单击、长按抑或划动——都由接触开始，也没有鼠标的「悬停」逻辑，为了方便判定，移动端上若想激活 :hover 也是单击（触摸）。...导航栏之所以不直接显示而是放进下拉菜单，也是为了在移动端等小尺寸设备中显示得优雅一点，因此这个单击判定其实是优势。...桌面端 移动端 focus 持续到失去焦点 松开时进入，持续到失去焦点 hover 悬停期间 按下时进入，持续到失去焦点 active 单击按下期间 触摸按下期间 综合来看，focus 是最合适的。...稍微查询就会发现，tabindex 是个全局属性，也就是说可以给几乎任何元素加上以使其可以聚焦，如 div>、 等，当然也包含不带 href 属性的 。...PC iOS Android focus 持续到失去焦点 默认不可用 松开时进入，持续到失去焦点 hover 悬停期间 按下时进入，持续到失去焦点 按下时进入，持续到失去焦点 active 单击按下期间
4.事件类型： 4.1鼠标事件：当用户通过鼠标在页面操作时触发； click事件：在用户单击鼠标按钮或者按下回车键触发； dblclick事件：在用户双击鼠标按钮时被触发； mouseover...事件：鼠标指针在元素外部，用户将移入另一个元素的边界时触发，感觉和mouseenter事件类似； mouseout事件：用户将其移入另一个元素内被触发。...mouseenter事件：在鼠标光标从元素外部移动到元素范围之内被触发；这个事件不冒泡； mouseleave事件：在鼠标光标从元素内部移动到元素范围之外被触发；这个事件不冒泡； mousemove事件...4.2焦点事件：当元素获得或失去焦点时触发； blur：在元素失去焦点时触发，这个事件不会冒泡，所有浏览器都支持。 ...foucs：在元素获得焦点时触发，这个事件不会冒泡，所有浏览器都支持。
："+mydiv.innerText); } div id='mydiv'>我是花狗，花狗的花，花狗的狗。...div> ? 对此还有： resize事件：当调整浏览器的窗口到一个新的宽度或者高度时，就会触发resize事件。...焦点事件：指元素对焦点的获得与失去，如文本框选中或者取消选中。 ---- 2.鼠标事件 例如当鼠标单击左键，会发生onclick事件： <!...'); } div id='mydiv'>我是花狗，花狗的花，花狗的狗。...---- 5.常用事件方法（包括窗口事件，鼠标事件，键盘事件，文本事件） 方法 描述 onabort 图像加载被中断 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标单击某个对象
test中调用，然后给onload事件绑定test函数即可 虽然示例5.3把问题解决了，但是在某些情况下仍然不能满足需求，例如，如果脚本代码分布在多个外部js文件中，而每个js文件都需要使用onload...表5-1-4 焦点相关事件 焦点相关事件 说明 blur( [ [data] , fn ] ) 元素失去焦点时发生的事件 focus( [ [data] , fn ] ) 元素获得焦点时发生的事件 下面我们通过一个示例来演示.../失去焦点事件绑定了函数 5.1.5 其他相关事件 除了上面的事件外，jQuery中还有一些其他的常用事件，详见表5-1-5所示。...){$(this).get(0).style.backgroundColor="white";}) 上述代码通过以前的普通方式给文本框分别绑定了失去焦点和获得焦点的事件，并在事件中改变了文本框的背景色...假设给所有的文本框通过bind绑定了鼠标单击事件，然后再动态创建一个文本框，此时绑定的鼠标单击事件对这个新创建的文本框无效；但是如果使用live进行绑定，那么新创建的文本框也会绑定鼠标单击事件。
test中调用，然后给onload事件绑定test函数即可 虽然示例5.3把问题解决了，但是在某些情况下仍然不能满足需求，例如，如果脚本代码分布在多个外部js文件中，而每个js文件都需要使用onload...表5-1-4 焦点相关事件 焦点相关事件 说明 blur( [ [data] , fn ] ) 元素失去焦点时发生的事件 focus( [ [data] , fn ] ) 元素获得焦点时发生的事件.../失去焦点事件绑定了函数 5.1.5 其他相关事件 除了上面的事件外，jQuery中还有一些其他的常用事件，详见表5-1-5所示。...(){ $(this).get(0).style.backgroundColor="white"; } ) 上述代码通过以前的普通方式给文本框分别绑定了失去焦点和获得焦点的事件，并在事件中改变了文本框的背景色...假设给所有的文本框通过bind绑定了鼠标单击事件，然后再动态创建一个文本框，此时绑定的鼠标单击事件对这个新创建的文本框无效；但是如果使用live进行绑定，那么新创建的文本框也会绑定鼠标单击事件。
即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。 要删除通过on()绑定的事件，请使用off()函数。...(某些函数也存在其它形式的用法，此处暂不列出)： // 这里的选择器selector用于指定可以触发事件的元素 // 这里的选择器ancestor应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获...注意： 并不是所有元素都可以失去焦点，可以获得鼠标光标焦点的元素主要是表单输入元素(只有获得焦点后才可能失去焦点)。...，focusout focusout事件就是失去焦点事件。...对于text和textarea元素，该事件会在元素失去焦点时发生(文本内容也发生了更改)。
DOM3级的事件类型主要包括：UI事件，用户与页面上的元素交互时触发；焦点事件，元素获得或失去焦点触发；鼠标事件，用户通过鼠标在页面上执行操作时触发；滚轮事件，使用鼠标滚轮时触发；文本事件，当在文档中输入文本时触发...焦点事件 焦点事件会在页面获得或失去焦点时触发。利用这些事件，并于document.hasFocus()方法和document.activeElement属性配合，可以知晓用户在页面上的行为。...有6个焦点事件：blur事件，元素失去焦点时触发事件，不会冒泡；focus事件，元素获得焦点时触发，不会冒泡；focusin事件，元素获得焦点时触发，会冒泡；focusout事件，元素失去焦点时触发，会冒泡...当用户在页面上由一个元素移动到另一个元素事件触发的顺序为：focusout事件，在失去焦点的元素上触发；focusin事件，在获得焦点的元素上触发；blur事件，在失去焦点的元素上触发；focus事件，...即使有了滚动条，依然能够正确计算。
-- 失去焦点blur // 框架：用户名密码。。...flag_user = false } } // 验证同意协议的复选框 // 单击的时候改变勾选的状态 -- 验证click：if(勾选){合法}else{...show().html('请同意协议') flag_allow = false } } // 验证注册 // 考虑的人：页面一刷新，没有执行失去焦点...else { alert('不能提交') return false } }) }) 案例四：弹窗 要求：单击弹窗外部...pop').hide() }) $('.pop_con').click(function(){ // 不需要执行显示，也不能隐藏
例如，当窗口失去焦点时，会发生一个临时的焦点丢失事件。临时获得焦点的事件发生在弹出菜单上。 ?...您将在文本区域中看到一条“焦点已获得：JTextField”消息-其“相反组件”为空，因为它是第一个具有焦点的组件。 单击标签。什么也没发生，因为默认情况下标签无法获得焦点。 单击组合框。...单击文本字段以将焦点返回到初始组件。 按键盘上的Tab。焦点移到组合框，并跳过标签。 再次按Tab键。焦点移至按钮。 单击另一个窗口，以便FocusEventDemo窗口失去焦点。...请注意，即使不允许您单击文本区域，也可以将其切换到该区域。这样一来，使用辅助技术的用户就可以确定组件在那里及其包含的内容。...该演示通过在文本区域上调用setRequestFocusEnabled（false）来禁用文本区域的单击焦点，同时保留其选项卡焦点功能。
/js/demo.js"> 注意： 外部脚本不能包含 标签 在js文件中直接写 js 代码即可，不要在 js文件 中写 script...onclick 就是 单击事件 的事件属性。...下面就给大家列举一些比较常用的事件属性 事件属性名 说明 onclick 鼠标单击事件 onblur 元素失去焦点 onfocus 元素获得焦点 onload 某个页面或图像被完成加载 onsubmit...如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。 onblur 失去焦点事件。...很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。
这一个过程也称为事件冒泡 事件捕获 与事件冒泡刚好相反，事件从最外层的 documet 开始一直往里面，直到点击的元素才停止 div> 的指向取决于外部执行环境，不能保证得到想要的值。 另外，IE 要没了。...焦点事件标准不一，但是 DOM3 统一了一个标准并且规定了它的发生顺序 当一个元素移动到另一个元素会依次触发以下事件;一般 blur 与 focus 常见 focusout 在失去焦点元素上触发...，会冒泡 focusin 在获取焦点元素上触发，会冒泡 blur 在失去元素上触发，不会冒泡 DOMFocusOut 在失去焦点元素上触发，会冒泡; Opera 专有 focus 在获取焦点元素上触发，...触摸屏 上述事件在移动端上又有所不同 并不支持 dblclick ，双击只会放大 轻击不可单击或者没有绑定 click 的元素什么事件也不会发生 在可点击或者绑定 click 的前提下点击会触发
/js/demo.js"> ==注意：== 外部脚本不能包含 标签 在js文件中直接写 js 代码即可，不要在 js文件 中写 script...onclick 就是 单击事件 的事件属性。...下面就给大家列举一些比较常用的事件属性 事件属性名 说明 onclick 鼠标单击事件 onblur 元素失去焦点...如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。 图片 onblur 失去焦点事件。...很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。
事件 说明 blur 在元素失去焦点时触发，不会冒泡 focus 在元素获得焦点时触发，不会冒泡 focusin 在元素获得焦点时触发，会冒泡 focusout 在元素失去焦点时触发，会冒泡 当焦点从页面中的一个元素移动到另一个元素...，会依次触发下列事件： （1）focusout在失去焦点的元素上触发； （2）focusin在获得焦点的元素上触发； （3）blur在失去焦点的元素上触发； （4）DOMFocusOut...在失去焦点的元素上触发； （5）focus在获得焦点的元素上触发； （6）DOMFocusIn在获得焦点的元素上触发。...也可以通过event.relatedTarget来获取对应相关元素（哪个元素失去焦点导致目标元素获得焦点，哪个元素获得焦点导致目标元素失去焦点）。...即只要可单击的元素呈现在页面上，就可以立即具备适当的功能。 （2）在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少。
换句话说，在单击按钮的同时，你也单击了按钮的容器元素，甚至也单击了整个页面。 事件流描述的是从页面中接收事件的顺序。...UI(User Interface，用户界面)事件，当用户与页面上的元素交互时触发 焦点事件，当元素获得或失去焦点时触发 鼠标事件，当用户通过鼠标在页面上执行操作时触发 滚轮事件，当使用鼠标滚轮(或类似设备...而利用这个事件最多的情况是清除引用，以避免内存泄漏。 焦点事件 焦点事件会在页面获得或失去焦点时触发。...有以下 4 个焦点事件: blur: 在元素失去焦点时触发 focus: 在元素获得焦点时触发 focusin: 在元素获得焦点时触发。...这个事件与 HTML 事件 focus 等价，但它冒泡 focusout: 在元素失去焦点时触发。
事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发）...scroll() 滚动条的位置发生变化 submit() 用户递交表单 绑定事件的其他方式 $(function(){ $('#div1').bind('mouseover click', function...(event) { alert($(this).html()); }); }); 取消绑定事件 $(function(){ $('#div1').bind('mouseover...可以看到，使用这种方式绑定click事件也是可以的。 那么，如果希望点击一次就不能点击，就可以设置一下解绑事件，如下： ? 从这里可以看出，只能触发一次click事件。因为已经解除绑定了。...那么解绑是不是也一样可以写多个的呢？ ? 解除绑定的确可以写多个事件同时解除。
常见事件 重点掌握(5) click:单击 focus:获取焦点 blur:失去焦点 submit:表单提交 $(document).ready(function(){ $("#e01").blur(function(){ $("#textMsg").html("文本框失去焦点...可以在父元素上检测子元素获取焦点的情况 blur和focusout 失去焦点 <script type="text/javascript" src=".....页面载入 ready(fn):页面载入,在一个页面中可以使用多次 常用格式1: $(document).ready(function(){ .... }) 常用格式2: 格式1的简化版 $(function...triggerHandler() 触发所有的事件（不包括浏览器默认的） 委派 live jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效,例如给A标签添加事件，
事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发）...scroll() 滚动条的位置发生变化 submit() 用户递交表单 mouseover() 鼠标进入（进入子元素也触发） 简单来说，可以看到括号写了进入子元素也触发，这是什么意思呢？...写一个简单的两个嵌套div来演示一下看看，如下： ? ? 进入子元素也会触发mouseover()事件，那么如果#small的div没有嵌套在里面是否会触发呢？ 这样应该就不会。 ?...当子元素在父元素内部的时候，mouseenter()就只会触发一次而已。也就是刚刚进入父元素#big div的时候触发，再进入#small div的时候就不会触发了。...当两个元素嵌套在一起的时候，只有父元素触发了事件。 下面来看看不在一起的时候。 ? ? 可以看到，#small div会将事件冒泡给#big div，导致触发mouseleave()事件。
1、事件监听机制概述 事件监听机制，指的是某些组件被执行了某种操作后，触发某些代码的执行。 事件：某些操作，如：单击、双击操作，键盘按下了，鼠标移动了。...常见的事件： 1）点击事件：1、onclick：单击事件 2、ondbclick：双击事件 2）焦点事件：1、obblur：失去焦点，一般用于表单校验 ... //onload加载完成事件 window.onload = function () { /* //失去焦点事件...document.getElementById("username").onblur = function () { alert("失去焦点")...option> 2、表单验证实战 在之前的用户登录博文代码的基础上
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
