监听元素属性改变事件的方法
2018-08-30 01:12
615 查看
一、onchange事件
只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效。(就是说你在输入框中输入完内容,输入完了,然后鼠标点别的地方触发该事件)
二、oninput事件
oninput 事件在用户输入时触发。不支持JS等赋值改变的元素属性。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。(也就是说,不用输入完,边输入边触发该事件)
①但是,这个方法是HTML5中的标准事件,IE9以下的浏览器是不支持oninput事件的。
②使用时,还需要oninput要通过addEventListener()来注册.
③在不涉及js赋值等元素改变的事件,我们是可以结合onpropertychange事件使用的如:
三、onkeydown事件
事件会在用户按下一个键盘按键时发生(在输入框敲键盘,就会触发)。
在处理复制、粘贴、拖拽、长按键(按住键盘不放)等细节上并不完善
四、onkeyup事件
事件会在键盘按键被松开时发生。(手,已经按了电脑的开关了,一松手就会关机哦)
五、onkeypress事件
事件会在键盘按键被按下并释放一个键时发生。(笔者认为,和onkeyup事件是类似的,可能是判断不同浏览器,执行不同的方法吧)
六、onpropertychange事件
js赋值改变元素属性也可以触发,键盘鼠标操作(只要是HTML元素属性发生改变都可以捕获,遗憾的是IE专属而且还是只是IE6/7/8,高版本的IE需要针对此页面降低版本方可执行。)
七、jQuery 事件 - change() 方法
经过笔者的测试,发现这个方法与onchange事件是差不多一致的。
八、原生js绑定change事件
经过笔者的测试,发现这个方法与onchange事件是差不多一致的。
只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效。(就是说你在输入框中输入完内容,输入完了,然后鼠标点别的地方触发该事件)
二、oninput事件
oninput 事件在用户输入时触发。不支持JS等赋值改变的元素属性。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。(也就是说,不用输入完,边输入边触发该事件)
①但是,这个方法是HTML5中的标准事件,IE9以下的浏览器是不支持oninput事件的。
②使用时,还需要oninput要通过addEventListener()来注册.
③在不涉及js赋值等元素改变的事件,我们是可以结合onpropertychange事件使用的如:
var ie = !!window.ActiveXObject; if(ie){ object.onpropertychange = aaaaa; }else{ object.addEventListener("input", aaaaa, false); }; function aaaaa(){ alert("20180829"); }
三、onkeydown事件
事件会在用户按下一个键盘按键时发生(在输入框敲键盘,就会触发)。
在处理复制、粘贴、拖拽、长按键(按住键盘不放)等细节上并不完善
四、onkeyup事件
事件会在键盘按键被松开时发生。(手,已经按了电脑的开关了,一松手就会关机哦)
五、onkeypress事件
事件会在键盘按键被按下并释放一个键时发生。(笔者认为,和onkeyup事件是类似的,可能是判断不同浏览器,执行不同的方法吧)
六、onpropertychange事件
js赋值改变元素属性也可以触发,键盘鼠标操作(只要是HTML元素属性发生改变都可以捕获,遗憾的是IE专属而且还是只是IE6/7/8,高版本的IE需要针对此页面降低版本方可执行。)
七、jQuery 事件 - change() 方法
经过笔者的测试,发现这个方法与onchange事件是差不多一致的。
被动:<input type="text" id="to_change"/><br/> 主动:<input type="text" id="make_change" onchange="aaa()"/> <script> $("#to_change").change(function(){ alert("执行了change方法!"); }); function aaa(){ $("#to_change").val("20180829") } </script>
八、原生js绑定change事件
经过笔者的测试,发现这个方法与onchange事件是差不多一致的。
document.getElementById("to_change").onchange = function() { alert('to_change'); }; `` **九、Jquery绑定文本变更事件** **笔者有三种四种方式实现onchange事件了,这个方法也是一样的,同样不能处理js赋值引起元素属性改变的问题**
$("#to_change").bind("change", function() { alert('changed'); });
**十、笔者自写定时器,监听元素属性改变事件 判断浏览器与降低浏览器版本的问题,笔者就不写了。** 直接上定时器,函数:
$(document).ready(function() { // 获得焦点时,启动定时器 $("#make_change").focus(function(){ var aaa = setInterval(to_change,1000); }); // 失去焦点时,清除定时器 $("#make_change").blur(function(){ clearInterval(aaa); }); } }) function to_change() { //你的判断,你要的内容 }
相关文章推荐
- 监听UITextField改变事件(三种方法)
- jsp name属性相同的一组输入框input,输入其中一个值,其余值跟随改变事件监听代码
- Jquery.fn.val()方法改变元素值后元素change事件无效解决方案
- iOS中监听UITextField值改变事件的方法实例
- jQuery的on()方法的两种用法(委托给父元素进行事件监听代理)
- checkbox:click事件触发span元素内容改变的方法
- 为元素绑定监听键盘上的enter键被按下事件的方法
- 改变Web页面上元素外观的最快捷的方法是添加style属性
- RecyclerView 横向列表 及 adapter 打造 item监听 改变元素属性
- javascript 原生方法监听DOM结构改变事件
- Jquery的resize方法,即元素大小改变事件
- jQuery attr()方法改变元素属性实例说明
- 使用CSS3的appearance属性改变元素的外观的方法
- JS常用方法(获取Class、获取元素样式、事件监听、cookie、ajax等)
- 监听脚本绑定事件与属性改变事件
- html中input标签只读属性和内容改变事件监听
- ajax属性的删,修。selected,chaecked,readonly,disabled,noresize。oncilck的另一种写法。自定义创建$()。回车监听事件。追加方法
- 【DOM操作】实时监听input[type='text']和HTML标签中属性改变事件
- 设置监听class改变事件,由原来的设置单个按钮点击触发方法onclick=“方法()”改为addEventListener
- jquery动态添加元素事件失效问题解决方法