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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 通过 API 将Deepseek响应流式内容输出到前端