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>

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变量访问,好在不会出现同时处理两个事件的情况。

(0)

相关推荐

  • 用JavaScript事件串连执行多个处理过程的方法

    最近用到JavaScript 事件处理机制,找了些资料. 以前写 JavaScript 程序时,事件都是采用  复制代码 代码如下: object.event = handler; 的方式初始化.这种方式对于 Internet Explorer.Mozilla/Firefox 和 Opera 来说很通用.但是有一个问题就是,这种方式只能一个事件对应一个事件处理过程.如果希望一个事件可以依次执行多个处理过程就不好用了. 但是 Internet Explorer 从 5.0 开始提供了一个 atta

  • javascript 事件处理程序介绍

    1.DOM0级事件处理程序 将一个函数值给一个事件处理程序属性. 例如: 复制代码 代码如下: var btn = document.getElementById("myBtn"); btn.onclick = funtion(){ alert(this.id); //"myBtn" } 删除事件,btn.onclick = null; -----------------------------------------------------------------

  • 浅谈Javascript事件处理程序的几种方式

    事件就是用户或浏览器自身执行的某种动作.比如说click,mouseover,都是事件的名字.而相应某个事件的函数就叫事件处理程序(或事件侦听器).为事件指定处理程序的方式有好几种. 一:HTML事件处理程序. 如: 复制代码 代码如下: <script type="text/javascript"> function show(){ alert('hello world!'); } </script> <input type="button&q

  • javascript 基础篇3 类,回调函数,内置对象,事件处理

    复制代码 代码如下: function 类名(参数表){ this.属性; ...... this.函数; } 这样,函数和数据成员都是用"this."来实现. 我们自己定义一个简单类student好了,然后再去构造它,并且实现一个输出函数. 复制代码 代码如下: <script LANGUAGE="JavaScript"> <!-- function student(a,b){ this.name = a; this.age=b; this.ou

  • javascript浏览器兼容教程之事件处理

    1. window.event [分析说明]先看一段代码 复制代码 代码如下: function et(){ alert(event);//IE: [object]} 以上代码在IE运行的结果是[object],而在Firefox无法运行. 因为在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口. [兼容处理]添加对event判断,根据浏览器的不同来得到正确的ev

  • JavaScript实现为指定对象添加多个事件处理程序的方法

    本文实例讲述了JavaScript实现为指定对象添加多个事件处理程序的方法.分享给大家供大家参考.具体如下: 如果你希望对象点击的时候同时处理多个事情,可以使用下面的代码 /* Start of the multihandle Object...*/ function MultiHandle(owner){ var my_handlers = new Array(); var my_owner = owner; this.append = function(handler){ my_handle

  • 浅谈 javascript 事件处理

    事件处理 一.事件源:任何一个HTML元素(节点),body.div.button 二.事件:你的操作 鼠标:     click    单击     dblick  双击     oncontextmenu 文本菜单 复制代码 代码如下: <body oncontextmenu="return false">//禁止右键的程序 mouseover 放上     mouseout 离开     mousedown 按下     mouseup  抬起     mousemo

  • javascript 事件处理示例分享

    废话少说,直接奉上示例代码: 复制代码 代码如下: <script type="text/javascript">     function EventUtil() {         var _self = this;         ///添加事件         var addEvent = (function () {             if (document.addEventListener) {                 return functi

  • javascript数据类型示例分享

    前面我们介绍了javascript的数据类型,今天我们通过一些例子再来温故一下,希望大家能够达到知新的地步. 复制代码 代码如下: <script type="text/javascript">         //1.Boolean 类型         //2.Number 类型         //3.String 类型         //Boolean类型容易与基本类型混淆,所以建议永远不要使用Boolean对象.         //Number是与数字对应的引

  • python使用PyV8执行javascript代码示例分享

    安装相应的库,我使用的是PyV8 需要注意的是里面写的function函数需要用()括起来 复制代码 代码如下: import PyV8 class Test(): def js(self): ctxt = PyV8.JSContext() ctxt.enter() func = ctxt.eval('''(function(){return '###'})''') print func() print '213' if __name__ == '__main__': crawler = Tes

  • javascript请求servlet实现ajax示例(分享)

    ajax请求是一种无刷新式的用户体验,可以发送GET和POST两种异步请求,现记录如下: GET请求: function sendRequestByGet(){ //定义异步请求对象 var xmlReq; //检测浏览器是否直接支持ajax if(window.XMLHttpRequest){//直接支持ajax xmlReq=new XMLHttpRequest(); }else{//不直接支持ajax xmlReq=new ActiveObject('Microsoft.XMLHTTP')

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

    最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,特此分享到我们平台供大家参考下! 一.什么是JavaScript事件? 事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是Web浏览器中发生的事情,比如说某个Web页面

  • 微信小程序 获取手机号 JavaScript解密示例代码详解

    当我们在开发微信小程序中,有一个常用的功能,就是获取用户的手机号,然后一键登入小程序,那么手机号如何获取呢?请认真看完本文,保证可以获取到用户的手机号. 刚开始开发微信小程序的时候,想着实现手机验证码登入,后来查阅资料得知,发给用户的短信是要自己付费的.后来想想,微信获取用户的手机号一样可以保证手机号码的真实性,因为手机号既然可以绑定微信,那么肯定是被严格核验过的,然后就开始了获取手机号之旅,网上教程有很多,但不知什么原因,都是会少一些内容,有的只有前端代码,没有后端:有的后端代码是PHP,不是

  • JavaScript作用域示例详解

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域示例详解的介绍,希望能帮助大家更好的学习JavaScript. 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 一.JavaScript中无块级作用域 在Java或C#中存在块级作用域

  • javascript时间差插件分享

    javascript时间差插件分享,供大家参考,具体内容如下 Html如下: <html> <head> <title></title> <script src="js/TimeDifference.js" type="text/javascript"></script> <script src="js/jquery-1.10.2-min.js" type="

  • adonet基础示例分享(adonet连接数据库)

    adonet基础示例分享 复制代码 代码如下: using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using Sys

  • 一个简单的JavaScript Map实例(分享)

    用js写了一个Map,带遍历功能,请大家点评下啦. //map.js Array.prototype.remove = function(s) { for (var i = 0; i < this.length; i++) { if (s == this[i]) this.splice(i, 1); } } /** * Simple Map * * * var m = new Map(); * m.put('key','value'); * ... * var s = ""; *

随机推荐