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

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

主要的区别是 onfocus 事件不支持冒泡。因此,如果你想知道元素或者其子元素是否获取焦点,需要使用 onfocusin 事件。...onfocus (使用addEventListener()方法的可选参数 useCapture)的捕获监听事件来查看元素或其子元素是否获取焦点。...主要的区别是 onblur 事件不支持冒泡。因此,如果你需要查看元素或其子元素是否获取焦点,需要使用 onfocusout 事件。...6.oninput:元素获取用户输入时触发 oninput 事件在用户输入时触发,也可用于 元素的值发生改变时触发。该事件类似于 onchange 事件。...不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。

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

    jQuery

    文档处理 事件 动画效果 插件 each、data、Ajax jQuery语法 $符号事jQuery中的重要标识 //在JS中可以通过获取先获取标签,然后去使用对应的方法,在jQuery中一样,...可以先筛选元素(标签),然后再对该元素做出动态操作 格式:$(selector).action() selector:通过选择器获取元素 action:获取元素后的动作行为 jQuery对象 JS中DOM...//获取p标签 $('p') //获取div标签 $('div') id选择器 //获取id为1的元素 $('#1') 类选择器 //获取类名为class3的元素 $('.class3...attr 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop 通俗理解为:attr适用于属性为静态的情况(不经常修改动态变化的),而prop用于动态变化的情况,尤其是选择类标签...window.onload()函数有覆盖现象,必须等待着图片资源加载完成之后才能调用 jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数) 事件委托 事件委托是通过事件冒泡的原理

    6.8K10

    jQuery

    $("#i1").html()的意思是:获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。     ...总结一下:         1.对于标签上有的能看到的属性和自定义属性都用attr         2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用...: 事件委托     事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件,将未来添加进来的某些子标签自动绑定上事件。     ...数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。...上面是循环一个数组,通过$.each,还需要把数组传进去,我们还可以通过each来循环标签:(this指的是当前循环的那个标签对象,以后循环标签的时候,就不用自己写for循环了,用each就行了) ​

    9K20

    jquery

    ,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。...总结一下: 对于标签上有的能看到的属性和自定义属性都用attr 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。...window.onload()函数有覆盖现象,必须等待着图片资源加载完成之后才能调用 jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数) 事件委托 事件委托是通过事件冒泡的原理...数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。...$("div").data("k",100);//给所有div标签都保存一个名为k,值为100 .data(key): 描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data

    5.8K30

    Web前端学习笔记之jQuery基础

    如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。 $("#i1").html()的意思是:获取id值为 i1的元素的html代码。...val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置checkbox、select的值 示例: 获取被选中的checkbox或radio的值: <label for...示例: 表格中每一行的编辑和删除按钮都能触发相应的事件。...数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。...$("div").data("k",100);//给所有div标签都保存一个名为k,值为100 .data(key): 描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data

    3.6K20

    前端工程师之vue指令解析

    解析模板/标签(标签属性,标签体内容,绑定事件等) 例如: //点击toggle按钮,会显示红色方块,再次点击,红色方块消失,这里就是通过控制属性的真假,通过指令作用到红色方块上来控制方块的显示隐藏 的标签。...你应该通过 JavaScript 在组件的 data 选项中声明初始值。 v-model说白了就像监听器一样,会自动的将vue实例的值同步更新到表单中,同样的也会把表达中的值同步到vue实例中。...v-model的专用修饰符 .lazy - 取代 input 监听 change 事件 原本的数据绑定相当于对input框进行oninput事件监听,使用v-model.lazy之后相当于把oninput...if(this.lists[i].isChecked) return; //改变当前编辑的数据的isedit的值

    14010

    前端基础-节点操作

    () 返回一个布尔值,表示当前节点是否有子节点 node.removeChild() 接受一个子节点作为参数,用于从当前节点移除该子节点 node.cloneNode() 用于克隆一个选中的节点。...它接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。 注意: 不会克隆绑定到该元素上的事件; node.innerHTML 返回该元素包含的 HTML 代码。...,可获取非标准属性 console.log(d.getAttribute('aa')); node.hasAttribute() 返回一个布尔值,表示当前元素节点是否包含指定属性...,注册点击事件,添加事件处理函数 document.getElementById("btn").onclick=function () { //根据id获取图片标签,设置src属性即可...,注册点击事件,添加事件处理函数 document.getElementById("btn").onclick=function () { //根据标签名字获取文本框,所有的input标签

    4.3K10

    分享 15 个 HTML 新特性,大多数人可能不知道,建议尽早使用上

    1、内容可编辑属性 contenteditable 是可以在元素上设置以使内容可编辑的属性。它适用于 DIV、P、UL 等元素。...td>Humantd> 3、Datalist 标签 标记指定预定义选项列表并提供自动完成功能...每一个都有自己的用例,适用于不同的布局。另一个与它们类似的选项是隐藏的 HTML 属性。如果一个元素在其上指定了隐藏,它将被隐藏。我碰巧有用于存储值的隐藏输入,所以如果您也需要它,请不要吃惊。...该元素的 datetime 属性用于将时间转换为机器可读的格式,以便浏览器可以提供通过用户日历添加日期提醒,搜索引擎可以产生更智能的搜索结果。...,通过本文的学习,你可以轻松的使用HTML原生标签能力,就能够实现以前复杂的第三方UI组件提供的功能。

    60030

    WEB入门之十五 属性和样式

    )​​​ 设置或获取value属性的值​​​ attr ( ) 设置或获取某属性的值 removeAttr ( ) 删除某属性 prop ( ) 跟attr()作用一样,但是主要针对可简写的属性 removeProp...表6-1-2 attr函数 ​attr函数​ ​说明​ attr ( "属性名" ) 按属性名获取某属性的值 attr ( "属性名" , 属性值) 按属性名设置某属性的值 下面我们通过具体的示例来演示...表6-1-4 css函数 ​css函数​ ​说明​ css( "属性名" ) 按属性名获取某属性样式的值 css( "属性名" , 属性值) 按属性名设置某属性样式的值 下面我们通过一个示例来演示css...attr函数每隔2秒改变img标签src属性的 值。 ​...通过addClass函数设置的属性必须通过removeClass函数移除 D. prop函数跟attr函数很相似,但是prop函数对可简写的属性支持的更好 3.

    9310

    WEB入门之十五 属性和样式

    表6-1-1 属性操作函数 属性操作函数 说明 html ( ) 设置或获取innerHTML属性的值 text ( ) 设置或获取innerText属性的值 val ( ) 设置或获取value属性的值...表6-1-2 attr函数 attr函数 说明 attr ( "属性名" ) 按属性名获取某属性的值 attr ( "属性名" , 属性值) 按属性名设置某属性的值 下面我们通过具体的示例来演示attr...表6-1-4 css函数 css函数 说明 css( "属性名" ) 按属性名获取某属性样式的值 css( "属性名" , 属性值) 按属性名设置某属性样式的值 下面我们通过一个示例来演示css函数的用法...元素 . css ( { "属性名" : 属性值 , "属性名" : 属性值 , ... ...} )6.2.2位置函数offset函数用来获取或设置元素相对于浏览器窗口的位置对象,可以通过该对象的left...通过addClass函数设置的属性必须通过removeClass函数移除 D. prop函数跟attr函数很相似,但是prop函数对可简写的属性支持的更好 3.

    6010

    input元素的oninput事件和onchange事件

    input元素的oninput事件和onchange事件 框架用多了,感觉原生的有点弱化了,不说了,是时候巩固一波了 ^ _ ^ 1、input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加oninput...属性,属性值为处理事件函数的调用 oninput="handleInput()"> function handleInput(...) { // 处理事件代码 } 第二种:获取input元素,然后在元素对象上添加oninput属性,属性值为函数,函数内部为处理事件函数的调用 的区别 oninput事件是在输入框中输入时就会触发 onchange事件是在输入框输入完内容后,输入框失焦后触发 onchange事件兼容性好,主流浏览器都支持 oninput...事件IE9以下不支持,其余主流浏览器都支持,针对IE9以下的可以使用onpropertychange事件来替代 参考文献: [1] oninput 事件 [2] input输入框的input事件和change

    3.5K10
    领券