Java Script 之 addEventListener

addEventListener ，字面上理解就是，给事件添加一个监听器，为什么这样做？就是想让这个事件发生时，我们能及时的知道，同时伴随着干一些其他的事。

先给个题目：我们再屏幕上给出一个按钮，我们希望当用户移动鼠标，光标碰到按钮时，屏幕上自动显示，"鼠标经过!"，鼠标点击，屏幕接着显示"鼠标点击!"，光标离开时，屏幕上接着"鼠标离开!"。

仔细一想，这就是事件监听器 (EventListener) 最佳发挥的地方。

直接给出代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction()
{
document.getElementById("demo").innerHTML += "鼠标经过!<br>"
}
function mySecondFunction()
{
document.getElementById("demo").innerHTML += "点击!<br>"
}
function myThirdFunction()
{
document.getElementById("demo").innerHTML += "鼠标离开!<br>"
}
</script>

</body>
</html>

点击这里运行！

分析:

基本语法是：

element.addEventListener(event, function, useCapture)

event: 事件，例如上面的 mouseout 就是鼠标移出，这是需要记住的.

function: 触发函数，就是这个事件发生后，我们做出什么响应。 (上面的响应是，在一个p标签中不断添加提示语)

***************************************************************************************************************************************************

现在根据廖雪峰老师的js课程，提供一个添加图片文件并且预览的程序实例:

 1 var
 2     fileInput = document.getElementById('test-image-file'),
 3     info = document.getElementById('test-file-info'),
 4     preview = document.getElementById('test-image-preview');
 5 // 监听change事件:
 6 fileInput.addEventListener('change', function () {
 7     // 清除背景图片:
 8     preview.style.backgroundImage = '';
 9     // 检查文件是否选择:
10     if (!fileInput.value) {
11         info.innerHTML = '没有选择文件';
12         return;
13     }
14     // 获取File引用:
15     var file = fileInput.files[0];
16     // 获取File信息:
17     info.innerHTML = '文件: ' + file.name + '<br>' +
18                      '大小: ' + file.size + '<br>' +
19                      '修改: ' + file.lastModifiedDate;
20     if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
21         alert('不是有效的图片文件!');
22         return;
23     }
24     // 读取文件:
25     var reader = new FileReader();
26     reader.onload = function(e) {
27         var
28             data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'            
29         preview.style.backgroundImage = 'url(' + data + ')';
30     };
31     // 以DataURL的形式读取文件:
32     reader.readAsDataURL(file);
33 });