<!------------------示例代码一--------------------->
<!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. [java]借助java.io.File类，完成文件批量改名

    列出某目录下的所有文件,将文件改名,借助java.io.File一个类就可以完成.大家可以发现,代码中的具体方法都是File一个类的. 另外要注意的是,File的全路径名,路径是一致的,父路径其实是文 ...

  2. 如何在linux用户空间程序中打印时间戳？

    1. 使用clock_gettime接口即可 2. clock_gettime的使用方法: 2.1 定义一个结构体 struct timespec ts; 2.2 调用clock_gettime获取当 ...

  3. LC 955. Delete Columns to Make Sorted II

    We are given an array A of N lowercase letter strings, all of the same length. Now, we may choose an ...

  4. mac下更新node版本

    node有一个专门管理node.js版本的包叫作:n: 查看当前 node版本:node -v 安装n工具包:sudo npm i -g n 安装最新版node.js:sudo n stable 安装 ...

  5. java引用如果是成员变量则引用本身不保存在栈上的汇编级调试证明

    很久很久没有更新博客了,因为发生太多太多猝不及防的事情,再加上自己本身也特别忙,这里补上一直想发的自己觉得很有意义的一次探索过程. 就是很多java开发人员都曾被误导的一个点——“如果一个变量是引用, ...

  6. Ubuntu 18.04设置1920*1080

    Ubuntu升级后,发现分辨率没有1920*1080,在网上寻找了一个文章解决办法如下. 方案一(临时性,重启会失效): 1.打开终端.输入:cvt 1920 1080 出现有modeline 的提示 ...

  7. 2019Java常见面试下

    1.集合的作用是什么? 数据的传送增.删.改.查.constainsAll,可以存放不同类型的对象. 2.集合的通用方法有那些?通用方法是什么?(操作) 集合List的遍历方法有: Iterator: ...

  8. Adobe Acrobat 如何通过书签制作多级目录

    废话不多说,直接上官方文档 看不清可 右击 > 在新标签页中打开图片

  9. OpenCV.用户选择

    1.Pdf.P153(书.P122) 2. // 来自:"Creating a video with OpenCV — OpenCV 2.4.13.7 documentation.html& ...

  10. js的new Date兼容iOS和Android

    在写一个移动端的报名活动页面时,其中一个逻辑是:过了报名日期,“立即报名”按钮置灰,不允许报名:具体逻辑如下,在真机上测试的时候,Android端可以把按钮失效,iOS则是无法把按钮失效.后台返回的时 ...