原生js两个按钮绑定同一个事件

2024-10-21

原生js实现三个按钮绑定三个计时器，点击其中一个按钮，开启当前计时器，另外另个不开启

今天在某个前端交流群,有个小伙伴问了一个小功能,自己想了一下,代码如下,可以实现基本功能: 下面是html结构 <div id="demo"> <input type="button" value="0" > <input type="button" value="0" > </div> 下面是js代码: <script> var ips = do

原生js实现数据双向绑定

最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定单向数据绑定指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里缺点:一旦HTML代码生成就没有办法改变,如果有新数据重新传入,就必须重新把模板和数据整合到一起插入到文档流中数据双向绑定数据模型和视图之间的双向绑定,用户在视图上的修改会自动同步到数据模型中,同样的,如果数据模型中的值发生变化,也会同步到视图中去

原生Js 两种方法实现页面关键字高亮显示

原生Js 两种方法实现页面关键字高亮显示上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一依靠正则表达式修改 1.获取obj的html2.统一替换html标签3.替换要修改的关键字4.再把html标签修改回去不足就是如果查找的关键字跟替换的标签一样就有冲突了效果预览:http://jsfiddle.net/dtdxrk/EAqkN/embedded/result/ 1 <!DOCTYPE HTML> 2 <html lang=&qu

浅析js绑定同一个事件依次触发问题系列（一）

算了还是上代码吧记得写过这篇文章,但是找不到了(对,就是找不到了,算了再写一遍吧) 也是在群中有人问这个绑定不同事件或者同一个事件的依次触发问题个人建议如果是一个事件的话那么最好写成函数, 还有人问如果我下一个函数要依赖上一个函数执行是否完毕来执行(就是上一个函数如果执行完毕我才执行下一个函数,如果没有执行完毕那么就不执行下一个函数) 我的思路是定义一个变量设置为false 用判断来写这里就不写代码了下一篇写这个代码提一下好了扯淡扯远了开始上代码 cs

JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

