javascript 事件处理示例分享


Posted in Javascript onDecember 31, 2014

废话少说,直接奉上示例代码:

<script type="text/javascript">

    function EventUtil() {

        var _self = this;

        ///添加事件

        var addEvent = (function () {

            if (document.addEventListener) {

                return function (el, type, fn) {

                    el.addEventListener(type, fn, false);

                }

            } else {

                return function (el, type, fn) {

                    el.attachEvent("on" + type, function () {

                        return fn.call(el, window.event);

                    });

                }

            }

        })();

        ///添加属性改变事件

        var addPropertyChangeEvent = function (obj, fn) {

            if (window.ActiveXObject) {

                obj.onpropertychange = fn;

            } else {

                obj.addEventListener("input", fn, false);

            }

        }

        //移除事件

        var removeEvent = function (obj, type, fn) {

            if (obj.removeEventListener) {

                obj.removeEventListener(type, fn, false);

            } else if (obj.detachEvent) {

                obj.detachEvent("on" + type, obj["on" + type + fn]);

                obj["on" + type + fn] = null;

            }

        }

        //加载事件

        var loadEvent = function (fn) {

            var oldonload = window.onload;

            if (typeof oldonload != "function") {

                window.onload = fn;

            } else {

                window.onload = function () {

                    oldonload();

                    fn();

                }

            }

        }

        //阻止事件

        var stopEvent = function (e) {

            e = e || window.event;

            if (e.preventDefault) {

                e.preventDefault();

                e.stopPropagation();

            } else {

                e.returnValue = false;

                e.cancelBubble = true;

            }

        }

        //如果仅仅是阻止事件冒泡

        var stopPropagation = function (e) {

            e = e || window.event;

            if (!+"\v1") {

                e.cancelBubble = true;

            } else {

                e.stopPropagation();

            }

        }

        //取得事件源对象

        var getEvent1 = function (e) {

            e = e || window.event;

            var obj = e.srcElement ? e.srcElement : e.target;

            return obj;

        }

        //取得事件源对象

        var getEvent2 = function (e) {

            if (window.event) return window.event;

            var c = getEvent2.caller;

            while (c.caller) {

                c = c.caller;

            }

            return c.arguments[0];

        }

        //或者这个功能更强大

        var getEvent3 = function (e) {

            var e = e || window.event;

            if (!e) {

                var c = this.getEvent3.caller;

                while (c) {

                    e = c.arguments[0];

                    if (e && (Event == e.constructor || MouseEvent == e.constructor)) {

                        break;

                    }

                    c = c.caller;

                }

            }

            var target = e.srcElement ? e.srcElement : e.target,

                    currentN = target.nodeName.toLowerCase(),

                    parentN = target.parentNode.nodeName.toLowerCase(),

                    grandN = target.parentNode.parentNode.nodeName.toLowerCase();

            return [e, target, currentN, parentN, grandN];

        }
        _self.addEvent = addEvent;

        _self.addPropertyChangeEvent = addPropertyChangeEvent;

        _self.removeEvent = removeEvent;

        _self.loadEvent = loadEvent;

        _self.stopEvent = stopEvent;

        _self.stopPropagation = stopPropagation;

        _self.getEvent1 = getEvent1;

        _self.getEvent2 = getEvent2;

        _self.getEvent3 = getEvent3;

    }

    var eventUtil = new EventUtil();

    eventUtil.loadEvent(function () {

        eventUtil.addEvent(document, "click", function (e) {

            alert(eventUtil.getEvent3(e));

        });

        eventUtil.addPropertyChangeEvent(document,function(e){

            alert(eventUtil.getEvent3(e));

        });

    });

</script>

javascript事件处理分为三个阶段:捕获 - 处理 - 起泡。

以点击按钮为例:
捕获阶段:由外层到内层,首先调用给Window注册的click捕获阶段监听方法,然后document、body、一层层的父节点,一直到按钮本身。

处理阶段:调用按钮本身的click监听方法。

起泡阶段:从按钮开始,从内层到外层,依次调用各级父节点的起泡阶段监听方法,直到Window。

但是,对于IE8及更低版本IE,不支持捕获阶段,因此捕获阶段的事件监听目前尚不通用。

通常的事件处理方法形式为:

function eventHandler(e) {  

    e = e || window.event;  

    var target = e.target || e.srcElement;  

    ... ...  

      

} 

e为事件对象,当事件触发时,作为参数传进来,但对于IE8及更低版本IE不适用,只能通过全局的event变量访问,好在不会出现同时处理两个事件的情况。

Javascript 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
javascript实用方法总结
Feb 06 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
教你一步步实现一个简易promise
Nov 02 Javascript
JavaScript中的变量作用域介绍
Dec 31 #Javascript
JavaScript中的变量定义与储存介绍
Dec 31 #Javascript
JavaScript中的操作符==与===介绍
Dec 31 #Javascript
jQuery中[attribute]选择器用法实例
Dec 31 #Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 #Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 #Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 #Javascript
You might like
PHP 开源AJAX框架14种
2009/08/24 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
更改Python命令行交互提示符的方法
2015/01/14 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Python配置文件处理的方法教程
2019/08/29 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
使用python求解二次规划的问题
2020/02/29 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
电气专业推荐信范文
2013/11/18 职场文书
车贷收入证明范本
2014/01/09 职场文书
上课睡觉检讨书
2014/01/28 职场文书
学生安全教育材料
2014/02/14 职场文书
希特勒的演讲稿
2014/05/23 职场文书
改革共识倡议书
2014/08/29 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
颐和园导游词400字
2015/01/30 职场文书
大学毕业生个人总结
2015/02/28 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang