event | 易学教程

HTML5 实时监听输入框值变化

阅读更多关于 HTML5 实时监听输入框值变化

在网页开发中经常会碰到需要动态监听输入框值变化的情况，如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。因此这篇文章向大家介绍一种完美的解决方案：结合html5标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。主流浏览器基本都支持 oninput 事件，IE9以下不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况： 1、修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。 2、修改了 input:text 或者 textarea 元素的值，value 属性发生变化。 3、修改了 select 元素的选中项，selectedIndex 属性发生变化。在监听到onpropertychange事件后，可以使用 event

VUE.JS实现购物车功能

阅读更多关于 VUE.JS实现购物车功能

购物车是电商必备的功能，可以让用户一次性购买多个商品，常见的购物车实现方式有如下几种： 1. 用户更新购物车里的商品后，页面自动刷新。 2. 使用局部刷新功能，服务器端返回整个购物车的页面html 3. 服务器端返回JSON格式，使用模板引擎+dom操作更新页面最近新学习了vue.js，一个轻量级的mvvm（Model-View-ViewModel），vue.js是数据驱动无须操作dom，它提供特殊的html语言，把dom和数据绑定在一起，一旦修改了数据，dom将会自动更新更新。关于vue.js的学习，请参考《 Vue.js——60分钟快速入门》这篇文章或者去官网 https://cn.vuejs.org/ 学习。下面就是用vue.js实现购物车。第一步定义view： <div class="con"> <h1>购物车程序</h1> <table class="table"> <tr> <th>序号</th> <th>商品</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> <tr v-for="x in goods_list"> <td>{{x.id}}</td> <td>{{x.name}}</td> <td class="price">￥{{x.price}}</td> <td> <input

20200118qt 事件学习

阅读更多关于 20200118qt 事件学习

1.处理事件时，可以继承某个基类，例如QPushButton , 然后重写里面的相关虚函数，既可实现相关功能 2. 可以重写event 函数（一般不这样用）， event 函数是一个事件分发函数，当有事件发生时，系统创建事件对象，讲该对象传给event 函数， event函数将其分发给相应的事件处理器，由相应的事件处理器来处理，即如1 中的重写基类的相关虚函数 3.事件过滤器，将相关的事件过滤出来，处理 eventFilter(QObject *obj, QEvent *event)，但是注意需要先调用 installEventFilter(this); 否则无效4.提升类写一个类继承自某基类，例如 QWight 在设计面板上提升，就可以直接使用那个类，在面板上设计了，这些都来自与那个文档来源： https://www.cnblogs.com/liujunsblocg/p/12210300.html

sciter 透明背景界面透明

阅读更多关于 sciter 透明背景界面透明

<!DOCTYPE html> <html window-frame="transparent" window-resizable > <head> <meta charset="UTF-8"> <style> html { background:transparent;} .fl{float:left} .fr{float:right} p, ul{margin:0;padding:0} li{list-style:none;} .hover-div{display:none;position:absolute;top:-2dip;left:0dip;width:271dip;height:268dip;background: url(images/info.png) no-repeat bottom center} #menu_pop:hover .hover-div{display:block;} </style> <script type="text/tiscript"> //view.move( evt.xScreen - xoff, evt.yScreen - yoff, true); /* $(div) << event mousedragrequest (evt) { stdout.println("jin lai"); var r = view

ApplicationListener<ContextRefreshedEvent>接口，Spring启动后获取所有拥有特定注解的Bean

阅读更多关于 ApplicationListener接口，Spring启动后获取所有拥有特定注解的Bean

