<!------------------示例代码一--------------------->
<!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. vue实现全选框效果

    vue实现全选框效果 一.总结 一句话总结: 全选的checkbox点击的时候判断这个checkbox的状态,如果没选中,说明下一个操作是选中所有 下面的每个checkbox判断一下是否所有的chec ...

  2. arcgis python 标注

    import arcpy mxd = arcpy.mapping.MapDocument("current") lyr = arcpy.mapping.ListLayers(mxd ...

  3. 使用vagrant一键部署本地php开发环境（一）

    一:我们为什么需要用这玩意 我们在开发中经常会面临的问题:环境不一致,有人用Mac有人用Windos还有几个用linux的,而我们的服务器都是linux.    在我本地是可以的啊,我测了都,没有问题 ...

  4. shell 變數

    echo $? 上个命令的退出状态,或函数的返回值. ref: http://c.biancheng.net/cpp/view/2739.html

  5. pymysql检查是否断开, 断开重连

    python mysql使用持久链接 python链接mysql中没有长链接的概念,但我们可以利用mysql的ping机制,来实现长链接功能~ 思路: 1 python mysql 的cping 函数 ...

  6. Qt编写安防视频监控系统10-视频轮询

    一.前言 视频轮询在视频监控系统中是一个基础的核心功能,尤其是上了大屏以后,这个功能是必须的,根据预先设定的轮询间隔逐个加载视频到预先设定的通道画面数中,轮询间隔.轮询画面数.轮询采用的码流类型(主码 ...

  7. BigDecimal数据的加 减 乘 除 N次幂运算 以及比较大小

    在实际开开发过程中BigDecimal是一个经常用到的类: 它可以进行大数值的精确却运算,下面介绍一下它的加-减-乘-除以及N次幂的操作操作 import java.math.BigDecimal; ...

  8. Node.js使用Express实现Get和Post请求

    var express = require('express'); var app = express(); // 主页输出 "Hello World" app.get('/', ...

  9. [System.Serializable]，

    [System.Serializable]添加在类,枚举,结构前面,可以让该这些对象在inspector中显示 [SerializeField]是设置非public 成员对象在inspector中显示

  10. Flutter打包release版本安卓apk包真机安装无法请求网络的解决方法

    今天flutter build apk打包了一个release.apk包,在真机上安装后网络数据都不显示,但是在模拟器上没问题,然后又连接真机开debug各种测试,一切都正常!那这会是什么问题呢? 查 ...