事件

事件

事件

事件函数: 当事件被触发时调用的函数

事件对象: 当事件发生的时候，浏览器会将事件相关信息保存在内置全局对象 window.event 当中，可以直接使用，window 可以省略，其中包括事件类型，操作对象， 鼠标位置等。

    box.onclick = function (event) {
        console.log(event); // 事件对象
        console.log(event.type); // 事件类型
        console.log(event.target); // 事件类型
        console.log(event.clientX, event.clientY); // 页面位置
        console.log(event.screenX, event.screenY); // 屏幕位置
        console.log(event.pageX, event.pageY); // 页面位置
    }
事件绑定

DOM0级事件

    box.onclick = function () {
        alert(1);
    }
DOM2级事件

   	// 标准浏览器
	box.addEventListener('click', function () {
        alert('click');
    }, false);

	// IE浏览器
    box.attachEvent('onclick', function () {
        alert('onclick');
    });

    // 添加事件的函数  obj: 元素  eventType: 事件类型(不加on) fun: 事件函数
    function on (obj, eventType, fun) {
        if (obj.addEventListener) {
            obj.addEventListener(eventType, fun, false);
        } else {
            obj.attachEvent('on' + eventType, fun);
        }
    }
不同方式给同一元素添加相同事件

    var box = document.querySelector('.box');
    // DOM0级事件重复添加 会覆盖 只执行2
//    box.onclick = function () {
//        alert(1);
//    }
//
//    box.onclick = function () {
//        alert(2);
//    }

    // DOM2级标准事件给同一元素添加相同事件, 会顺序执行 先1后2
//    box.addEventListener('click', function () {
//        alert(1);
//    }, false);
//
//    box.addEventListener('click', function () {
//        alert(2);
//    }, false);

    // 低版本IEDOM2级事件给同一元素添加相同事件, 会倒序执行 先2后1
    box.attachEvent('onclick', function () {
        alert(1);
    });
    box.attachEvent('onclick', function () {
        alert(2);
    });
事件取消

DOM0级事件

// 绑定
box.onclick = function () {} 
// 取消
box.onclick = null;
DOM2级事件

// 标准浏览器
// 绑定
box.addEVentListener('click', fun, false);
// 取消
box.removeEventListener('click', fun);

function fun () {}


// IE浏览器
box.attachEvent('onclick', fun);
// 取消
box.detachEvent('onclick', fun);
function fun () {}
事件流

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点 都会收到该事件，这个传播过程即 DOM 事件流。

addEventListener(事件类型, 事件函数, 是否捕获)  true: 捕获  false: 冒泡
事件冒泡: 在 JavaScript 中，默认是事件冒泡事件流机制，即当一个元素接收到事件，会把接

收到的事件依次传给他的父元素一直到 window。

阻止事件冒泡

event.stopPropagation(); 标准浏览器
event.cancelBubble = true; IE浏览器
        event = event || window.event;
//        event.stopPropagation(); // 标准浏览器
//        event.cancelBubble = true; // IE浏览器
//        if (event.stopPropagation) {
//            event.stopPropagation();
//        } else {
//            event.cancelBubble = true;
//        }
	event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
阻止默认事件

DOM0级事件: return false;
addEventListener : event.preventDefault();
attachEvent : event.returnValue = false;
键盘事件

onkeydown: 键盘按下
onkeyup: 键盘抬起
event.keyCode : 按下键盘对应的编码 ←:37 ↑:38 →:39 ↓:40