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>
分析:
基本语法是：
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 });