首页 >web前端 >js教程 > 正文

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

原创2021-10-08 15:30:310621

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

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:javascript 事件处理
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    javascript中如何定义一个函数515
    javascript是啥语言711
    node.js和javascript有什么区别438
    推荐视频教程
  • JavaScript标准参考手册JavaScript标准参考手册
  • JavaScript极速入门JavaScript极速入门
  • JavaScript函数与闭包JavaScript函数与闭包
  • JavaScript对象与常用设计模式JavaScript对象与常用设计模式
  • JavaScript正则表达式基础与实战JavaScript正则表达式基础与实战
  • 视频教程分类