-
原生js的input事件
2021-02-27 16:00:451.onfocus 当input 获取到焦点时触发2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。3.onchange 当input失去焦点并且它的value值...展开全文1.onfocus 当input 获取到焦点时触发
2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。
3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。
4.onkeydown 按下按键时的事件触发，
5.onkeyup 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件--相当于一个按键，两个事件，没怎么用过
6.onclick 主要是用于 input type=button，input作为一个按钮使用时的鼠标点击事件
7.onselect 当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中
8.oninput 当input的value值发生变化时就会触发，(与onchange的区别是不用等到失去焦点就可以触发了)
使用方法：
以上事件可以直接放到input的属性里，例如：
1 ，
可以通过js给input dom元素添加相应的事件，
2 document.getElementByTagName('input').onfocus = function();
3 事件监听。
-
原生js操作input文本框注册获取焦点、失去焦点事件，设置文本框默认值
2021-06-09 21:20:06<input type="text" value="请输入关键字" class="gray" id="txtInput"> // 文本框中有灰色字体的“请输入关键字”提示，获取焦点时，清空... 注册获取焦点事件 txtInput.onfocus = function () { if (txt展开全文<input type="text" value="请输入关键字" class="gray" id="txtInput">// 文本框中有灰色字体的“请输入关键字”提示，获取焦点时，清空文本框，输入的字体显示为黑色，当文本框为空失去焦点时，显示默认提示文字 // 1. 获取元素 var txtInput = document.getElementById('txtInput'); // 2. 注册获取焦点事件 txtInput.onfocus = function () { if (txtInput.value === '请输入关键字') { this.value = ''; this.className = 'black'; } } // 3. 注册失去焦点事件 txtInput.onblur = function () { // if (txtInput.value === '') { // if (txtInput.value.length === 0 判断字符串的值是否为空时常用 if (txtInput.value.length === 0 || txtInput.value === '请输入关键字') { this.value = '请输入关键字'; this.className = 'gray'; } }
-
原生js之onchange、oninput事件
2021-03-23 20:43:35如果需要实现双向数据绑定，那么需要我们监测输入框这种值的...1、onchange事件：需要注意的一点是原生onchange事件的触发机制 --- 1、内容改变；2、失去焦点 具体代码： var inp1 = document.getElementById('hah展开全文如果需要实现双向数据绑定，那么需要我们监测输入框这种值的变化，而这种监听方法常用的分为2种----onchange和oninput事件。
<input id="hah" value="hehe"> 给定一个输入框设定value值，这种就可以看做单向数据流。而要实现双向数据流，需要监听事件 1、onchange事件：需要注意的一点是原生onchange事件的触发机制 --- 1、内容改变；2、失去焦点 具体代码： var inp1 = document.getElementById('hah') inp1. onchange= function(e){ inp1.setAttribute('value',e.target.value) } 2、oninput事件：实时监测变化，一旦变化就触发事件。 inp1.oninput= function(e){ inp1.setAttribute('value', e.target.value) } 3、需要注意的是，实现双向数据，我们需要利用事件对象event获取输入框此时的值，并且将value设为该值，要设定属性值需用setAttribute(属性名，目标值)。
-
JavaScript注册事件
2021-04-20 15:07:441. 两种注册事件的方式 第一种方式：在标签中使用事件句柄，在事件句柄后编写js代码，事件句柄对应的事件发生之后，“注册”在事件句柄当中的代码被监听器调用。注意，这种方式代码顺序有要求！ <!--注册事件...展开全文1. 两种注册事件的方式
- 第一种方式：在标签中使用事件句柄，在事件句柄后编写js代码，事件句柄对应的事件发生之后，“注册”在事件句柄当中的代码被监听器调用。注意，这种方式代码顺序有要求！
<!--注册事件的第一种方式：在标签中使用事件句柄--> <script> /*sayHello()函数在页面打开的时候并不会执行，只是当页面打开的过程中完成对事件的绑定， * 完成对事件的注册，以后只有当该事件发生之后sayHello()函数才会执行，此函数称为回调函数（callback function） * 回调函数特点：监听器负责调用函数，程序员不负责。事件发生后监听器会调用此回调函数*/ function sayHello() { console.log('hello') } </script> <input type="text" onclick="sayHello()">- 第二种方式：利用获取节点id的方式来绑定事件
<body> <!--这段代码input标签必须在script标签之前，不然mbt为undefined，程序报错--> <input type="button" value="触发绑定事件" id="mbt"> <script> sum = function () { console.log("执行了sum函数"); }; /*根据id获取节点对象*/ var newbt = document.getElementById("mbt"); newbt.onclick = sum; </script> </body>如果希望以上代码中，input标签在script之后还能正常运行，可以考虑使用onload方式
<body onload="pageOnload()"> <script> function pageOnload() { /*页面加载完成之后才会执行下面的代码，此时mbt这个id已经加载完成了*/ sum = function () { console.log("执行了sum函数"); }; /*根据id获取节点对象*/ var newbt = document.getElementById("mbt"); newbt.onclick = sum; } </script> <input type="button" value="触发绑定事件" id="mbt"> </body>以上的代码onload仍是第一种绑定方式，可以继续优化：
<!--优化onload绑定事件--> <body> <script> function pageOnload() { console.log("页面加载后执行此函数"); } /*页面打开的时候，会执行下面的代码，作用：将回调函数pageOnload注册到load事件中*/ /*页面加载完毕后，会发现load事件从而执行绑定的对应函数【回调函数】*/ window.onload = pageOnload; </script> </body>综上，建议使用onload绑定事件，以避免第一种方式可能出现的代码顺序问题，下面是标准格式：
<!--优化onload绑定事件--> <!--优化onload绑定事件--> <body> <script> /* 匿名函数形式 */ window.onload = function (ev) { /* 给按钮1绑定鼠标单击事件属性 */ var button1 = document.getElementById("button1"); button1.onclick = function (ev2) { console.log("button1"); }; /* 给按钮2绑定鼠标单击事件属性 */ var button2 = document.getElementById("button2"); button2.onclick = function (ev2) { console.log("button2"); }; /* 上面的代码也可以简写成下面的形式 */ /* document.getElementById("button1").onclick = function () { }; document.getElementById("button2").onclick = function (ev2) { }; */ } </script> <input type="button" value="按钮1" id="button1"> <input type="button" value="按钮2" id="button2"> </body>2. 根据id获取节点访问属性
- document：代表整个HTML文档，是DOM的顶级对象
- window：代表整个浏览器窗口，是BOM的顶级对象
- getElementById：根据id获取节点属性，如
var elem = document.getElementById("节点id");获取此节点对象后，可以引用该节点（即标签）的任何属性【通过 . 的方式】。如elem.type = "text";
3. 案例：捕捉回车键【捕捉键值】
- 监听器调用回调函数时会传过来一个事件对象，可以在function中使用该对象
- keyCode是键盘事件对象的属性，根据该属性可以获取输入的键值、
- 键盘回车键是13，ESC键是27
<!--捕捉回车键--> <body> <script> /* 使用onload解决代码顺序问题 */ window.onload = function (ev) { /* 使用keydown捕捉键盘按下事件 */ document.getElementById("load").onkeydown = function (ev2) { if (ev2.keyCode == 13) console.log("捕捉到回车键，登陆中"); else if (ev2.keyCode == 27) console.log("捕捉到ESC键，退出中"); } } </script> <input type="text" value="" id="load"> </body>
-
React 合成事件与 JavaScript 原生事件对比
2021-01-16 15:35:22下面我们从 4 个方面来对比 React 合成事件与 JavaScript 原生事件。 1、 事件传播与阻止事件传播 浏览器原生 DOM 事件的传播可以分为 3 个阶段：事件捕获阶段、目标对象在这里插入代码片本身的事件处理 程序调用... -
原生js鼠标事件onmousedown、onmousemove、onmouseup实现窗口的拖拽
2021-08-29 16:33:41Document 注册信息 注册信息（可以拖拽）【关闭】 -
vue中的事件：原生事件与自定义事件__Vue.js
2021-01-12 18:35:56模板编译 processAttrs对于ast attributes处理(v-on/@)利用onRE与dirRE来捕获事件这里最重要的就是dynamic的判断，vue中可以用动态参数来命名事件名称，如@[prop]，prop为data中的值。不过通常都是一个静态的事件... -
移动端原生事件
2021-01-10 14:49:441.1 移动端原生事件 touchstart ： 手指按下 touchmove：手指一动 touchend：手指离开 注意：使用事件绑定的方式添加移动端事件 //1.添加移动端事件 oDiv.addEventListener("touchstart",function(){ ... -
vue中注册原生事件，绑定事件到window上
2021-06-02 13:37:32最近因工作需要使用到高德地图，在调用时拼接了字符串模版，原生绑定了一个点击事件，并传递参数，如下图 百度一番后发现，在vue里，所有的方法都是在组件内部声明的，也只能在组件内部调用，原生调用h5方法必须... -
原生js的change事件选择相同文件只触发一次的问题？
2021-08-23 13:37:07当第一次上传文件后再次上传文件后发现input的change事件没有被触发？ 原因： 这是因为两次上传的文件都是同一个，input file的value值都是同一个，所以change事件就不会再被触发，每次上传文件的时候，change事件... -
JS中 原生事件的绑定
2021-07-06 14:58:211、在dom 元素中直接绑定（注册行内事件） onclick = ’ ’ 或 onmouseover = ’ ’ 2、在js代码中绑定 document.getelementByID (" id ").onclick = function test () { } 3、绑定事件监听函数 对象.... -
【备忘】原生 JS 监听未来元素事件实例
2021-02-27 17:47:04）或者说分布式的微博系统——Mastodon（官方中文译万象，网民又称长毛象），简单说就是任何人都可以使用其源码搭建一个微博站点并各自允许用户注册，不同站点的用户又可以相互发现和关注…… ↓↓↓ 注册 - 长毛... -
原生js验证简洁注册登录页面
2021-06-11 01:27:22序一个以js验证表单的简洁的注册登录页面，不多说直接上图效果主要文件完整代码1 sign_up.html 注册表单sign-up 创建账户已经拥有账户？登录2 log_in.html 登录表单log-in 登录没有账户？注册3 common_form.css 表单... -
React事件和原生事件关系
2021-06-03 17:21:01react自身实现了一套自己的事件机制，包括事件注册、事件的合成、事件冒泡、事件派发 React 和 原始事件是两套机制。 React事件是基于原始事件机制下完成的 结论 原生事件 （捕获阶段-目标元素阶段-冒泡阶段... -
原生js的addEventListener给同一个对象的同一个事件注册多个事件处理函数
2021-06-24 20:57:17<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head>...script src="js/common.js"></script> <. -
原生JavaScript事件详解
2021-03-07 05:34:31JQuery这种Write Less Do More的框架，用多了难免会对原生js眼高手低。小菜其实不想写这篇博客，貌似很初级的样子，但是看到网络上连原生js事件绑定和解除都说不明白，还是决定科普...直接在dom对象上注册事件名称... -
原生js里的ajax
2021-08-07 03:27:17在说ajax之前需要先了解两个概念，那就是js语言中的同步和异步1:同步是什么 (Synchronous)在一个任务进行时，不能开启其他的任务同步访问：浏览器在想服务器发送请求的时候，只能等待服务器的响应，不能够做其他的事... -
关于原生js事件
2021-03-23 08:09:02js事件分为事件冒泡和事件捕获 事件捕获:事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定) 事件冒泡：事件按照从最特定的事件目标到最不特定... -
原生 JS 汇总
2020-12-19 23:12:41JS选取DOM元素的方法 注意：原生JS选取DOM元素比使用jQuery类库选取要快很多1、通过ID选取元素 document.getElementById('myid');2、通过CLASS选取元素 document.getElementsByClassName('myclass')[0];3、通过标签... -
极验与vue的原生js结合
2020-12-19 12:38:33既然说了极验，那么我就简单介绍一下极验是一个什么工具：极验验证是一种在计算机领域用于区分自然人和机器人的，通过简单集成的方式，为开发者...现在我们来说说如何将极验前端的内容和vue用原生js进行结合：一般... -
常见的原生javascript DOM操作
2020-12-30 06:47:00事件 addEventListener() addEventListener()将指定的事件监听器注册到目标对象上，当目标对象触发制定的事件时，指定的回调函数就会触发。目标对象可以是 文档上的元素、 document、 window 或者XMLHttpRequest... -
js之原生自定义事件
2021-08-31 14:37:02js之原生自定义事件 var oinput = document.getElementById('input1'); //注册一个名为haha的自定义事件 var haha = new Event('haha'); // 传参的写法 // var myEvent = new CustomEvent('haha',{ // ... -
原生js请求
2021-01-04 13:10:16//监听XHR对象的状态改变事件 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; //打开到服务器的连接 xhr.open(‘post’, ... -
在js中使用for循环注册监听事件
2021-02-01 11:10:29在使用百度地图api进行开发时遇到了需要给地图上的点标记添加监听事件的需求，于是使用java开发时的习惯在for循环中给marker按钮添加监听事件，使用如下代码 for(var item in survs){ var markerName=survs[item... -
原生js实现一个弹出框
2021-06-09 10:16:03我喜欢新浪微博那种风格的对话框，所以我用js实现了弹出一个对话框的功能，同时用css美化了弹出框的风格。 先看看效果图：qq截图 图像失真了。 1.弹出遮罩层。/* 弹出遮罩层，去掉注释直接用 */ var back=document.... -
原生JavaScript
2021-03-13 01:08:22鼠标事件；onfocus onblur innerText、innerHTML、src、href、id、alt、title、可以直接更改元素的内容,但是更改元素的样式需要使用element.style.格式的方法 使用定位的元素不能使用margin:auto来居中 改变元素... -
JavaScript 写 原生组件
2021-01-06 21:05:29JavaScript 原生组件 笔记目录JavaScript 原生组件一、什么是组件1.继承Html组件2.自定义组件3.get 和 set4.合并配置（合并多个对象）二、案例1.Massagebox.js 文件2.组件模板.html 文件3案例效果案例总结 一、... -
原生JS操作DOM的方法
2021-01-19 15:41:28JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点 整个文档是一个文档节点 每个标签是一个元素节点 包含在元素中的文本是文本节点 元素上的属性是属性节点...
收藏数
40,023
精华内容
16,009