javascript 点击事件执行两次js问题在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbind('click').click(function(){ //此处填写逻辑代码 }) ------ 因为利用js在页面加载后添加需要点击事件的代码,发现在点击后会代码会执行两次,因为有toggle效果,导致弹窗出现又很快丢失查了一些资料,发现这是冒泡的原因,需要在点击事件代码中加入阻止冒泡的方法: e.s

原生js监听input值改变事件

哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http://www.cnblogs.com/wteng/p/5434403.html $('input').bind('input propertychange', function() { //to do }) 现在用原生js来实现一遍(其实我翻了下jquery的监听事件on的源码,没找到不知道他写哪了),本

回车键和button按钮都绑定同一个事件，如何避免按回车的时候button重复点击

保存一个全局变量,用来记录Button的焦点状态 <button onclick="login();" onfocus="window.buttonIsFocused=true;" onblur="window.buttonIsFocused=false;">登录</button> 然后,在keydown回调中增加一次校验就可以了: document.onkeydown = function(event){ var e =

[JS] 点击按钮触发后台事件前,弹出确认框

只需要在button中设置onclick属性触发事件即可下面以ASP.NET代码为例, ASP.NET中按钮客户端触发js代码的属性是OnClientClick <asp:Button ID="Button4" Text="刪除" runat="server" OnClientClick="javascript:return confirm('確定刪除?');" /> 效果图: 点击ok则触发服务端后台事件, 点

原生js - 两种图片懒加载实现原理

目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 getBoundingClientRect Element.getBoundingClientRect() 方法返回值是一个 DOMRect 对象,包含了该元素一组矩形的集合:是与该元素相关的css边框集合(top, left, right, bottom). 我们可以采用如下方法来判断是否在可视区域:

原生js实现jquery库中部分事件的功能（jquery库封装二）

继续昨天的封装,今天的部分继昨天选择器之后实现了css样式的获取和添加,attr的获取和添加和一部分事件的封装:只是我自己的理解,不妥之处欢迎大家在评论中提出,相互学习,共同提高 /** * Created by Jason on 2016/12/31. */ //jquery 的构造函数 function Jquery(arg){ //用来存选出来的元素 this.elemenets=[]; switch(typeof arg){ case 'function' : domReady(arg)

qt 两种按钮点击事件应用

1.传统connect 例如: connect(ui->findPushBtn,SIGNAL(clicked()),this,SLOT(find())); 参数1:事件UI 参数2:点击系统函数参数3:指针指向当前参数4:调用函数 2.qt函数中默认有一个on_pushButtonConnect_clicked函数,需要实现点击事件,只需要再代码中实现就可以 1.在UI文件里加入按钮,objectName 设置为pushButtonA 2.在引用的头文件(比如MainWindow.h)里加入

jquery按钮绑定特殊事件

本文主要介绍点击一个按钮处理事件的一些特殊情况和技巧. 一.第一次点击触发一个函数,之后点击都触发另一个函数 1.小白实现 2.大神实现代码如下: <body> <button>click me</button> <script> function bind(func1, func2) { let func = null return function() { (!func ? (func = func2, func1) : func).apply(thi

vue.js下移动端绑定click事件失效，pc端正常的问题

原因可能是我在项目中使用到了 better-scroll,默认它会阻止 touch 事件.所以在配置中需要加上 click: true 即可. 例如: mounted () { this.scroll = new BScroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true }) }

页面所有的button绑定同一个事件,点击不同的button赋值不同

原生js实现数据单向绑定

Object.defineProperty()方法直接在对象上定义一个新属性,或修改对象上的现有属性,并返回该对象. Object.defineProperty(obj, prop, descriptor) 参数 obj 定义属性的对象. prop 要定义或修改的属性的名称. descriptor 定义或修改属性的描述符. 返回值传递给函数的对象.注意:数据描述符和访问器描述符,不能同时存在(value,writable 和 get,set) get:函数return将被用作属性的值. set

原生js点击按钮切换图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态切换图片</title></head><style>ul{ padding:0;margin:0;}li{ list-style: none;} #pic{ position: relative; width: 400px; heig

jQuery为多个元素绑定同一个事件

$('.toals,input[type=datetime]').on('focus',function(){ $('.footer-focus-none').css('display','none'); }); $('.toals,input[type=datetime]').on('blur',function(){ $('.footer-focus-none').css('display','block'); });

用原生 JS 实现双向绑定及应用实例

写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用angular来实现双向绑定,需要我们使用js来实现双向绑定. 需求场景: 写了一个点击事件,当点击的时候在后台赋值了,但是在页面视图上面没有显示出来,想到要使用双向绑定来实现这个功能.因为代码之前是用js和jq写的,引入angular的话,会导致之前的代码不能用.在网上参考了一篇文章之后做出来了这

js 给元素绑定回车事件

经常会看到登录页面输入完账户密码,回车就登录了.实现方法: JQuery方法: $("#focus")为获取id为focus的元素 $("#focus").keypress(function(event){ if(event.which === 13) { //点击回车要执行的事件 } }) JS方法: var focus = document.getElementById("focus"); focus.onkeypress=function(

jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数

1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事件一.常用事件 click(function(){...}) //鼠标点击事件 hover(function(){...}) //当鼠标指针悬停在被选元素上时 blur(function(){...}) //当输入域失去焦点 (blur) 时 focus(function(){...}) //当输

JS实现数据双向绑定

本文参考https://www.cnblogs.com/tianhaining/p/8425345.html 首先先说个面试题哈,就是vue中的v-model是如何实现双向数据绑定的咳咳,下面开始背诵经典面试题了首先当我new一个vue实例的时候,里面在data里声明的数据,都会以getter和setter的形式保存,触发了一个方法,就是Object.defineProperty.这个方法里面有set和get两个方法.保存数据.当数据发生了变化,setter会通知到watch,从而数据驱动了视图

原生js两个按钮绑定同一个事件

热门专题