首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

DOM事件基本概念大总结(前端必备)

比如点击某一个按钮,而它是由上一层的父标签,或许在上一层还有父标签甚至是整个页面。因此点击一个元素可以看成是同时点击了父标签或者整个页面。那么此时事件应该怎么响应到指定标签呢?...当然也可以通过获取 dom 对象,并对其属性赋值,也可以直接在 html 元素上绑定。...焦点一般只鼠标的焦点,虽然可以检测鼠标事件来监控,但是焦点可以通过键盘移动所以有专门的事件监控。...焦点事件标准不一,但是 DOM3 统一了一个标准并且规定了它的发生顺序 当一个元素移动到另一个元素会依次触发以下事件;一般 blur 与 focus 常见 focusout 在失去焦点元素上触发...,会冒泡 focusin 在获取焦点元素上触发,会冒泡 blur 在失去元素上触发,不会冒泡 DOMFocusOut 在失去焦点元素上触发,会冒泡; Opera 专有 focus 在获取焦点元素上触发,

1.9K20

JavaScript 语言入门

function 函数内 ) JS 中的自定义对象 中的自定义对象 Object 形式的自定义对象 {} 花括号形式的自定义对象 js 中的事件 onload 加载完成事件 onclick事件 onblur 失去焦点事件...onblur 失去焦点事件: 常用用于输入框失去焦点后验证其输入内容是否合法。...其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。 静态注册事件 :通过 html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。... 按钮1 按钮2 结果: onblur 失去焦点事件...JavaScript 语言提供,专门用来向浏览器的控制器打印输出, 用于测试使用 // log() 是打印的方法 console.log(" 静态注册失去焦点事件

