前端教程_javascript中事件处理的方法有哪些

 所属分类:web前端开发

 浏览:141次-  评论: 0次-  更新时间:2022-06-10
描述:这是一篇前端教程_javascript中事件处理的方法有哪些的说明内容,如果你想学习查找类似的文章,可以进入web前端开发获得最新优质资料。 jav...
这是一篇前端教程_javascript中事件处理的方法有哪些的说明内容,如果你想学习查找类似的文章,可以进入web前端开发获得最新优质资料。

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>

1.png

方法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中事件处理的方法有哪些的详细内容,更多请关注zzsucai.com其它相关文章!

 标签:
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!