-
原生js绑定事件 解绑
2018-01-03 14:33:441 所以，想解除事件就相当简单了，只需要再注册一次事件，把值设成null，例如： var btn = document.getElementById("test");...原理就是最后注册的事件要覆盖之前的，最后一次注册事件设置成null，也就展开全文1 所以，想解除事件就相当简单了，只需要再注册一次事件，把值设成null，例如：
var btn = document.getElementById("test"); 2 3 btn.onclick = function(e){ 4 alert("ok"); 5 }; 6 7 btn.onclick = null;原理就是最后注册的事件要覆盖之前的，最后一次注册事件设置成null，也就解除了事件绑定。
假设有这样的html结构：
1 <div id="test" class="test"> 2 <div id="testInner" class="test-inner"></div> 3 </div>
1 var btn = document.getElementById("test"); 2 3 //捕获事件 4 btn.addEventListener("click", function(e){ 5 alert("ok1"); 6 }, true); 7 8 //冒泡事件 9 btn.addEventListener("click", function(e){ 10 alert("ok"); 11 }, false);
点击内层的div，先弹出ok1，后弹出ok。结合上边的原理图，外层div相当于图中的body，内层div相当于图中最下边的div，证明了捕获事件先执行，然后执行冒泡事件。
1 var btn = document.getElementById("test"); 2 var btnInner = document.getElementById("testInner");
3 4 btn.addEventListener("click", function(e){ 5 alert("ok1"); 6 }, false); 7 8 btnInner.addEventListener("click", function(e){ 9 //阻止冒泡 10 e.stopPropagation(); 11 alert("ok"); 12 }, false);
1 var btn = document.getElementById("test"); 2 //将回调存储在变量中 3 var fn = function(e){ 4 alert("ok"); 5 }; 6 //绑定 7 btn.addEventListener("click", fn, false); 8 9 //解除 10 btn.removeEventListener("click", fn, false);
-
vue中使用原生js自定义事件监听
2020-09-22 19:33:08vue项目中引入外部js 需要通过外部js触发vue组件执行某些事件 JS中，最简单的创建事件方法，是使用Event构造器： 事件的定义 var myEvent = new Event(‘event_name’); 但是为了能够传递数据，就需要使用 ...展开全文vue项目中引入外部js 需要通过外部js触发vue组件执行某些事件
JS中，最简单的创建事件方法，是使用Event构造器：事件的定义
var myEvent = new Event(‘event_name’);
但是为了能够传递数据，就需要使用 CustomEvent 构造器：
var myEvent = new CustomEvent(‘event_name’, {
detail:{
data:‘要传输的值’
},
});事件的注册
//假设listener注册在window对象上
window.addEventListener(‘event_name’, function(event){
// 如果是CustomEvent，传入的数据在event.detail中
console.log(‘得到数据为：’, event.detail);// ...后续相关操作});
**
事件的触发
**
// 随后在对应的元素上触发该事件
if(window.dispatchEvent) {
window.dispatchEvent(myEvent);
} else {
window.fireEvent(myEvent);
}
-
input获取焦点 原生js_原生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原生事件怎么注册
2017-04-04 09:04:28<!DOCTYPE html> <title>JS Bin</title> function calc(){ console.log("d"); } </scrip展开全文<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script> function calc(){ console.log("d"); } </script> </head> <body> <input type="checkbox" id="field1" name="field1" value="0"><lable for="field1">field1</label> <input type="checkbox" id="field2" name="field2" value="1"><lable for="field2">field2</label> <button onclick="calc()">submit</button> </body> </html>竟然忘了原生事件怎么注册的了。。。
-
React Native 原生与JS之间事件绑定注册 作用在于原生可以直接调用JS的方法
2016-12-25 14:50:271 前面我们已经说过了RN混合开发中,原生如何调用JS的各个页面 JS... 目前,我还没有了解到如何可以直接调用JS的某个方法,我的做法是采用事件响应的方式,就跟Android原生的按钮绑定了某个事件一样,如果收到这个消息,JS -
原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX
2018-08-17 21:03:54首先我们先介绍什么是事件: 事件就是某一个对象在特定的时刻做了某一件事。... 那么事件有三大要素： 1、事件源：dom对象 2、事件类型：具体参照W3C的...原生JS注册事件的语法： //原生注册事件语法： documen... -
原生js的input事件
2020-06-08 09:43:451.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这...5.onkeyup 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件--相当于一个按键，两个事件，没怎么用过 6.on.. -
原生js
2017-11-27 16:18:00文章：【前端性能】必须要掌握的原生JS实现JQuery 讲了一些jquery方法的js实现，有一些方法是js最新标准的方法。 文章：原生JavaScript事件详解 讲解了js事件的注册和冒泡原理。 文章：原生JS与其他JS 区别 ... -
1.事件委托的原理以及优缺点 2. 手写原生js实现事件代理，并要求兼容浏览器
2017-08-30 17:50:22这是靠事件的冒泡机制来实现的，优点是：（1）可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒 （2）可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适缺点... -
关于js注册事件的常用方法
2020-10-27 13:13:23为了兼容各种浏览器，今天没事特意复习了一下js原生事件特性，对其封装一下。 -
原生js事件？看这一篇就够了！！！
2020-08-11 00:05:17传统注册事件的方式有唯一性，也就是同一个元素同一个事件只能设置一个处理函数，最后注册添加的的处理函数会覆盖前面注册添加的处理函数 解决办法 => 事件监听 事件流 事件冒泡 : 事件从子元素向父元素传播 ... -
模板内部不支持原生js的方法？》》artTemplate模版方法注册window全部事件方法
2019-09-25 18:53:25我的模板中出现了： {{parseInt(hasshakenum)}} 结果报错： Template Error resultPageTMP Render Error parseInt is not a function ...模板内部不支持原生js方法？请问怎么写才能支持？ ... -
用js原生方法封装跨浏览器注册事件的方法系列一（事件入门）
2018-03-05 19:48:45前言： 本人是一个有着三年开发经验的前端开发人员，...各种框架横行，使用原生js的地方实在太少，但是由于爱钻牛角尖，所以喜欢学js最基础的东西，毕竟基础功底还是很重要的，本文是我的第一篇学习博客，有不足之... -
【备忘】原生 JS 监听未来元素事件实例
2021-02-27 17:47:04）或者说分布式的微博系统——Mastodon（官方中文译万象，网民又称长毛象），简单说就是任何人都可以使用其源码搭建一个微博站点并各自允许用户注册，不同站点的用户又可以相互发现和关注…… ↓↓↓ 注册 - 长毛... -
JS如何注册事件和解绑事件
2019-06-16 14:18:45使用原生js 将事件的匿名函数赋值为null; onload = function (){ var a = document.getElementById("a"); //注册事件 a.onclick = function (){ console.log("a") } //事件解绑 a.onclick = null; } 使用... -
js原生实现点击事件只创建一个元素
2019-03-18 09:22:00问题：注册点击事件的时候，多次点击则会重复多次的创建元素 要求：不论点击多少次，只创建一次 思路：触发点击事件，若有，则不创建，若无，则创建 基础HTML代码如下: <!DOCTYPE html> <... -
原生js —— 表单验证练习（12306注册）
2019-09-02 18:12:3912306注册 知识点： ① 获取父元素：对象.parentElement、对象.parentNode ② 获取最后一个子元素：对象.lastElementChild、对象.lastChild ③ 获取第一个子元素：对象.firstElementChild、对象.firstChild ④ 当... -
原生JS实现放大镜效果并可随鼠标滚轮事件实现二次放大
2019-06-08 21:22:43首先是放大镜的追随效果，通过在原图注册的onmousemove事件获取事件的clientY和clientX配合其它参数值计算出放大镜在其父元素：原图的top、left属性的值。 放大图中的图片的margin-top、margin-left属性去上面top、... -
原生js实现上拉加载
2020-07-24 16:09:52地址列表组件没有无法使用上拉加载，所以原生js实现 给列表部分注册touchmove事件，监听用户滑动屏幕 判断滚动条的位置距离底部高度为100时，page+1，并且拉去接口 当接口调取过程中或者已经没有新的收据的时候，... -
原生js实现全选、反选
2018-11-24 14:56:10太久没写原生js了，过程中遇到了个问题就是 通过document.getElementsByClassName获取到的是所有为此类名的元素，所以不能直接给他注册点击事件，要通过数组的方式，通过下标来确定元素 代码参考网址我给关了。。。... -
Angular js+原生JS实现在某div上添加元素
2019-01-30 17:54:33假设已经存在一个div，想在如下div上添加一个小图标，angular js+原生js配合，可实现，操作如下： html部分 <div class="mapNew" id="mapNew"> </div> js... -
原生js发送Ajax请求
2019-10-03 00:18:47一、通过onload注册事件 // 1. 创建一个 xhr 对象 var xhr = new XMLHttpRequest(); // 2. 设置请求的方式和路径 xhr.open('GET', '/time'); // 3. 发送请求 xhr.send(null); // 4. 注册事件 xhr.onload =...
收藏数
159
精华内容
63