事件监听与移除事件监听

Navigator onLine 属性:一个只读的布尔值，声明了系统是否处于脱机模式。
addEventListener() 事件监听
removeEventListener() 移除事件监听

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数（可选）是个布尔值用于描述事件是冒泡还是捕获:默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

扩展知识：

事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将p元素插入到 div元素中，用户点击 p元素, 哪个元素的 “click” 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： p 元素的点击事件先触发，然后会触发 div元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： div元素的点击事件先触发 ，然后再触发 p 元素的点击事件。
addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：

addEventListener(event, function, useCapture);

注意:event不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
两种使用方式：

element.addEventListener("click", function(){ alert("Hello World!"); });

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

向 Window 对象添加事件句柄

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

传递参数
当传递参数值时，使用"匿名函数"调用带参数的函数：

var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}

removeEventListener() 方法

element.removeEventListener("mousemove", myFunction);

浏览器兼容处理

var x = document.getElementById("myBtn");
if (x.addEventListener) {    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

所有主流浏览器使用addEventListener()和removeEventListener()两个方法处理事件，这种方法比较常见，但是，ie人家牛逼，IE中也有类似的两个方法：attachEvent()和detachEvent()。

element.attachEvent(event, function);//事件监听
element.detachEvent(event, function);//移除事件监听

监听联网状态实例

//联网状态
        initOnlineData(){
                // alert(navigator.onLine);
                this.$store.dispatch("setOnlineState",navigator.onLine);//初始化当前联网状态
                if (window.addEventListener) {
                    window.addEventListener("online", this.online, false);
                    window.addEventListener("offline", this.offline, false);
                } else if (window.attachEvent) {
                    window.attachEvent("ononline", this.online);
                    window.attachEvent("onoffline", this.offline);
                } else {
                    window.ononline = this.online;
                    window.onoffline = this.offline;
                }
        },
        //在线
        online(){
            this.$store.dispatch("setOnlineState",true);
        },
        //离线
        offline(){
            this.$store.dispatch("setOnlineState",false);
        }