一. `HTML`事件处理程序

每一个HTML标签所支持的每种事件，都可以使用与事件处理程序同名的属性来指定。这个属性的属性值是可以执行的js代码。

可以把代码直接写到onclick属性的值中:

<!-- 当点击button按钮时候，就会执行onclick属性值中的JavaScript的代码 -->
<button onclick="alert('hello world')">点我可以给整个世界问好</button>

更建议把代码封装在一个函数中，然后在onclick的属性值中调用封装的函数：

<!--注意：在onclick的属性中调用方法的时候，一定要添加( ),表示调用方法-->
<button onclick="showMsg();">点我可以给整个世界问好</button>
    <script type="text/javascript">
        function showMsg () {
            alert("hello world");
        }
    </script>
</body>

在HTML中指定事件处理程序有两个缺点:

存在时差问题，比如函数定义在文档尾部，在未解析函数之前就点击了按钮，则会出现错误
HTML代码和JavaScript代码紧密耦合，如果要更换事件的处理程序，要同时改动html代码和js代码

这正是许多开发人员摒弃 HTML 事件处理程序，转而使用 JavaScript 指定事件处理程序的原因所在。

二. `DOM0` 级别事件处理程序

为了遵循HTML 与JavaScript代码层次分离的原则，我们可以在JavaScript 中处理事件。这种处理方式也称为 脚本模型。

所谓的DOM0级事件处理程序就是将一个函数赋值给事件处理程序。

这时事件处理程序可以看成是元素对象的方法，事件处理程序就是在元素的作用域中运行。(this就指代这个元素对象)

优点：写法简单，跨浏览器

匿名函数的写法。

 <body>
     <button id="btn">点我可以给整个世界问好</button>
     <script type="text/javascript">
         // 匿名函数的写法
         document.getElementById("btn").onclick = function () {
             alert("世界你好");
         }
     </script>
 </body>

通过方法名给事件属性赋值。

 <body>
     <button id="btn">点我可以给整个世界问好</button>
     <script type="text/javascript">
         //通过方法名赋值.  注意此处不能添加括号：因为方法的调用是在将来点击的时候，而不是现在
         document.getElementById("btn").onclick = showMsg;
         function showMsg () {
             alert("世界你再好");
         }
     </script>
 </body>

2.1 删除事件处理程序

如果想让事件以后不再执行，则可以删除事件处理程序。

ocument.getElementById(id).onclick = null; 使用这种方法可以删除HTML事件和DOM0事件。

<body>
    <button id="btn" onclick="alert('你好世界')">点我可以给整个世界问好</button>
    <script type="text/javascript">
        document.getElementById("btn").onclick = null;
    </script>
</body>

2.事件处理程序

一. `HTML`事件处理程序

二. `DOM0` 级别事件处理程序

2.1 删除事件处理程序

results matching ""

No results matching ""

一. HTML事件处理程序

二. DOM0 级别事件处理程序

2.1 删除事件处理程序

results matching ""

No results matching ""

一. `HTML`事件处理程序

二. `DOM0` 级别事件处理程序