javascript——事件处理

<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>

时间: 2024-10-11 04:58:34

javascript——事件处理的相关文章

javascript事件处理

<!DOCTYPE html> <html> <head> <title>javascript事件处理</title> <meta charset="UTF-8"> <script type="text/javascript"> function clickD(obj){ alert(obj.innerHTML); } function moveD(obj){ //设置这个对象的颜色

使用AmplifyJS和JQuery编写更好更优雅的javascript事件处理代码

事件(或消息)是一种常用的软件设计模式,能够降低消息处理者和消息发布者的之间的耦合,比如J2EE里面的JMS规范.设计模式中的观察者模式(也叫发布/订阅模式),这对于javascript代码同样适用.之前写的JQuery相关博客中,详细介绍了JQuery的事件处理机制和特性,具体可以参考这个目录下的文章. JQuery事件处理其实就是使用了发布/订阅模式,包括它提供的命名空间机制.自定义事件都非常的棒,但是JQuery事件处理有一个缺陷:JQuery事件都是和DOM元素相关的,但是很多时候我们并

JavaScript事件处理的三种方式(转)

一.什么是JavaScript事件? 事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是Web浏览器中发生的事情,比如说某个Web页面加载完成,或者是用户滚动窗口或改变窗口大小.说白了,事件是文档或浏览器中发生的特定交互瞬间! 通过使用JavaScript,你可以监听特定事件的发生,并规定让某些事件发生以对这

javascript事件处理解析

一.什么是事件!(w3c解释) 事件是可以被 JavaScript 侦测到的行为. JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件.比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数.事件在 HTML 页面中定义. 二.事件的级别 在工作中我们书写js代码的时候的会有两种书写js的习惯:如下所示: //第一种书写方式 var btn3 = do

javascript 事件处理

[写在前面]最近一直在看js的基础,毕竟jquery虽然好用,总归是用着别人写的,只会用api不如搞清楚实现的原理.等把js基础巩固好了一定要去读jquery的源码. 事件流 事件流描述的是从页面中接收事件的顺序.js中有两种事件流,冒泡流和捕获流.两种流的名称都很形象,在由节点构成的一颗html树上面,冒泡流指事件开始时候由最具体的元素最先接收,然后逐级传播到最不具体的节点,比如在如下文档中: <!doctype html> <html> <head></hea

JavaScript事件处理函数

onAbort :终止了图片加载 onBlur:用户移除了某表单元素 onChange:用户修改了表单元素的值 onClick:用户单击了类似按钮的表单元素 onError:程序在加载图片的时候出现错误 onFocus:用户激活了某表单元素 onLoad:页面加载完毕 onMouseOut:鼠标从某对象上移除 onMouseOver:鼠标移动到某对象上 onSubmit:用户提交表单 onUnload:用户离开了窗口或框架页

Javascript重要知识点梳理

Javascript重要知识点梳理 说明 Javascript流程控制 js中常用的数据类型 var关键字的使用 if – else if – else switch while for Javascript常用函数 1.  字符串函数 substring indexOf lastIndexOf charAt replace split toLowerCase toUpperCase 2.  数学运算函数 3.  数据类型转换函数 parseInt parseFloat Math.abs Mat

通过 File API 使用 JavaScript 读取文件

原文地址:http://www.html5rocks.com/zh/tutorials/file/dndfiles/ 简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式.为了举例说明其功能,可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览,或者允许应用程序在用户离线时保存文件引用.另外,您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配,或者限制上传内容的大小. 该规范通过“本地”文件系统提供了多种文件访

javascript在不同的浏览器处理事件

实现javascript事件处理兼容问题,例子如下,可以实现大部分浏览器处理事件的问题 var btn = document.getElementById("btn"); if(btn.addEventListener){ btn.addEventListener("click",demo,false); //DOM2事件处理 }else if(btn.attachEvent){ btn.attachEvent("onclick",demo) /