4.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Carson带你学Android:手把手教你学会手势识别应用 GestureDetector

    用户轻触触摸屏,尚未松开或拖动 // 与onDown()的区别:无松开 / 拖动 // 即:当用户点击的时,onDown()就会执行,在按下的瞬间没有松开 / 拖动时onShowPress...用户轻触触摸屏,尚未松开或拖动 // 与onDown()的区别:无松开 / 拖动 // 即:当用户点击的时,onDown()就会执行,在按下的瞬间没有松开...用户轻触触摸屏,尚未松开或拖动 // 与onDown()的区别:无松开 / 拖动 // 即:当用户点击的时,onDown()就会执行,在按下的瞬间没有松开...用户轻触触摸屏,尚未松开或拖动 // 与onDown()的区别:无松开 / 拖动 // 即:当用户点击的时,onDown()就会执行,在按下的瞬间没有松开...用户轻触触摸屏,尚未松开或拖动 // 与onDown()的区别:无松开 / 拖动 // 即:当用户点击的时,onDown()就会执行,在按下的瞬间没有松开

    1.6K11

    Android 手势识别应用:手把手教你学会 GestureDetector(含实例讲解)

    用户轻触触摸屏,尚未松开或拖动 // 与onDown()的区别:无松开 / 拖动 // 即:当用户点击的时,onDown()就会执行,在按下的瞬间没有松开 / 拖动时onShowPress...用户轻触触摸屏,尚未松开或拖动 // 与onDown()的区别:无松开 / 拖动 // 即:当用户点击的时,onDown()就会执行,在按下的瞬间没有松开...用户轻触触摸屏,尚未松开或拖动 // 与onDown()的区别:无松开 / 拖动 // 即:当用户点击的时,onDown()就会执行,在按下的瞬间没有松开...用户轻触触摸屏,尚未松开或拖动 // 与onDown()的区别:无松开 / 拖动 // 即:当用户点击的时,onDown()就会执行,在按下的瞬间没有松开...用户轻触触摸屏,尚未松开或拖动 // 与onDown()的区别:无松开 / 拖动 // 即:当用户点击的时,onDown()就会执行,在按下的瞬间没有松开

    10.8K41

    【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

    - onblur 事件 在 JavaScript 中 , 当 DOM 元素 失去焦点时 , 该 DOM 元素上绑定的 onblur 事件被触发 ; 如 : 用户从 输入框 移动到 页面的其他部分 或...使用 标签选择器 获取元素 var text = document.querySelector('input'); // 2....注册 失去焦点事件 onblur text.onblur = function() { if (this.value === '') {...this.value = '请输入搜索内容'; } // 失去焦点后 , 颜色变为灰色 this.style.color = 'gray...; 通过直接设置 style.backgroundColor , 可以 实时更改页面的背景颜色 , 这种方式 比修改 CSS 文件更为便捷 , 尤其适用于动态交互或响应用户事件的情况 ; 3、代码示例

    14510

    Java事件处理,低级事件类型:键盘事件+焦点事件,你真的懂吗?

    虚拟键码用前缀VK_表示,例如,VK_A或VK_SHIFT。虚拟键码与键盘上的键一一对应。例如,VK_A表示被标记为A的键。虚拟键码没有单独的小写键,即键盘没有单独的小写键。...因此,可以调用setFocusable方法对默认情形进行覆盖。本章稍后将讨论键盘焦点的概念。...有些组件,例如,标签和面板,在默认情况下无法得到焦点,这是因为它们主要用于装饰或分组。如果希望编写一个程序,能够根据用户的击键操作在面板上绘制图形,就要对默认处理进行覆盖。...getComponent方法负责报告获得或失去焦点的组件;isTemporary方法将在焦点发生临时性地改变时返回true。临时性的焦点改变是指组件临时性地失去控制,但又可以自动地找回焦点。...在JDK 1.4中,当焦点转移的时候,可以找到“对等物”组件或窗口。对等物是指在组件或窗口失去焦点时获得焦点的组件或窗口。相反地,当组件或窗口获得焦点时,对等物是刚刚失去焦点的那个组件或窗口。

    4K30

    【基础】input标签输入框内的输入事件详细分析

    1.onblur:元素失去焦点时触发 Onblur 经常用于表单验证,所有主要浏览器都支持 onblur 事件 支持该事件的...5.onfocusout:元素即将失去焦点时触发 onfocusout 事件在元素即将失去焦点时触发。onfocusout 事件类似于 onblur 事件。主要的区别是 onblur 事件不支持冒泡。...因此,如果你需要查看元素或其子元素是否获取焦点,需要使用 onfocusout 事件。...:虽然 Firefox 不支持 onfocusout 事件, 但你可以通过使用 onfocus (使用addEventListener()方法的可选参数 useCapture)的捕获监听事件来查看元素或其子元素是否失去焦点...不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。

    2.7K1913

    浅析JavaScript的用户登录表单——焦点事件

    在Web项目开发中,经常会在表单验证功能看到焦点事件。例如,文本框获取焦点改变文本框的颜色,文本框失去焦点检验输入的文本框的内容是否正确等。接下来,小编带大家一起来实现一个用户登录的表单!...id参数表示标签元素自定义的id名称,例如,a标签的id="abc",获取该元素对象调用$('abc')函数就可以获取元素的对象。...检验id为user和pass的元素如果失去焦点,它的value值是不是为空。...对每一个div层进行详解,让读者更好的理解。 2.在JavaScript中首先获取操作元素的对象,给指定元素添加失去焦点事件,之后,检验指定元素失去焦点,它的value值是否为空,检验表单是否为空。...主要是帮助大家理解焦点事件的知识点! 3.代码没有那么复杂,希望对你有所帮助!

    1.9K11

    CSS 下拉菜单与 focus

    focus 伪类 focus 伪类 :focus 表示被点击、触摸或 tab 选中的元素,笼统地说就是「获得焦点」的元素。 当初实现这个需求的时候同样考虑过采用 :hover 或者 :active。...,虽然 active 在移动端的响应是三个中和桌面端最贴合的,但并不适用于此场景。...桌面端 移动端 focus 持续到失去焦点 松开时进入,持续到失去焦点 hover 悬停期间 按下时进入,持续到失去焦点 active 单击按下期间 触摸按下期间 综合来看,focus 是最合适的。...而 标签在这里只是作为一个按钮使用,并不想被点击后有任何跳转,所以不会给它带上 href 属性,自然也就不可聚焦。...PC iOS Android focus 持续到失去焦点 默认不可用 松开时进入,持续到失去焦点 hover 悬停期间 按下时进入,持续到失去焦点 按下时进入,持续到失去焦点 active 单击按下期间

    5.6K20

    笔记59 | Android管理音频焦点的学习

    在我们的应用开始播放音频之前,它需要先请求音频焦点,然后再获取到音频焦点。另外,它还需要知道如何监听失去音频焦点的事件并对此做出合适的响应。...如果有另一个应用像上述那样请求音频焦点,它所请求的永久音频焦点或者短暂音频焦点(支持Ducking或不支持Ducking),都会被你在请求获取音频焦点时所注册的监听器接收到。...如何响应失去焦点事件,取决于失去焦点的方式。 在音频焦点的监听器里面,当接受到描述焦点改变的事件时会触发onAudioFocusChange()回调方法。...focusChange == AudioManager.AUDIOFOCUS_GAIN) { // Raise it back to normal } } }; 音频焦点的失去是我们需要响应的最重要的事件广播之一...,但除此之外还有很多其他重要的广播需要我们正确地做出响应。

    2.1K90

    java Swing用户界面组件文本输入:文本域+密码域+格式化的输入域

    标签与标签组件 标签是容纳文本的组件。它们没有任何修饰(例如没有边界),也不响应用户输入。可以利用标签标识组件。例如,与按钮不同,文本域没有标签标识它们。...失去焦点的行为 试想一下当用户在文本域中输入之后会发生什么情况。用户输入后最终决定离开这个区域,也许是通过鼠标点击另一个组件。于是,文本域就失去焦点(lose focus)。...失去焦点的默认行为被称为“提交或恢复”。如果文本字符串是有效的,它将被提交(commit)。 格式器将它转换为对象,该对象成为当前文本域的值(就是如前所述的getValue方法返回的值)。...无论何时失去焦点,用户输入都将被抛弃,文本字符串恢复到原值。 注意:通常,“提交或恢复”默认行为是合理的。只是存在一个潜在的问题。假设一个对话框包含一个整型值的文本域。...• void setFocusLostBehavior(int behavior) • int getFocusLostBehavior( ) 设置或得到“失去焦点”的行为。

    4.1K10

    JavaSwing_8.1:焦点事件及其监听器 - FocusEvent、FocusListener

    低级别事件指示Component已获得或失去输入焦点。 由组件生成此低级别事件(如一个TextField)。...当组件获得或失去键盘焦点时,将调用侦听器对象中的相关方法,并将FocusEvent传递给它。 API focusGained ? focusLost ? 2 FocusAdapter ?...当组件获得或失去键盘焦点时,可调用侦听器对象中的相关方法,并将 FocusEvent 传递给它。 API focusGained ? focusLost ?...3 如何编写焦点侦听器 每当组件获得或失去键盘焦点时,就会触发焦点事件。无论是通过鼠标,键盘还是以编程方式发生焦点变化,都是如此。...单击文本字段以将焦点返回到初始组件。 按键盘上的Tab。焦点移到组合框,并跳过标签。 再次按Tab键。焦点移至按钮。 单击另一个窗口,以便FocusEventDemo窗口失去焦点。

    4.7K10

    组件化详细

    (2) 失去焦点,隐藏输入框 (3) 回显标签信息 (4) 内容修改,回车 → 修改标签信息 实现双击显示输入框, 并且获取输入框的焦点 首先, 双击显示输入框, 我们可以通过双点击事件dblclick...$nextTick(()=> {})的方式 实现 方式二: 通过在main.js中全局注册, 然后封装全局指令focus,然后就可以直接通过v-focus来进行使用 失去焦点 因为获取焦点,我们是通过v-if...来向选择的, 所以如果想要失去焦点, 可以直接将if中的信息修改即可。...所以就可以通过@blur="isEdit = false"实现失去焦点 回显标签信息 回显的信息是通过父组件传入的, 可以通过v-model实现, 也可以通过前面所学的props实现。...-- (1) 双击显示输入框,输入框获取焦点 (2) 失去焦点,隐藏输入框 (3) 回显标签信息 信息是由外部父组件传入的 (4) 内容修改,回车 → 修改标签信息 --

    18510

    Javascript函数的简单学习

    常用事件:     onabort:        对象载入被中断时触发     onblur:         元素或者窗口本身失去焦点时触发     onchange:       改变元素中的选项或其他表单元素失去焦点,并且在其获取焦点后内容发生过改变时触发     onerror:        出现错误时触发     onfocus:        任何元素或窗口本身获得焦点时触发...    onmouseover:    鼠标移动到某个元素时触发     onmouseup:      释放任意一个鼠标按键时触发     onreset:        单击重置按钮时,在form标签上触发...    onscroll:       在任何滚动条的元素或者窗口上滚动时触发     onsubmit:       单击提交按钮时,在上触发 2:事件处理     事件处理程序是用来响应某个事件而执行的处理程序...,然后再执行script标签内的内容)  案例1代码如下 1 2 3 <meta http-equiv="Content-Type" content="text/html

    2K80

    【愚公系列】2023年09月 WPF控件专题 Window窗体属性和事件

    通过向窗体添加控件,并使用事件处理程序来响应用户交互,可以创建功能强大的Windows桌面应用程序。...通过对这些属性的使用,可以创建出各种精美的窗体界面。 2.常用事件 Load事件:当窗体加载完成时触发。在此事件中可以进行窗体的初始化操作。 Click事件:当用户单击窗体时触发。...GotFocus事件:当窗体获得焦点时触发。可以用来实现窗体获得焦点时的操作。 LostFocus事件:当窗体失去焦点时触发。可以用来实现窗体失去焦点时的操作。...WindowState:窗体的初始状态(最大化、最小化或正常)。 ResizeMode:窗体的调整大小模式(默认为CanResize)。...在WPF中,可以通过在XAML代码中添加事件处理程序来响应这些事件。

    50311

    事件绑定(onclick,onfocus,onblur)

    事件绑定(onclick,onfocus,onblur) 常用绑定方式 方式一:通过 HTML标签中的事件属性进行绑定 在HTML标签中加入,onclick属性,并在后面加上需要的方法。...console.log("我被点了") } 运行结果 方式二:通过 DOM 元素属性绑定 对于标签中没有绑定...事件属性名 说明 onclick 鼠标单击事件 onblur 元素失去焦点 onfocus 元素获得焦点 onload 某个页面或图像被完成加载 onsubmit 当表单提交时触发该事件 onmouseover...鼠标被移到某元素之上 onmouseout 鼠标从某元素移开 小案例讲解 onfocus and onblur onfocus 获得焦点事件。...当点击了输入框后,输入框就获得了焦点。然后输入框的背景颜色变成粉色。 onblur 失去焦点事件。 当失去输入框的焦点的时候,输入框的背景颜色消失,然后里面文字变成大写。 演示代码 <!

    11210
    领券