最近项目中遇到一个业务场景，就是在Spring容器启动后获取所有的Bean中实现了一个特定接口的对象，第一个想到的是ApplicationContextAware，在setApplicationContext中去通过ctx获取所有的bean，后来发现好像逻辑不对，这个方法不是在所有bean初始化完成后实现的，后来试了一下看看有没有什么Listener之类的，发现了好东西ApplicationListener，然后百度一下ApplicationListener用法，原来有一大堆例子，我也记录一下我的例子好了。很简单，只要实现ApplicationListener<ContextRefreshedEvent>接口，然后把实现类进行@Component即可，代码如下： Java代码 @Component public class ContextRefreshedListener implements ApplicationListener<ContextRefreshedEvent> { @Override public void onApplicationEvent(ContextRefreshedEvent event) { // 根容器为Spring容器 if(event.getApplicationContext().getParent()==null){ Map<String

列表页跳转加渲染

阅读更多关于列表页跳转加渲染

导航动态路径 toDetail(event) { console.log(event) let index = event.currentTarget.dataset.index; wx.navigateTo({ url: '/pages/detail/detail?index=' + index }) } 每个被渲染列表动态获取index <block wx:for="{{listArr}}" wx:key="index"> <view catchtap="toDetail" data-index="{{index}}"> <template is="listTmp" data="{{...item}}"></template> </view> </block> 在被导航到页通过传入的index切换activeObj实现对应展示 onLoad: function (options) { console.log(datas) let index = options.index; this.setData({ activeObj: datas.list_data[index] }) } Tips target 和 currentTarget target: 点击的元素 event.target.dataset.index currentTarget: 当前点击的元素 event

zabbix监控

阅读更多关于 zabbix监控

zabbix server //docker zabbix-appliance docker run --name my-zabbix-server -p 80:80 -p 10051:10051 -e PHP_TZ="Asia/Shanghai" -d zabbix/zabbix-appliance:ubuntu-4.4.4 docker exec -i -t my-zabbix-server /bin/bash zabbix agent //docker centos docker run -d --name my_centos --privileged centos:7.5.1804 /sbin/init docker exec -i -t my_centos /bin/bash //zabbix源 rpm -Uvh https://repo.zabbix.com/zabbix/4.4/rhel/7/x86_64/zabbix-release-4.4-1.el7.noarch.rpm //客户端 yum install zabbix-agent systemctl enable zabbix-agent systemctl start zabbix-agent //docker zabbix agent docker run --name zabbix-agent

v-on基本用法

阅读更多关于 v-on基本用法

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。示例：  <button v-on:click="doThis"></button>  <button v-on:[event]="doThis"></button>  <button @click="doThis"></button>  <button @[event]="doThis"></button> v-on传值情况一： methods的方法有参数，传值 <button @click="msg('lhs')">传值</button> methods:{ msg(event){ console.log(event);//输出的lhs } } 注意： @click="msg('lhs')"传值时必须加上单引号，不加就传data里的参数情况二： methods的方法有参数，但没有传值 <button @click="msg">传值</button> methods:{ msg(event){ console.log

动图学 JavaScript 之：事件循环（Event Loop）

阅读更多关于动图学 JavaScript 之：事件循环（Event Loop）

前言今天该学习 Event Loop 啦，其实之前我写过一篇 Event Loop 的文章：浅析 JS 中的 EventLoop 事件循环（新手向）这篇呢则是动图学 JS 系列中的，可以结合之前的文章食用~ 我们都知道 JavaScript 是一门单线程的语言：同一时间只能运行一个任务。通常情况下这没什么问题，但是如果你有一个任务需要耗费 30 秒的时间，那其他任务难道都要等它 30 秒么？（由于 JS 运行在浏览器的主线程，所以这 30 秒的时间里，整个页面都会处于卡死状态）幸运的是，浏览器提供了一些 JS 引擎不具备的功能： Web API 。它包括 DOM API ， setTimeout ， HTTP 请求等等。这些功能都可以帮助我们处理异步、非阻塞的操作。调用栈当我们调用一个函数时，它会被添加到一个叫做调用栈 (call stack) 的地方，调用栈是 JS 引擎的一部分，而不是浏览器特有的。本质上它是一个栈，具有后进先出（Last In, First Out. 即 LIFO）的特点。当一个函数调用完成，它就被从调用栈中弹出。上图中函数 respond 返回了一个 setTimeout 函数，它也被添加到调用栈中，（ setTimeout 正是 Web API 提供的功能之一：它可以让我们延迟一个任务的执行并且不阻塞主线程。）

Event Loop原理

阅读更多关于 Event Loop原理

文章目录前言 event loop 宏任务&微任务附录前言灵魂三问 JS为什么是单线程的 ? JS最初被设计用在浏览器中,那么想象一下,如果浏览器中的JS是多线程的。场景描述: 那么现在有2个进程,process1 process2,由于是多进程的JS,所以他们对同一个dom,同时进行操作 process1 删除了该dom,而process2 编辑了该dom,同时下达2个矛盾的命令,浏览器究竟该如何执行呢? 为什么需要异步 ? 如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验单线程又是如何实现异步的呢 ? 既然JS是单线程的,只能在一条线程上执行,又是如何实现的异步呢? 答案就是**是通过的事件循环(event loop)** event loop javascript 是一门单线程的脚本语言，也就意味着同一个时间只能做一件事，但是单线程有一个问题：一旦这个线程被阻塞就无法继续工作了，这肯定是不行的。由于异步编程可以实现非阻塞的调用效果，引入异步编程自然就是顺理成章的事情了。从同步异步来理解JS的执行机制 console.log(1) setTimeout(function(){ console.log(2) },0) console.log(3)

订阅 event