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 相关文章推荐
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
Element Popover 弹出框的使用示例
Jul 26 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来处理多个提交任务
2006/10/09 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
js 验证密码强弱的小例子
2013/03/21 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
完善的jquery处理机制
2016/02/21 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
Python程序设计入门(5)类的使用简介
2014/06/16 Python
python3中的md5加密实例
2018/05/29 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
Java面试题汇总
2015/12/06 面试题
班级光棍节联谊会策划书
2014/10/10 职场文书
个人批评与自我批评
2014/10/15 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
入党积极分子考察意见
2015/06/02 职场文书
小学语文教学随笔
2015/08/14 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers