-
2021-11-11 18:13:52
CheckBox(val,row){ if(val.includes(row)){ //触发选中事件 this.$refs.aaa.show(row.code) }else{ //触发取消选中事件 this.$refs.aaa.hide(row.code) } } //aaa是引入组件
更多相关内容 -
checkbox选中触发事件
2020-03-19 18:59:47$(function(){ if ($.browser.msie)... $('input:checkbox').click(function () { this.blur(); this.focus(); }); }; $("#check").change(function() { alert("checked"); }); ...$(function(){ if ($.browser.msie) { $('input:checkbox').click(function () { this.blur(); this.focus(); }); }; $("#check").change(function() { alert("checked"); }); });
-
mfc checkbox选中触发事件_交互区域 -- 交互事件
2020-12-04 07:36:24页面交互事件【高】页面载入时在页面载入时,作为触发条件,通常结合动态面板,中继器等相关组件做数据的动态加载。【高】窗口尺寸改变时当显示页面窗口变化时,作为触发条件。界面自适应就是依据窗口改变,加载对应...交互模块说明:由于交互功能和原型制作的粘合性较高,所以在交互模块就不做过多详细的说明,主要在案例中进行串讲。所以在本章只是做简要说明。通过结合笔者使用程度高低进行标注。
页面交互事件
【高】页面载入时
在页面载入时,作为触发条件,通常结合动态面板,中继器等相关组件做数据的动态加载。
【高】窗口尺寸改变时
当显示页面窗口变化时,作为触发条件。界面自适应就是依据窗口改变,加载对应预设。
【低】窗口滚动时
页面窗口发生滚动时,作为触发条件。
【低】窗口向下滚动时
页面窗口发生向下滚动时,作为触发条件。
【低】窗口向上滚动
页面窗口发生向上滚动时,作为触发条件。
【中】页面单击时针对的是鼠标单击事件,可以实现鼠标单击的触发的交互事件。
(注:页面的单击事件和元件的单击事件区分,页面单击事件,是单击页面所有地方都可以触发,但是元件的单击事件,只能单击元件的有效范围)。
【中】页面双击事件针对的是鼠标双击事件,作为触发条件。同时也是双击页面任何地方可触发。【中】页面鼠标右击事件
模拟鼠标右击是的交互,作为触发条件。在一些客户端产品的原型中,可通过右击调出页面菜单。【中】页面鼠标移动时
监听鼠标的是否移动,从而实现鼠标移动作为触发条件。【低】页面按键按下时
当键盘按下某个特定的按键,作为触发条件。
需要配合《启用情形》进行交互处理。(举例:客户端的快捷键事件)。
【低】页面按键松开时
同上【中】自适应视图改变时
自适应视图:预设的不同分辨率的视图。当切换是,可以加载一些页面的变动与页面的跳转,达到自适应完美展示的效果。
元件交互事件单击时、双击时、鼠标右击时、鼠标按下时、鼠标松开时、鼠标移动时、鼠标移入时、鼠标移出时、按键按下时、按键松开时、移动时、旋转时、尺寸改变时、显示时、隐藏时、获取焦点时、失去焦点时、选中改变时、选中时、取消选中时、载入时。
在元件交互事件中,基本上都是常用的交互事件,以上全部是交互事件的针对元件层面的触发方式。在此就不做过多说明。在后续的案例中,会针对使用到的进行详细说明。
某些交互效果可以通过多种方式实现,在这种情况下,尽可能的减少交互步骤,到达交互效果。这样可以提高预览的体验。
特殊模块--动态面板特有的事件
状态改变时
动态面板存在多个状态时,状态的切换,作为触发交互的条件。
PMYX:【案例】中继器系列:正反倒计时元件的实现zhuanlan.zhihu.com拖到开始时
动态面板可以进行拖动,在拖动的交互开始,作为触发条件。
拖动时
动态面板可以进行拖动,在拖动的交互中,作为触发条件。
拖动结束时
动态面板可以进行拖动,在拖动的结束,作为触发条件。
向左拖动结束时、向右拖动结束时、向上拖动结束时、向下拖动结束时
向不同方向拖动结束时。对应的方向作为触发条件。
向上滚动时、向下滚动时
向不同方向滚动时,作为触发条件。
-
checkbox选中触发事件_JavaScript事件三部曲之事件的兄弟姐妹们
2020-11-21 22:48:46事件的种类浏览器可能发生的事件有很多种,了解这些事件的情境及效果,是 Web 开发不能忽略的基础,接下来介绍一下常见的几种事件:界面相关事件界面相关的事件不一定会与使用者对 DOM 的操作有关系,反而大多数与...在前面的两篇文章中,已经介绍了事件的传达机制,以及如何阻止事件的冒泡与默认的行为。 那么,作为「事件三部曲」的最后一篇,我们就来大概介绍一下,DOM 规范之中究竟提供了哪些事件。
事件的种类
浏览器可能发生的事件有很多种,了解这些事件的情境及效果,是 Web 开发不能忽略的基础,接下来介绍一下常见的几种事件:
界面相关事件
界面相关的事件不一定会与使用者对 DOM 的操作有关系,反而大多数与
window
对象比较有关系。load
事件:
注册在 window 对象上,指的是在页面或某个资源加载成功时触发。注意,页面或资源从浏览器缓存加载,并不会触发
load
事件。window.addEventListener('load', function(event) { console.log('所有资源都加载完成'); });
unload
、beforeunload
事件:
与 load 事件相反,unload 与 beforeunload 事件分别会在离开页面或重新整理时触发,而 beforeunload 会跳出对话框询问使用者是否要离开当前页面。
error
事件:
error 事件会在 document 或是图片载入错误时触发。由于考虑到维护性,大多事件的注册我会强烈建议使用「非侵入式 JavaScript」的写法,即JavaScript代码和标记的分离。只有 error 事件最适合以 on-event 的写法来处理:
<img src="image.jpg" onerror="this.src='default.jpg'">
像这样,当
image.jpg
这张图片不存在的时候,马上就会触发error
事件,就会通过this.src
将<img>
的 src 属性替换成指定的图片,是相当实用的技巧。若是在网页 load 完成后才注册了
error
事件,你只会看到破图的结果,因为error
事件不会再次被触发,后来挂上去的事件处理函数就等于没有一样。resize
事件:在改变浏览器窗口大小时触发,主要发生在window
对象上面。scroll
事件:在文档或文档元素滚动时触发,主要出现在用户拖动滚动条。DOMContentLoaded
事件:
类似于
load
事件,但不同的是,load
事件是在网页「所有」资源都已经载入完成后才会触发,而DOMContentLoaded
事件是在 DOM 结构被完整的读取跟解析后就会被触发,不须等待外部资源读取完成,因此可以这么说,这两者所监听的阶段不同,可以用下面这张图来解释:我们在《通过DOM API 查找节点》这篇文章中曾介绍过,
<script>
标签要是放在<head> ... </head>
之间,因为还没解析到网页本体会有选取不到 DOM 的问题对吧?<html> <head> <script> // 因 Document 结构未载入,无效 document.getElementById('hello').textContent = 'Hello'; </script> </head> <body> <div id="hello"></div> </body> </html>
那么,改成这样:
<html> <head> <script> document.addEventListener("DOMContentLoaded", function() { // 当 document 结构已解析完成才会执行 document.getElementById('hello').textContent = 'Hello'; }, false); </script> </head> <body> <div id="hello"></div> </body> </html>
就可以排除
<script>
标签放在<head> ... </head>
抓不到 DOM 的问题啦。与大家所熟知的 jQuery
$( document ).ready( handler )
作用类似。鼠标相关事件
mousedown
/mouseup
事件: 这两个事件分别会在鼠标点击了某元素「按下」(mousedown) 按钮,以及「放开」(mouseup)按钮时触发。click
事件: 当鼠标「点击」了某元素时触发。dblclick
事件: 当鼠标「连点两次」某元素时触发。mouseenter
/mousemove
/mouseleave
事件:这三个事件要放在一起看:
- 当鼠标光标移入了某元素时,会先触发
mouseenter
事件。 - 鼠标光标在这个元素內「移动」时,会连续触发
mousemove
事件。 - 直到鼠标光标离开了这个元素,才触发
mouseleave
事件。
这些鼠标相关的事件,都可以通过
event.pageX 与 event.pageY
属性去取得目前鼠标在网页对应的坐标。键盘相关事件
键盘常用相关事件有下列三种,在大多数情况下会将键盘事件注册在
input
的输入框上。keydown
事件: 「压下」键盘按键时会触发keydown
事件。keypress
事件: 除了 Shift, Fn, CapsLock 这三种按键外按住时会触发,若按着不放则会连续触发。keyup
事件: 「放开」键盘按键时会触发。
如果我们针对同个元素同时绑定了这三个键盘事件,那么这三个事件执行的顺序会是:
keydown keypress keyup
若此时想要知道使用者按下的按键是哪个,则可以通过
event.keyCode
属性来查询。keyCode
的对应表可以到这里查看:例如,今天你想要当使用者在
input
输入框按下 「enter」 时,发动submit
,就可以这样做:textBox.addEventListener('keydown', function(e){ // enter 的 keyCode 是 13 if( e.keyCode === 13 ){ formSubmit(); } }, false);
像这样,通过
e.keyCode
就可以判断使用者目前按下的是哪个按钮。表单相关事件
input
事件: 当input
、textarea
以及带有contenteditable
的元素內容被改变时,就会触发input
事件。change
事件: 当input
、select
、textarea
、radio
、checkbox
等表单元素被改变时触发。 但与input
事件不同的是,input
事件会在输入框输入內容的当下触发,而change
事件则是在目前焦点离开输入框后才触发。submit
事件:当表单被送出时触发,通常表单验证都会在这一步处理,若验证未通过则return false;
。focus
事件:当元素被聚焦时触发。blur
事件:当元素失去焦点时触发。
特殊事件
- Composition Event (组成事件):
Composition Event 其实指的是
compositionstart
、compositionend
,以及compositionupdate
这三个事件。介绍 Composition Events 之前先来谈谈 DOM API 过去对输入框侦测变化的几个方式:
常见的表单输入框如:
<input type="text">
如果要动态监听输入框的文字变化时, 大多会通过监听keydown
、keypress
、keyup
等键盘事件来判断value
是否变动,但如果是通过「复制粘贴」之类的操作,就无法通过键盘事件来判断。而即使是
change
事件则是要在使用者改变內容,且焦点离开输入框的前一刻才会被触发。所以后来有了
input
事件,input
事件会在输入框的內容被改变时即时触发,确实也解决了过去在onChange
以及键盘相关事件功能不足所产生的问题。但是,新的问题来了!
通常像这样的搜索框,我们会用类似
autocomplete
(自动完成) 的方式给使用者搜索建议 (以 google 为例):如上图,在输入中文的时候,通常会需要通过注音之类的输入法来做拼字。
但是在大部分的情況下,针对「注音符号」或是「拼音文字」去给搜索建议是没有太大意义的。
这个时候就需要通过
Composition Events
来为输入框做增强。通过
Composition Events
我们可以观察使用者在输入框內开启输入法 (Input Method Editor, IME) 时,组字或选字的状态。Composition Events 提供三个事件给开发者监听:分別是
compositionstart
、compositionend
,以及compositionupdate
。compositionstart
: 输入框內开启输入法,且正在拼字时触发。compositionupdate
: 输入框內开启输入法,且正在拼字或选字时更改了內容时触发。compositionend
: 输入框內开启输入法,拼字或选字完成,正要送出至输入框时触发。
执行的时候像这样:
可以看到,如果要确认使用者输入完成并送出文字时,就可以通过
compositionend
来做最后确认。自订事件
自订事件可以用
Event constructor
建立,同样通过addEventListener
去监听,由dispatchEvent
决定触发的时间。var event = new Event('build'); // 监听事件 elem.addEventListener('build', function (e) { ... }, false); // 触发事件 elem.dispatchEvent(event);
若是想要在自订事件內增加更多资料,则可以改用
CustomEvent
:var event = new CustomEvent('build', { 'detail': elem.dataset.time });
那么在 Event 处理函数就可以通过
event
来接收:function eventHandler(e) { log('The time is: ' + e.detail); }
当然,浏览器提供的事件相当多,今天分享的部分主要是比较常见的一些事件,以及工作上实际需要特別注意的部分。
其他的多数事件你都可以在 MDN 的 Event reference 找到。
如果觉得文章对你有些许帮助,欢迎在我的GitHub博客点赞和关注,感激不尽!
-
input标签checkbox选中触发事件的方法
2021-12-30 10:48:511. 打开页面时,根据后端返回的的值isRequired,设置页面的checkbox标签的勾选状态,并给隐藏的text标签的value赋值,以便于在提交页面时把isRequired再返回给后端 2. 切换checkbox标签的勾选状态时,修改隐藏的text... -
mfc checkbox选中触发事件_C++ MFC多线程同步机制
2020-11-28 07:11:56它们的区分和用法如下: 如果事件只触发一个线程,那么使用自动重置事件和使用SetEvent唤醒等待线程。不用调用ResetEvent,因为线程被唤醒后的那一刻事件将被自动重置。 如果事件将触发两个或多个的线程,那么使用... -
checkbox 选中触发js事件
2021-10-13 16:34:18checkbox点击的时候触发js事件 选择按钮代码如下: <div> <input type="checkbox" id="checkbox"> <span>本周不再显示<...alert("成功触发checkbox改变事件"); }) </script> ... -
HTML复选框和单选框 checkbox和radio事件介绍
2021-01-19 19:12:54checkbox 和 radio的事件选择一度让我很迷惑。 开始以我对js的理解,我觉得...(webkit不能使用上下左右选择) checkbox注册click事件后,奇迹再次上演,当我们用空格选中checkbox时,神奇的click事件再次触发,而mo -
Jquery为单选框checkbox绑定单击click事件
2020-10-27 19:50:50有些时候可能需要用到脚本为一些窗体绑定事件:比如Jquery为单选框checkbox绑定单击事件,本人搜索整理一些常用技巧,需要了解的朋友可以参考下 -
checkbox 选中触发change事件- 微信小程序开发技术要点总结(二)
2022-06-23 16:18:54在待办小程序中,我们通过点选checkbox来表明该事项已完成,也就是说当我们点选该checkbox的时候需要绑定一个触发函数,通过点选事件来触发后续的...并通过 bindchange 绑定触发事件后的处理函数。H5 代码: js 代 -
CheckBox选中不触发事件
2018-12-10 14:47:04如何避免这种事情发生呢? 其实就是要区分到底是人为的触发的,还是代码触发的。...事件响应的函数中添加这个条件 checkbox.Focused Focused:true :人为触发的 Focused:false: 代码触发的... -
checkbox选中与未选中判断示例
2020-09-04 07:58:59本节主要介绍了checkbox选中与未选中的判断方法,需要的朋友可以参考下 -
C# WPF DataGrid下面 使用CheckBox 选中事件
2020-10-17 15:50:14xaml文件中 第一种方式:在对应的cs中实现 对应的CS文件中事件 private void CheckBox_Click(object sender, RoutedEventArgs e) { CheckBox checkBox = sender as CheckBox; if (checkBox != null) { var cntr = DG... -
jQuery checkbox 选中事件小案例.
2021-05-01 10:15:58先创建视图写出大概布局 ... 再通过checked(属性可设置或返回某个单选按钮是否被选中。) 从而设置为true 便可实现勾选的效果。 $("#btn1").click(function () { they1 = $("inp... -
ABAP CHECKBOX 同时选中事件
2019-10-16 17:21:07FM ALV启用EVENTS参数 设置监听事件 首先LAYOUT设置里面设置 字段SEL 为CHECKBOX EDIT = 'X' CHECKBOX = 'X' REUSE_ALV_GRID_DISPLAY_LVC 函数 启用IT_EVENTS参数 wa_events-name='CALLER_EXIT'. wa_events-form... -
layui 复选框checkbox被选中事件
2021-03-02 15:34:44详细参考该篇文章,点击链接可以直接跳转http://www.shagua.wiki/project/3?p=94 -
bootstrap 设置checkbox部分选中效果
2020-10-20 00:01:08本篇文章主要介绍了bootstrap 设置checkbox部分选中效果,主要涉及到js各个方面的内容,对于bootstrap设置checkbox选中效果感兴趣的朋友可以参考一下吧 -
「checkbox 选中事件」jquery checkbox 选中、改变状态、change 和 click 事件 - seo实验室
2021-02-01 00:22:38checkbox 选中事件jquery判断checked的三种方法:.attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false.prop('checked'); //16+:true/false.is(':checked'); //所有... -
javafx-获取checkbox的选中事件
2021-09-03 09:19:57public void initData(ArrayList<Integer> errorList,Integer currentIndex,ObservableList<Object> obLists){ this.errorList=errorList; this.currentIndex=currentIndex; this.obLists=obLists;... -
checkbox点击事件修改样式
2021-01-08 14:42:33由于需要个性化checkbox的点击事件,不得以研究了一下点击事件。奈何这个项目组居然没有checkbox的样式,看着这原生的样式丑到爆,不得以研究了一下checkbox。(radio也是同理,区别是最好通过条件控制只能单选。) ... -
layui的table单击行勾选checkbox功能方法
2020-10-18 05:24:21今天小编就为大家分享一篇layui的table单击行勾选checkbox功能方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
input checkbox框选中事件
2020-02-25 21:57:39下面是实现多个checkbox框的选中事件和单个checkbox框的选中事件 http://yayihouse.com/yayishuwu/chapter/2465 -
layui 表单模块事件触发,select事件触发,checkbox事件,switch事件,sunmit提交等等
2022-01-26 11:18:28</script> </body> </html> 触发select选择 下拉选择框被选中时触发,回调函数返回一个object参数,携带两个成员: form.on('select(aihao)', function(data){ console.log(data.elem); //得到select原始DOM对象 ... -
小程序 之checkbox按钮选中事件
2020-04-08 10:07:28当复选框组中的第一项被选中时,显示红色线框标出的部分;若复选框组中的第一项未被选中,红色线框区域内的内容不显示 xml部分代码如下: <view class="weui-flex"> <view class="weui-flex__item">... -
jQuery多选框checkbox选中事件
2018-02-02 16:40:481、如果使用jQuery,则使用prop方法来获取和设置checked...input type="checkbox" name="check" id="check" checked="checked" value="Daily"/> <input type="checkbox" name="check" checked="checked" value=... -
单个和多个checkbox选中事件
2016-06-03 13:50:14如果使用jquery,应使用prop方法来获取和...通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase var aaa = $("#check").prop("checked"); if(aaa){ alert("选中"); };2.直接调用che -
在vue项目中checkbox,写点击事件不能选中或者取消选中。(原因分析)
2021-10-09 10:06:301.checkbox,写点击事件不能选中或者取消选中:1.因为investorStateList是个数组,不是一个简单数据类型,vue不能监听到变化,并且改变视图,所以需要使用强制更新视图 .2.或者checked绑定简单的数据类型也可以。 ... -
element ui中el-radio和el-checkbox点击触发两次事件处理方法
2021-07-07 11:34:37找了半天原因,后来发现是el-radio被封装多层,根元素不是...因为点击label的时候,事件冒泡一次,同时会触发关联的input的change事件,导致事再次触发事件。 解决方案 <el-radio-group v-model="radio" @click.n -
jquery checkbox 选中、改变状态、change 和 click 事件
2019-01-10 10:11:44checkbox click和change事件 方法1: $("#ischange").change(function() { alert("checked"); }); 方法2: $(function(){ if ($.browser.msie) { $('input:checkbox').click(function () { this.blur(); this...