(二)原生JS实现 - 事件类方法
事件处理 - 添加事件
1 var addEventHandler = function (oTarget, sEventType, fnHandler) { 2 if (oTarget.addEventListener) { 3 oTarget.addEventListener(sEventType, fnHandler, false); 4 } else if (oTarget.attachEvent) { 5 oTarget.attachEvent("on" + sEventType, fnHandler); 6 } else { 7 oTarget["on" + sEventType] = fnHandler; 8 } 9 };
事件处理 - 移除事件
1 var removeEventHandler = function (oTarget, sEventType, fnHandler) { 2 if (oTarget.removeEventListener) { 3 oTarget.removeEventListener(sEventType, fnHandler, false); 4 } else if (oTarget.detachEvent) { 5 oTarget.detachEvent("on" + sEventType, fnHandler); 6 } else { 7 oTarget["on" + sEventType] = null; 8 } 9 };
事件处理 - Bind
1 var BindAsEventListener = function(object, fun) { 2 var args = Array.prototype.slice.call(arguments).slice(2); 3 return function(event) { 4 return fun.apply(object, [event || window.event].concat(args)); 5 } 6 };
使用:
1 var Test = function(){ 2 this.init(); 3 ); 4 Test.prototype = { 5 init:function(){ 6 this.name = 'test'; 7 this.btn = document.getElementById('test'); 8 this._fC = BindAsEventListener(this, this._doClick,'bind event'); 9 addEventHandler(this.btn, "click", this._fC ); 10 }, 11 _doClick:funtion(e,str){ 12 e.preventDefault(); 13 alert(this.name + ' ' +str); 14 }, 15 destory:function(){ 16 removeEventHandler(this.btn, "click", this._fC ); 17 } 18 }
事件代理
1 var Delegate = function (parent,eventType, selector, fn , that){ 2 eventType = eventType || 'click'; 3 if(!parent){ 4 return; 5 } 6 if( typeof fn !== 'function'){ 7 return; 8 } 9 if( typeof selector !== 'string'){ 10 return; 11 } 12 var handle = function (e){ 13 var evt = window.event ? window.event : e; 14 var target = evt.target || evt.srcElement; 15 target = getDlgElement(target); 16 if(target){ 17 fn.call(that,{target:target,event:e}); 18 } 19 }; 20 var getDlgElement = function(ele){ 21 if(!ele){ 22 return null; 23 } 24 return ( (ele.id === selector) || 25 (ele.className && ele.className.indexOf(selector) != -1)) ? ele : getDlgElement(ele.parentNode); 26 }; 27 parent['on' + eventType] = handle; 28 };
使用:
1 var Test2 = function(){ 2 this.init(); 3 }; 4 Test2.prototype = { 5 init:function(){ 6 var me = this; 7 Delegate(document,'click','classname',function(e){ 8 e.event.preventDefault(); 9 var obj = e.target; 10 me.setVaule(obj,'test') 11 },this); 12 }, 13 setVaule:function(elem,str){ 14 elem.setAttribute('data-value',str); 15 } 16 }
转载于:https://www.cnblogs.com/huair_12/p/4116452.html
(二)原生JS实现 - 事件类方法相关推荐
- jQuery动态绑定事件或者原生js动态绑定事件
说一个这周写前后端交互时遇到的一个印象深刻的问题--动态绑定事件. 一.jQuery 一般我们给节点绑定事件使用的都是这样的形式 $("#btns").click(function ...
- 函数、原生JS的事件相关(上)
@关于函数和原生JS的一些事件相关知识点 函数的返回值 所有的函数都会有返回值,一般函数的返回值默认是undefined 函数内使用return来自定义返回值,但是注意return语句之后的代码全部都 ...
- 原生js绑定事件的方法和dom操作
1.行内绑定:在标签上写οnclick="事件名" <button onclick="handleClick">Click Me</butto ...
- 原生js绑定事件的三种方法
// 绑定事件// 行内绑定// 选择元素绑定事件// 事件监听 有三个参数('什么事件','函数','true或false')true(事件捕获) false(事件冒泡)document.query ...
- 【JavaScript】原生js阻止事件的三种方式
三种阻止事件执行的方式 event.preventDefault() event.stopPropagation() return false 1.event.preventDefault() 阻止特 ...
- 在原生js中的事件监听方法
一.传统事件绑定方法 我们在学习的时候,最初接触的事件绑定方式大多是传统事件绑定方法.传统事件绑定方法事例如下: window.οnlοad=function(){alert("页面已加载& ...
- 原生js循环展示dom_【前端面试】用一道题讲 js 的事件循环队列
昨天去面了滴滴,一口气面了三面,考了 promise 和事件循环.之前的猿辅导也考察了这些,几乎所有的大厂中厂都一定会考原生 js 的事件循环队列. 今天,我把昨天考察的原题拿出来分析一下. setT ...
- 原生js 给动态添加的元素添加(事件监听器)
原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...
- 原生js循环展示dom_web前端教程:JS高阶编程技巧-惰性函数
框架(framework)是一个框子--指其约束性,也是一个架子--指其支撑性.是一个基本概念上的结构,用于去解决或者处理复杂的问题. Web前端教程 框架这个广泛的定义使用的十分流行,尤其在软件概念 ...
最新文章
- 构建node.js基础镜像_在Android上构建Node.js应用程序
- 2 构建Mysql+heartbeat+DRBD+LVS集群应用系统系列之MySql的搭建
- head在c语言中的作用,阅读以下说明和C语言函数,将应填入(n)处的字句写在对应栏内。【说明】 函数sort (NODE *head)的功能 - 赏学吧...
- Erlang(起个中文名:易浪)不能错过的盛宴
- oracle初始安装大小
- 为什么我的vc6.0建立工程时显示不能访问类查文件类信息,类查看信息不可用
- php循环输出url,PHP 输出URL的快捷方式的实现方法
- ORM组件XCode(十八般武艺)
- 3006基于二叉链表的二叉树最长路径的求解(附思路)
- 依赖注入框架 wire
- vs添加系统环境变量不识别_项目经验不重样!3个基于SpringBoot 的图片识别处理系统送给你...
- cron风格定时器_QuartzCron表达式在线生成-在线QuartzCron定时器表达式生成工具
- ionic 插件安装
- b-spline学习-系数计算及程序实践
- 使用ESP8266和MPU6050制作倾斜角度监控器
- 利用机器学习进行恶意代码分类
- iOS企业应用分发平台搭建(uniapp打包)
- 什么是计算机网络 它有哪些主要功能,什么是计算机网络及主要功能有哪些?...
- 使用Maya的XGen快速头发建模
- 快速搭建自己的 KMS 服务器
热门文章
- 译林 五年级上 单词_牛津译林版九年级英语上Unit1单元重点单词、词组和句型总结...
- KubeEdge 1.1 部署
- 【Elasticsearch】十九种Elasticsearch字符串搜索方式
- 【Elasticsearch】es 集群健康值 红色 red 分片 未分配
- IDEA : 配置checkstyle
- assertion failed:concurrent update to the log .mutiple streaming jobs delete 4
- Doker : Docker 容器与宿主机共享文件
- 【MySQL】Java.sql.SQLException Incorrect string value: \xF0\x9F\x98\x8D\xE8\xBE...
- Spring : Spring @Transactional-嵌套事物处理
- 学Mysql怎样快速入门?