<!------------------示例代码一--------------------->
<!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. C 习题

    1,日本某地发生命案,警察通过排查确定4个人中一个人为凶手,一下为4个人的供词, A:不是我 B:是C C:是D D:C说谎 解决方式: #include<stdio.h> int mai ...

  2. P2328 [SCOI2005]超级格雷码

    P2328 [SCOI2005]超级格雷码 暴力出奇迹喵! 这是一道模拟题 你会发现和 P5657 格雷码[民间数据]有异曲同工之妙,这道题直接按照上边链接题目的操作步骤 暴力模拟 就可以啊 我们观察 ...

  3. SQL-W3School-高级：SQL FULL JOIN 关键字

    ylbtech-SQL-W3School-高级:SQL FULL JOIN 关键字 1.返回顶部 1. SQL FULL JOIN 关键字 只要其中某个表存在匹配,FULL JOIN 关键字就会返回行 ...

  4. Android 屏幕适配之dimens适配

    Android 屏幕适配之dimens适配     转  https://blog.csdn.net/github_2011/article/details/72636851 在过去多个项目中一直使用 ...

  5. 设置Win10默认启动的Linux子系统版本，启动指定Linux发行版

    设置Win10默认启动的Linux子系统版本,启动指定Linux发行版   MS酋长一年前已经与大家分享了启用“适用于Linux的Windows子系统(WSL)”的方法,但当时所能安装的只有由Cano ...

  6. php操作成功返回当前页并刷新

    echo "<script>alert('操作成功');location.href='".$_SERVER["HTTP_REFERER"].&quo ...

  7. php文件断点上传

    前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...

  8. JAVA 基础编程练习题34 【程序 34 三个数排序】

    34 [程序 34 三个数排序] 题目:输入 3 个数 a,b,c,按大小顺序输出. 程序分析:利用指针方法. package cskaoyan; public class cskaoyan34 { ...

  9. JAVA 基础编程练习题19 【程序 19 打印菱形图案】

    19 [程序 19 打印菱形图案] 题目:打印出如下图案(菱形) *    ***  ************  *****    ***      * 程序分析:先把图形分成两部分来看待,前四行一个 ...

  10. xdebug调试的原理

    转自 https://segmentfault.com/a/1190000002528341 使用PhpStorm+xdebug单步调试程序可以快速帮助自己熟悉项目代码! 运行原理 在实际使用前,我们 ...