这篇文章主要介绍了javascript中有哪些事件处理方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
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中有哪些事件处理方法”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!