JS任务一：零基础JavaScript编码（一）

Lesson

Reference

Demo

Note

事件是什么？

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box. In this final article we will discuss some important concepts surrounding events, and look at how they work in browsers.

DOM是什么？

DOM（Document Object Model——文档对象模型）是HTML 文件或 XML 文件渲染和交互的API（应用程序的编程接口）。DOM 是文档载入到浏览器之后文档的模型，它用节点树的形式来表现文档，每个节点代表文档的构成部分（例如： element——页面元素、字符串或注释等等）。

DOM 是Web——互联网上使用最多的API之一，因为它允许运行在Web浏览器中的程序访问文件中的节点。节点可以被创建，移动或修改。事件监听器可以被添加到节点上，一旦监听的事件发生时，事件侦听器就会被触发。

DOM 并不是浏览器出现时就规范好了，它是浏览器在实现JavaScript时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在， W3C领导着 DOM 规范，DOM 工作组正在制订第四版的规范。

DOM绑定事件的方式

  • 传统绑定
    只会在事件冒泡中运行；
    一个元素一次只能绑定一个函数。

    1
    2
    3
    element.onclick = function(e){
        // ...
    };

  • W3C绑定
    最后一个参数决定是冒泡还是捕获：false (冒泡) 或 true (捕获)；
    可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件；
    IE不支持

    1
    2
    3
    element.addEventListener('click', function(e){
        // ...
    }, false);

  • IE绑定

    1
    2
    3
    element.attachEvent('onclick', function(){
        // ...
    });

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function() {
  /*    
  在注释下方写下代码
  给按钮button绑定一个点击事件
  在事件处理函数中
  获取aqi-input输入的值，并显示在aqi-display中
  */
  var display = document.getElementById('aqi-display');
  var input = document.getElementById('aqi-input');
  var btn = document.getElementById('button');
  btn.addEventListener('click', function(e){
    display.innerText = input.value;
  },false)

})();