Javascript之事件处理
来源:互联网 发布:淘宝网商家入驻费用 编辑:程序博客网 时间:2024/05/21 07:58
1.HTML事件处理
直接添加到HTML结构中
缺点:修改一处同时需要修改两处 函数的名称如果被修改,html中的onclick事件也要修改。
如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<div id="div">
<button id="btn" onclick="demo()">按钮</button>
</div>
<script>
function demo () {
alert("Hello html事件处理");
}
</script>
</body>
</html>
2.DOM 0级事件处理
把一个函数值赋给一个时间处理程序属性
优点:不需要修改HTML中的button 只需修改一处
缺点:如果有多个事件 会被覆盖掉 只会显示最后一个事件
如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn");
btn1.onclick=function () {
alert("dom0级事件处理程序1");
}
btn1.onclick=function () {
alert("dom0级事件处理程序2"); //会覆盖掉dom 事件处理程序1
}
// btn1.onclick=null; //清楚当前事件
</script>
</body>
</html>
3.DOM 2级事件处理
优点:不会被覆盖掉 使用起来很方便 符合用户的使用心得
addEventListener(“事件名”,“事件处理函数”,“布尔值”);
true:事件捕获
false:事件冒泡
remove EventListener(); //移除事件
如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn")
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
btn1.addEventListener("click",demo3);
function demo1() {
alert("DOM 2级事件处理程序1");
}
function demo2() {
alert("DOM 2级事件处理程序2");
}
function demo3() {
alert("DOM 2级事件处理程序3");
}
btn1.removeEventListener("click",demo2);
//移除demo2;
</script>
</body>
</html>
4.IE事件处理程序(使用方法和参数和addEventListener一样)
attachEvent
detachEvent(移除事件)
如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
</head>
<body>
<div id="div">
<button id="btn">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn")
if (btn1.addEventListener) {
btn1.addEventListener("click",demo);
}else if (btn1.attachEvent){
btn1.attachEvent("onclick","demo");
}else{
btn1.onclick=demo();
//以前有些浏览器只能支持DOM 0级事件 所以这里添加一个DOM 0 级事件
}
function demo () {
alert("Hello");
}
</script>
</body>
</html>
- javascript之事件处理
- javascript之事件处理
- Javascript之事件处理
- JavaScript笔记之处理事件
- JavaScript 之事件处理详解
- JavaScript之事件处理详解
- JavaScript教程之事件处理
- JavaScript Event 事件处理机制之自定义事件处理方法
- JavaScript之事件流与事件处理程序(事件)
- JavaScript 参考教程 之四:事件处理
- JavaScript之事件处理(监听)函数
- javascript事件处理方式之捕获冒泡
- javascript入门篇之事件处理
- JavaScript学习笔记之事件处理机制
- JavaScript之事件处理(监听)函数
- JavaScript之事件处理(监听)函数
- JavaScript中处理事件之单击事件onClick
- javascript 事件和事件处理
- Android中的ANR异常
- HTTP Session
- UIScrollView
- 【JavaWeb】 JavaBean使用方法
- app 图标大小,尺寸设置
- Javascript之事件处理
- VC++6.0和Codeblocks 真的是有很大区别的<1272 浙江中医药大学>
- eclipse修改web项目名称
- Java正则表达式入门
- MySQL优化大全
- UITableView索引
- 安卓 Toolbar
- 分治算法之数字旋转方阵问题
- 有线路由器加无线路由器的组网方法