精华内容
下载资源
问答
  • 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");
    			});
    		});
    
    展开全文
  • 页面交互事件【高】页面载入时在页面载入时,作为触发条件,通常结合动态面板,中继器等相关组件做数据的动态加载。【高】窗口尺寸改变时当显示页面窗口变化时,作为触发条件。界面自适应就是依据窗口改变,加载对应...

    交互模块说明:由于交互功能和原型制作的粘合性较高,所以在交互模块就不做过多详细的说明,主要在案例中进行串讲。所以在本章只是做简要说明。通过结合笔者使用程度高低进行标注。

    页面交互事件

    3c4e813adff0c20d0d002cfb8ed87206.png

    【高】页面载入时

    在页面载入时,作为触发条件,通常结合动态面板,中继器等相关组件做数据的动态加载。

    【高】窗口尺寸改变时

    当显示页面窗口变化时,作为触发条件。界面自适应就是依据窗口改变,加载对应预设。

    【低】窗口滚动时

    页面窗口发生滚动时,作为触发条件。

    【低】窗口向下滚动时

    页面窗口发生向下滚动时,作为触发条件。

    【低】窗口向上滚动

    页面窗口发生向上滚动时,作为触发条件。


    【中】页面单击时

    针对的是鼠标单击事件,可以实现鼠标单击的触发的交互事件。

    (注:页面的单击事件和元件的单击事件区分,页面单击事件,是单击页面所有地方都可以触发,但是元件的单击事件,只能单击元件的有效范围)。
    【中】页面双击事件

    针对的是鼠标双击事件,作为触发条件。同时也是双击页面任何地方可触发。【中】页面鼠标右击事件

    模拟鼠标右击是的交互,作为触发条件。在一些客户端产品的原型中,可通过右击调出页面菜单。【中】页面鼠标移动时

    监听鼠标的是否移动,从而实现鼠标移动作为触发条件。【低】页面按键按下时

    当键盘按下某个特定的按键,作为触发条件。

    需要配合《启用情形》进行交互处理。(举例:客户端的快捷键事件)。

    76df08d5212c1cf836de9f52e9a574b1.png

    【低】页面按键松开时

    同上【中】自适应视图改变时

    自适应视图:预设的不同分辨率的视图。当切换是,可以加载一些页面的变动与页面的跳转,达到自适应完美展示的效果。



    元件交互事件

    c8c813642d7a5cec1e38244b3b250bc4.png

    单击时、双击时、鼠标右击时、鼠标按下时、鼠标松开时、鼠标移动时、鼠标移入时、鼠标移出时、按键按下时、按键松开时、移动时、旋转时、尺寸改变时、显示时、隐藏时、获取焦点时、失去焦点时、选中改变时、选中时、取消选中时、载入时。

    在元件交互事件中,基本上都是常用的交互事件,以上全部是交互事件的针对元件层面的触发方式。在此就不做过多说明。在后续的案例中,会针对使用到的进行详细说明。

    某些交互效果可以通过多种方式实现,在这种情况下,尽可能的减少交互步骤,到达交互效果。这样可以提高预览的体验。

    特殊模块--动态面板特有的事件

    92445af0ab5776d622ef0a87a585caf8.png

    状态改变时

    动态面板存在多个状态时,状态的切换,作为触发交互的条件。

    PMYX:【案例】中继器系列:正反倒计时元件的实现​zhuanlan.zhihu.com

    拖到开始时

    动态面板可以进行拖动,在拖动的交互开始,作为触发条件。

    拖动时

    动态面板可以进行拖动,在拖动的交互中,作为触发条件。

    拖动结束时

    动态面板可以进行拖动,在拖动的结束,作为触发条件。

    向左拖动结束时、向右拖动结束时、向上拖动结束时、向下拖动结束时

    向不同方向拖动结束时。对应的方向作为触发条件。

    向上滚动时、向下滚动时

    向不同方向滚动时,作为触发条件。

    展开全文
  • 事件的种类浏览器可能发生的事件有很多种,了解这些事件的情境及效果,是 Web 开发不能忽略的基础,接下来介绍一下常见的几种事件:界面相关事件界面相关的事件不一定会与使用者对 DOM 的操作有关系,反而大多数与...

    f333bab53e291ad52e6c936c8c84885a.png

    在前面的两篇文章中,已经介绍了事件的传达机制,以及如何阻止事件的冒泡与默认的行为。 那么,作为「事件三部曲」的最后一篇,我们就来大概介绍一下,DOM 规范之中究竟提供了哪些事件。

    事件的种类

    浏览器可能发生的事件有很多种,了解这些事件的情境及效果,是 Web 开发不能忽略的基础,接下来介绍一下常见的几种事件:

    界面相关事件

    界面相关的事件不一定会与使用者对 DOM 的操作有关系,反而大多数与window对象比较有关系。

    • load 事件:

    注册在 window 对象上,指的是在页面或某个资源加载成功时触发。注意,页面或资源从浏览器缓存加载,并不会触发load事件。

    window.addEventListener('load', function(event) {
      console.log('所有资源都加载完成');
    });
    
    • unloadbeforeunload 事件:

    与 load 事件相反,unload 与 beforeunload 事件分别会在离开页面或重新整理时触发,而 beforeunload 会跳出对话框询问使用者是否要离开当前页面。

    7e9a125f24fb829ae66c38a8c197104b.png
    • 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 结构被完整的读取跟解析后就会被触发,不须等待外部资源读取完成,因此可以这么说,这两者所监听的阶段不同,可以用下面这张图来解释:

    37c9e928f22c16854da93e0e380f5e01.png

    我们在《通过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 事件:这三个事件要放在一起看:
    1. 当鼠标光标移入了某元素时,会先触发 mouseenter 事件。
    2. 鼠标光标在这个元素內「移动」时,会连续触发 mousemove 事件。
    3. 直到鼠标光标离开了这个元素,才触发 mouseleave 事件。

    125f1f24894270c3783b12e07eb5ce78.gif

    这些鼠标相关的事件,都可以通过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 事件: 当 inputtextarea 以及带有 contenteditable 的元素內容被改变时,就会触发 input 事件。
    • change 事件: 当 inputselecttextarearadiocheckbox 等表单元素被改变时触发。 但与 input 事件不同的是,input 事件会在输入框输入內容的当下触发,而 change 事件则是在目前焦点离开输入框后才触发。
    • submit 事件:当表单被送出时触发,通常表单验证都会在这一步处理,若验证未通过则 return false;
    • focus 事件:当元素被聚焦时触发。
    • blur 事件:当元素失去焦点时触发。

    特殊事件

    • Composition Event (组成事件):

    Composition Event 其实指的是 compositionstartcompositionend ,以及 compositionupdate 这三个事件。

    介绍 Composition Events 之前先来谈谈 DOM API 过去对输入框侦测变化的几个方式:

    常见的表单输入框如: <input type="text"> 如果要动态监听输入框的文字变化时, 大多会通过监听 keydownkeypresskeyup 等键盘事件来判断 value 是否变动,但如果是通过「复制粘贴」之类的操作,就无法通过键盘事件来判断。

    而即使是 change 事件则是要在使用者改变內容,且焦点离开输入框的前一刻才会被触发。

    所以后来有了 input 事件, input 事件会在输入框的內容被改变时即时触发,确实也解决了过去在 onChange 以及键盘相关事件功能不足所产生的问题。

    但是,新的问题来了!

    通常像这样的搜索框,我们会用类似 autocomplete (自动完成) 的方式给使用者搜索建议 (以 google 为例):

    27d74160beafcac97176f5b4d77fa787.png

    如上图,在输入中文的时候,通常会需要通过注音之类的输入法来做拼字。

    但是在大部分的情況下,针对「注音符号」或是「拼音文字」去给搜索建议是没有太大意义的。

    这个时候就需要通过 Composition Events 来为输入框做增强。

    通过 Composition Events 我们可以观察使用者在输入框內开启输入法 (Input Method Editor, IME) 时,组字或选字的状态。

    Composition Events 提供三个事件给开发者监听:分別是 compositionstartcompositionend ,以及 compositionupdate

    • compositionstart: 输入框內开启输入法,且正在拼字时触发。
    • compositionupdate: 输入框內开启输入法,且正在拼字选字时更改了內容时触发。
    • compositionend: 输入框內开启输入法,拼字或选字完成,正要送出至输入框时触发。

    执行的时候像这样:

    ca57541eff0106aaa099eb603c031459.png

    可以看到,如果要确认使用者输入完成并送出文字时,就可以通过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:51
    1. 打开页面时,根据后端返回的的值isRequired,设置页面的checkbox标签的勾选状态,并给隐藏的text标签的value赋值,以便于在提交页面时把isRequired再返回给后端 2. 切换checkbox标签的勾选状态时,修改隐藏的text...
  • 它们的区分和用法如下: 如果事件触发一个线程,那么使用自动重置事件和使用SetEvent唤醒等待线程。不用调用ResetEvent,因为线程被唤醒后的那一刻事件将被自动重置。 如果事件触发两个或多个的线程,那么使用...
  • checkbox 选中触发js事件

    千次阅读 2021-10-13 16:34:18
    checkbox点击的时候触发js事件 选择按钮代码如下: <div> <input type="checkbox" id="checkbox"> <span>本周不再显示<...alert("成功触发checkbox改变事件"); }) </script> ...
  • checkbox 和 radio的事件选择一度让我很迷惑。 开始以我对js的理解,我觉得...(webkit不能使用上下左右选择) checkbox注册click事件后,奇迹再次上演,当我们用空格选中checkbox时,神奇的click事件再次触发,而mo
  • 有些时候可能需要用到脚本为一些窗体绑定事件:比如Jquery为单选框checkbox绑定单击事件,本人搜索整理一些常用技巧,需要了解的朋友可以参考下
  • 在待办小程序中,我们通过点选checkbox来表明该事项已完成,也就是说当我们点选该checkbox的时候需要绑定一个触发函数,通过点选事件来触发后续的...并通过 bindchange 绑定触发事件后的处理函数。H5 代码: js 代
  • CheckBox选中触发事件

    万次阅读 2018-12-10 14:47:04
    如何避免这种事情发生呢? 其实就是要区分到底是人为的触发的,还是代码触发的。...事件响应的函数中添加这个条件 checkbox.Focused   Focused:true :人为触发的 Focused:false: 代码触发的...
  • 本节主要介绍了checkbox选中与未选中的判断方法,需要的朋友可以参考下
  • xaml文件中 第一种方式:在对应的cs中实现 对应的CS文件中事件 private void CheckBox_Click(object sender, RoutedEventArgs e) { CheckBox checkBox = sender as CheckBox; if (checkBox != null) { var cntr = DG...
  • 先创建视图写出大概布局 ... 再通过checked(属性可设置或返回某个单选按钮是否被选中。) 从而设置为true 便可实现勾选的效果。 $("#btn1").click(function () { they1 = $("inp...
  • ABAP CHECKBOX 同时选中事件

    千次阅读 2019-10-16 17:21:07
    FM 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部分选中效果,主要涉及到js各个方面的内容,对于bootstrap设置checkbox选中效果感兴趣的朋友可以参考一下吧
  • checkbox 选中事件jquery判断checked的三种方法:​​​​​​​.attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false.prop('checked'); //16+:true/false.is(':checked'); //所有...
  • public void initData(ArrayList<Integer> errorList,Integer currentIndex,ObservableList<Object> obLists){ this.errorList=errorList; this.currentIndex=currentIndex; this.obLists=obLists;...
  • 由于需要个性化checkbox的点击事件,不得以研究了一下点击事件。奈何这个项目组居然没有checkbox的样式,看着这原生的样式丑到爆,不得以研究了一下checkbox。(radio也是同理,区别是最好通过条件控制只能单选。) ...
  • 今天小编就为大家分享一篇layui的table单击行勾选checkbox功能方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • input checkbox选中事件

    千次阅读 2020-02-25 21:57:39
    下面是实现多个checkbox框的选中事件和单个checkbox框的选中事件 http://yayihouse.com/yayishuwu/chapter/2465
  • </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:48
    1、如果使用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
  • 1.checkbox,写点击事件不能选中或者取消选中:1.因为investorStateList是个数组,不是一个简单数据类型,vue不能监听到变化,并且改变视图,所以需要使用强制更新视图 .2.或者checked绑定简单的数据类型也可以。 ...
  • 找了半天原因,后来发现是el-radio被封装多层,根元素不是...因为点击label的时候,事件冒泡一次,同时会触发关联的input的change事件,导致事再次触发事件。 解决方案 <el-radio-group v-model="radio" @click.n
  • checkbox click和change事件 方法1: $("#ischange").change(function() { alert("checked"); }); 方法2: $(function(){ if ($.browser.msie) { $('input:checkbox').click(function () { this.blur(); this...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,371
精华内容 10,948
关键字:

checkbox选中触发事件