<!------------------示例代码一--------------------->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        (function (win) {
            function $(id) {
                return document.getElementById(id);
            }

window.onload = function () {
                //addEventListener和attachEvent都能给同一个元素绑定多个相同的事件处理程序（如下面分别为按钮btnOK1和btnOK2绑定了多个click事件），
                //不同的是，addEventListener绑定的事件激发顺序是正序的，而attachEvent是倒序的。
                Bind($("btnOK1"), "click", function (event) {
                    alert("绑定事件1");
                    manageEvent(event);
                });
                Bind($("btnOK1"), "click", function (event) {
                    alert("绑定事件2");
                    manageEvent(event);
                });

Bind($("btnOK2"), "click", function (event) {
                    alert("绑定事件1");
                    manageEvent(event);
                });
                Bind($("btnOK2"), "click", function (event) {
                    alert("绑定事件2");
                    manageEvent(event);
                });

//为测试事件冒泡，为div绑定一个事件
                Bind($("divContainer"), "click", function () { alert("div单击事件"); });
            }

function Bind(target, eventName, fun) {
                if (target === undefined || target === null) return;
                if (target.addEventListener) {
                    target.addEventListener(eventName, fun, false);
                }
                else {
                    target.attachEvent("on" + eventName, fun);
                }
            }

/*****************
            *大多数浏览器中，事件冒泡可以通过事件对象的stopPropagation方法来停止，默认行为是通过preventDefault方法来阻止。
            *而对于IE浏览器，则是通过设置cancelBubble属性为true、设置returnValue属性为false来实现。
            *****************/
            function manageEvent(e) {
                //阻止事件冒泡
                if (e.stopPropagation) e.stopPropagation(); //标准模型（或针对IE9以上浏览器版本）
                else e.cancelBubble = true; //IE（或针对IE8以下版本）

//现在阻止任何默认动作
                if (e.preventDefault) e.preventDefault(); //标准模型
                else e.returnValue = false; //IE

}
        })(window);
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divContainer">
        <input type="text" id="txt1" />
        <input type="button" id="btnOK1" value="测试1" />
        <input type="button" id="btnOK2" value="测试2" />
    </div>
    </form>
</body>
</html>
<!------------------示例代码二--------------------->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function regEventHandler(node,event,handler) {
            if (node.addEventListener) {
                node.addEventListener(event, handler, false);
            }
            else {
                node.attachEvent("on" + event, handler);
            }
        }

window.onload = function () {
            regEventHandler(document.getElementById("txt1"), "keypress", function (event) {
                event = event || window.event;
                var code = event.keyCode || event.charCode;
                var target = event.target || event.srcElement;
                if (code) {
                    alert("您按下了" + String.fromCharCode(code) + "(" + code + ")键。\n触发此事件的元素是：" + target.nodeName);
                }
            });

regEventHandler(document.body, "mousedown", function (event) {
                event = event || window.event;
                var target = event.target || event.srcElement;
                if (target) {
                    alert("您在" + target.nodeName + "元素上点击了鼠标。");
                }
            })
        }

</script>
</head>
<body style="border:1px solid #999; height:1000px;">
    <form id="form1" runat="server">
    <div>
    <input type="text" id="txt1" style="width:200px;" />
    </div>
    </form>
</body>
</html>

Javascript中的事件二的更多相关文章

  1. 了解javascript中的事件（二）

    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...

  2. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  3. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  4. JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...

  5. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  6. Javascript中常用事件集合和事件使用方法

    Javascript中常用事件集合和事件使用方法 一.事件绑定 格式: 事件源 . on事件类型=事件处理函数 事件绑定三要素 1.事件源:和谁绑定 2.事件类型:什么事件 3.事件处理函数:触发了要 ...

  7. javascript 中的事件机制

    1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...

  8. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  9. javascript中onclick事件能调用多个方法吗

    Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了

随机推荐

  1. Mac下持续集成-Jenkins权限设置

    部署上后集成Jmeter玩了一晚上,后来发现账号登录不进去了,

  2. 分组背包---P1757 通天之分组背包

    P1757 通天之分组背包 题解 分组背包板子题 k组物品,每组之间相互矛盾,也就是一组里面只能选一个或者不选 分组背包其实和01背包差不多,就是多加一维枚举组数 f[k][j] 前k组中,体积不超过 ...

  3. 组件基础之动态tab组件

    <template> <div id="demo31"> <p>-----------------组件基础之动态tab组件一---------- ...

  4. git如何将一个远程仓库的某个分支拉取到当前分支？

    答: git pull <remote_repository_url> <branch_name> 例如: git clone https://github.com/lede- ...

  5. Swift 变量

    变量是一种使用方便的占位符,用于引用计算机内存地址. Swift 每个变量都指定了特定的类型,该类型决定了变量占用内存的大小,不同的数据类型也决定可存储值的范围. 包括整形Int.浮点数Double和 ...

  6. SqlServer视图介绍以及创建方式

    1.,视图的介绍: (ps:学sqlServer视图是在面试问到之后学的,答不上来太low了,然后就去各种搜索操作对视图也有了自己的理解) 其实视图就是一张表,是一张表中或者多张表中经过某种筛选后显示 ...

  7. setInterval、clearInterval的回调函数，实现函数间调用的先后顺序

    定义: var waitUnitil=function (untillCallBack, nextStepCallBack, count) { if (count == null) { count = ...

  8. Qt编写数据可视化大屏界面电子看板6-窗体打开关闭

    一.前言 二级窗体的打开与关闭,这个功能也很有必要,由于整个系统中各种模块数量窗体数量比较多,后期可能还会增加更多,在4K屏幕上可以显示很多的模块,但是有时候有些模块不想显示出来,就需要将该模块关闭掉 ...

  9. Java的三种工厂模式

    一.简单工厂模式 简单工厂的定义:提供一个创建对象实例的功能,而无须关心其具体实现.被创建实例的类型可以是接口.抽象类,也可以是具体的类 实现汽车接口 //产品接口 //汽车需要满足一定的标准 pub ...

  10. iptables之精髓（一）

    防火墙相关概念 从逻辑上讲.防火墙可以大体分为主机防火墙和网络防火墙. 主机防火墙:针对于单个主机进行防护. 网络防火墙:往往处于网络入口或边缘,针对于网络入口进行防护,服务于防火墙背后的本地局域网. ...