文章目录

  • ​​1.绑定事件​​
  • ​​1）原生函数；​​
  • ​​2）自定义函数。​​
  • ​​第一种方式​​
  • ​​第二种方式​​
  • ​​2.绑定事件监听函数​​
  • ​​3.事件流模型​​
  • ​​1.事件捕捉​​
  • ​​2.事件冒泡​​
  • ​​3.Dom标准的事件模型​​
  • ​​event.stopPropagation();的方式来阻止事件冒泡。​​

1.绑定事件

静态绑定事件有两种方式：

1）原生函数；

​​<input type="button" value="确定" onclick="alert('早上好！')"/>​​

2）自定义函数。

第一种方式

​​<input type="button" value="确定" onclick="函数名"/>​​

自定义函数格式就如上述代码所示，想象一下将上述函数代码用原生函数方式绑定，你就会发现自定义函数的好处。自定义函数将alert事件封装在函数（）方法中，减少了代码的耦合性，便于修改。

第二种方式

使用window.οnlοad=function(){
document.getElementById(“ID名字”).οnclick=function(
函数体；
){};

//写一个相同的会被覆盖
document.getElementById(“ID名字”).οnclick=function(
函数体；
){};

};

2.绑定事件监听函数

JavaScript-DOM（文档对象模型）-2_javascript

值得注意的是：上图中的​​eventName​​，即事件名称，并没有on，例如鼠标单击事件click ，鼠标双击事件doubleclick ，鼠标移入事件mouseover，鼠标移出事件mouseout等。
同时绑定事件监听函数时，代码与动态绑定一样，都需要在控件加载完成后才可进行绑定。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>绑定事件监听函数</title>
    <script type="text/javascript">
      window.onload = function() {
        var btn = document.getElementById("btn");
        function myclick1() {
          alert("早上好");
        }

        function myclick2() {
          alert("晚上好");
        }
        btn.addEventListener("click",myclick1,false);
                btn.addEventListener("click",myclick2,false);
      };
    </script>
  </head>
  <body>
    <input id="btn"type="button"value="确定"/>
  </body>
</html>

3.事件流模型

1.事件捕捉

JavaScript-DOM（文档对象模型）-2_js_02

2.事件冒泡

JavaScript-DOM（文档对象模型）-2_javascript_03

3.Dom标准的事件模型

JavaScript-DOM（文档对象模型）-2_js_04

event.stopPropagation();的方式来阻止事件冒泡。