Javascript中的事件二
<!------------------示例代码一--------------------->
<!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中的事件二的更多相关文章
- 了解javascript中的事件（二）
本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
- JavaScript中的事件循环机制跟函数柯里化
一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...
- Javascript中常用事件集合和事件使用方法
Javascript中常用事件集合和事件使用方法 一.事件绑定 格式: 事件源 . on事件类型=事件处理函数 事件绑定三要素 1.事件源:和谁绑定 2.事件类型:什么事件 3.事件处理函数:触发了要 ...
- javascript 中的事件机制
1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- javascript中onclick事件能调用多个方法吗
Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了
随机推荐
- busybox中memdev的使用方法
busybox中已经集成了devmem工具,你可以配置busybox即可. 在busybox的杂项中找到: CONFIG_USER_BUSYBOX_DEVMEM: devmem is a small ...
- /proc/sys/net/ipv4/ip_conntrack_max
Things to know (best practices and “issues”) READ IT !!! — uWSGI 2.0 documentationhttps://uwsgi-docs ...
- ASP.NET MVC 3 Razor 多国语言参考解决方案
http://www.cnblogs.com/think8848/archive/2011/03/20/1989376.html
- JavaScript：undefined!=false之解 及==比较的规则
JS中有一个基本概念就是: JavaScript中undefined==null 但undefined!==null undefined与null转换成布尔值都是false 如果按照常规想法,比如下面 ...
- 多个celery如何使用同一个redis做为broker？
曾经有个哥们提了一个这方面的requests,但是最终没有合入的celery中去,所以目前celery没有这个功能,祥见: https://github.com/celery/kombu/pull/9 ...
- linux如何添加服务为系统服务快速启动或关闭
当在linux系统安装了一些服务比如apache,mysql,iptables等等后想快速启动或者重启 但是在使用系统启动或者关闭服务时候发现输入指令 >service httpd restar ...
- NDK学习笔记-多线程与生产消费模式
在做NDK开发的时候,很多情况下都是需要使用多线程的,一方面是提高程序运行效率,另一方面就是防止主线程阻塞 C的多线程 在C语言里,可以通过对于POSIX标准的运用,使得C语言执行多线程 提高程序的执 ...
- 三角箭头 css实现
效果图: 1.html 代码 <div>较昨日 <span class="dot-up"></span> 20%</div> < ...
- Reactor系列(七)flatMap映射
#java##reactor##flatMap# 视频讲解: https://www.bilibili.com/video/av79582009/ FluxMonoTestCase.java pack ...
- WebSocket的简单概念
本文为简单入门,主要介绍了什么是WebSocket以及其优点. 一.什么是WebSocket WebSocket的出现使得浏览器具备了实时双向通讯的能力.WebSocket是HTML5开始提供的一种浏 ...