事件处理 - 添加事件

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实现 - 事件类方法相关推荐

  1. jQuery动态绑定事件或者原生js动态绑定事件

    说一个这周写前后端交互时遇到的一个印象深刻的问题--动态绑定事件. 一.jQuery 一般我们给节点绑定事件使用的都是这样的形式 $("#btns").click(function ...

  2. 函数、原生JS的事件相关(上)

    @关于函数和原生JS的一些事件相关知识点 函数的返回值 所有的函数都会有返回值,一般函数的返回值默认是undefined 函数内使用return来自定义返回值,但是注意return语句之后的代码全部都 ...

  3. 原生js绑定事件的方法和dom操作

    1.行内绑定:在标签上写οnclick="事件名" <button onclick="handleClick">Click Me</butto ...

  4. 原生js绑定事件的三种方法

    // 绑定事件// 行内绑定// 选择元素绑定事件// 事件监听 有三个参数('什么事件','函数','true或false')true(事件捕获) false(事件冒泡)document.query ...

  5. 【JavaScript】原生js阻止事件的三种方式

    三种阻止事件执行的方式 event.preventDefault() event.stopPropagation() return false 1.event.preventDefault() 阻止特 ...

  6. 在原生js中的事件监听方法

    一.传统事件绑定方法 我们在学习的时候,最初接触的事件绑定方式大多是传统事件绑定方法.传统事件绑定方法事例如下: window.οnlοad=function(){alert("页面已加载& ...

  7. 原生js循环展示dom_【前端面试】用一道题讲 js 的事件循环队列

    昨天去面了滴滴,一口气面了三面,考了 promise 和事件循环.之前的猿辅导也考察了这些,几乎所有的大厂中厂都一定会考原生 js 的事件循环队列. 今天,我把昨天考察的原题拿出来分析一下. setT ...

  8. 原生js 给动态添加的元素添加(事件监听器)

    原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...

  9. 原生js循环展示dom_web前端教程:JS高阶编程技巧-惰性函数

    框架(framework)是一个框子--指其约束性,也是一个架子--指其支撑性.是一个基本概念上的结构,用于去解决或者处理复杂的问题. Web前端教程 框架这个广泛的定义使用的十分流行,尤其在软件概念 ...

最新文章

  1. 构建node.js基础镜像_在Android上构建Node.js应用程序
  2. 2 构建Mysql+heartbeat+DRBD+LVS集群应用系统系列之MySql的搭建
  3. head在c语言中的作用,阅读以下说明和C语言函数,将应填入(n)处的字句写在对应栏内。【说明】 函数sort (NODE *head)的功能 - 赏学吧...
  4. Erlang(起个中文名:易浪)不能错过的盛宴
  5. oracle初始安装大小
  6. 为什么我的vc6.0建立工程时显示不能访问类查文件类信息,类查看信息不可用
  7. php循环输出url,PHP 输出URL的快捷方式的实现方法
  8. ORM组件XCode(十八般武艺)
  9. 3006基于二叉链表的二叉树最长路径的求解(附思路)
  10. 依赖注入框架 wire
  11. vs添加系统环境变量不识别_项目经验不重样!3个基于SpringBoot 的图片识别处理系统送给你...
  12. cron风格定时器_QuartzCron表达式在线生成-在线QuartzCron定时器表达式生成工具
  13. ionic 插件安装
  14. b-spline学习-系数计算及程序实践
  15. 使用ESP8266和MPU6050制作倾斜角度监控器
  16. 利用机器学习进行恶意代码分类
  17. iOS企业应用分发平台搭建(uniapp打包)
  18. 什么是计算机网络 它有哪些主要功能,什么是计算机网络及主要功能有哪些?...
  19. 使用Maya的XGen快速头发建模
  20. 快速搭建自己的 KMS 服务器

热门文章

  1. 译林 五年级上 单词_牛津译林版九年级英语上Unit1单元重点单词、词组和句型总结...
  2. KubeEdge 1.1 部署
  3. 【Elasticsearch】十九种Elasticsearch字符串搜索方式
  4. 【Elasticsearch】es 集群健康值 红色 red 分片 未分配
  5. IDEA : 配置checkstyle
  6. assertion failed:concurrent update to the log .mutiple streaming jobs delete 4
  7. Doker : Docker 容器与宿主机共享文件
  8. 【MySQL】Java.sql.SQLException Incorrect string value: \xF0\x9F\x98\x8D\xE8\xBE...
  9. Spring : Spring @Transactional-嵌套事物处理
  10. 学Mysql怎样快速入门?