首页 >web前端 >js教程 >javascript中事件处理的方法有哪些

javascript中事件处理的方法有哪些

青灯夜游原创: 2021-10-08 15:30:313860浏览

javascript中事件处理的方法有：1、在标签的事件属性中添加事件，语法“e15ca42d8fb0863f57fbad923ca065c0”；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(&#39;hi&#39;)
};

示例：使用事件源的事件属性绑定事件处理函数。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
     window.onload = function(){//窗口加载事件绑定了一个匿名函数
          //定义一个名为fn的函数
          function fn(){
               alert(&#39;hello&#39;);
          }
          //获取事件源对象
          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中事件处理的方法有哪些的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：浅析什么是CommonJs和Es Module？有什么区别？下一篇：JavaScript怎么修改div文本

查看更多