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

2021-10-09,

javascript事件处理的方法有:1、在标签的事件属性中添加事件,语法“<标签名 事件属性名="事件处理程序">”;2、使用事件源的事件属性绑定事件处理函数,语法“事件源对象.on事件名 = 事件处理函数”。

/2021/10/a45e1ae9.jpg

本教程操作环境: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>

/2021/10/d016c194.png" /2021/10/d016c194.png" alt="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中事件处理的方法有哪些的详细内容,更多请关注北冥有鱼其它相关文章!

本文转载自【PHP中文网】,希望能给您带来帮助,苟日新、日日新、又日新,生命不息,学习不止。

《javascript中事件处理的方法有哪些.doc》

下载本文的Word格式文档,以方便收藏与打印。