javascript中事件处理的方法有哪些
程序员文章站
2022-04-04 22:19:32
...
javascript中事件处理的方法有：1、在标签的事件属性中添加事件，语法“<标签名 事件属性名="事件处理程序">”；2、使用事件源的事件属性绑定事件处理函数，语法“事件源对象.on事件名 = 事件处理函数”。
本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。
javascript事件处理的方法
方法1、在标签的事件属性中添加事件
使用HTML标签的事件属性绑定处理程序。需要注意的是，使用 HTML 标签的事件属性绑定事件处理程序的方式时，事件属性中的脚本代码不能包含函数声明，但可以是函数调用或一系列使用分号分隔的脚本代码。
示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function printName(){
var name = "张三";
alert(name);
}
</script>
</head>
<body>
<input type="button" onClick="printName()" value="事件绑定测试"/>
</body>
</html>
方法2、使用事件源的事件属性绑定处理程序
使 HTML 和 JS 分离的其中一种方式是通过使用事件源的事件属性绑定事件处理函数，绑定格式如下：
obj.on事件名 = 事件处理函数
格式中的 obj 为事件源对象。绑定的事件程序通常为一个匿名函数的定义语句，或者是一个函数名称。
事件源的事件属性绑定处理程序示例：
oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
alert('hi')
};
示例：使用事件源的事件属性绑定事件处理函数。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload = function(){//窗口加载事件绑定了一个匿名函数
//定义一个名为fn的函数
function fn(){
alert('hello');
}
//获取事件源对象
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
//绑定一个匿名函数
oBtn1.onclick = function(){
alert("hi");
}
//绑定一个函数名
oBtn2.onclick = fn;
};
</script>
</head>
<body>
<input type="button" id="btn1" value="绑定一个匿名函数">
<input type="button" id="btn2" value="绑定一个函数名">
</body>
</html>
【推荐学习：javascript高级教程】
以上就是javascript中事件处理的方法有哪些的详细内容，更多请关注其它相关文章！
上一篇： 小编带你学命名空间的调用顺序