Javascript事件

事件绑定

语法

标准

事件绑定：利用特定的方法可以实现给一个元素的同一个事件添加多个事件处理函数

标准: 元素.addEventListener(事件类型, 事件处理函数, [是否捕获]);

事件类型: 不加on

事件处理函数: 函数名 函数

是否捕获: 默认false冒泡 true: 捕获

ie: 对象不支持“addEventListener”属性或方法

function a() {
    console.log(this);
}
console.log(div.addEventListener); // ie: undefined  标准: 函数
// div.addEventListener('click', a, false);
// div.addEventListener('click', function () {
//     console.log('这是第二个事件绑定的函数');
//     console.log(this);
// }, false);

ie

ie: 元素.attachEvent(on+事件类型, 事件处理函数);

console.log(div.attachEvent); // ie: 函数  标准: undefined
div.attachEvent('onclick', a);
div.attachEvent('onclick', function () {
    console.log('这是添加的第二个');
    console.log(this);
});

ie和标准事件机制的区别:

\1. 是否加on: ie: 加on 标准: 不加

\2. 是否捕获: ie: 没有捕获 标准: 有捕获

\3. 执行顺序: ie: 倒叙执行 标准: 顺序执行

\4. this的指向: ie: window 标准: 触发源

兼容

if (div.addEventListener) {
    // 标准
    div.addEventListener('click', a, false);
    div.addEventListener('click', function () {
        console.log('这是第二个事件绑定的函数');
        console.log(this);
    }, false);
} else {
    // ie
    div.attachEvent('onclick', a);
    div.attachEvent('onclick', function () {
        console.log('这是添加的第二个');
        console.log(this);
    });
}

封装

function bind(ele, type, fn) {
    // ele: 元素
    // type: 事件类型
    if (ele.addEventListener) {
        // 标准
        ele.addEventListener(type, fn, false);
    } else {
        // ie
        ele.attachEvent('on' + type, fn);
    }
}

事件解绑/事件取消:

元素.事件 元素.事件 = null;

addEventListener 元素.removeEventListener(事件类型, 函数名, [是否捕获]);

attachEvent 元素.detachEvent(on+事件类型, 函数名);

var div = document.querySelector('div');
div.onclick = function () {
    console.log(123);
}
​
div.onclick = null;
​
function a() {
    console.log(111);
}
bind(div, 'click', a);
console.log(div.removeEventListener); // ie: undefined 标准: 函数
console.log(div.detachEvent); // ie: 函数  标准: undefined 
// div.removeEventListener('click', a, false);
// div.detachEvent('onclick', a);
​
// if(div.removeEventListener){
//     // 标准
//     div.removeEventListener('click', a, false);
// } else {
//     // ie
//     div.detachEvent('onclick', a);
// }

封装

unbind(div, 'click', a);
function unbind(ele, type, fn ) {
    if (ele.removeEventListener) {
        // 标准
        ele.removeEventListener(type, fn, false);
    } else {
        // ie
        ele.detachEvent('on' + type, fn);
    }
}

事件流

事件流: 当事件发生的时候, 事件在父子节点之间固定的传递顺序。

捕获型事件(标准) 冒泡型事件

捕获阶段: 当事件发生的时候, 事件从window开始往子元素传递

确定目标: 确定鼠标的触发源

冒泡阶段: 触发源接收到事件并且开始处理. 处理完成后, 会将事件从当前往父节点传递,一直到window

所有事件经过的节点, 都会接收并且去触发这个事件

阻止冒泡

标准: 事件对象.stopPropagation();

ie: 事件对象.cancelBubble = true;

兼容: 如果一个方法一个属性 用方法是否存在来做判断

ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;

// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
console.log(btn, div);
​
// 点击
btn.onclick = function (evs) {
    var ev = window.event || evs;
    // 阻止冒泡
    // console.log(ev.stopPropagation); // ie: undefined 标准: 函数
    // ev.stopPropagation();
    // ev.cancelBubble = true;
    ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true; 
​
​
    console.log(1);
    div.style.display = 'block';
}
​
document.onclick = function () {
    console.log(2);
    div.style.display = 'none';
}

取消默认行为

默认行为:

a标签的跳转

右键菜单

按下拖拽的时候选中文字

图片拖拽保存

取消默认行为：

元素.事件 return false

标准: addEventListener ev.preventDefault();

ie: attachEvent ev.returnValue = false;

兼容:

ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;

var a = document.querySelector('a');
console.log(a);
​
// a.onclick = function () {
//     console.log('点击');
​
//     // 取消默认行为
//     return false;
// }
​
bind(a, 'click', function (evs) {
    var ev = window.event || evs;
    // ev.preventDefault();
    // ev.returnValue = false;
    ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; 
    console.log('点击了');
});

事件委托

事件委托(事件代理): 将子元素要做的事情交给父元素, 通过target或srcElement找到指定的触发源, 将后续代码交给触发源来处理

优点:

\1. 如果现在元素数量过多 执行速度较快

\2. 如果元素发生在未来, 后面的元素也有事件

ul.onclick = function (evs) {
    var ev = window.event || evs;
    console.log(ev.target || ev.srcElement);
    var tar = ev.target || ev.srcElement;
    // 判断触发源是不是li 如果是li 输出内容
    if(tar.nodeName == 'LI'){
        console.log(tar.innerHTML);
    }
}

var li1 = document.createElement('li');
li1.innerHTML = '2222';
ul.appendChild(li1);

键盘事件

document\表单元素

onkeyup 抬起

obkeydown 按下 键盘上任何一个键都可以触发 不区分大小写, 返回大写的编码

特殊键shift + 1 ---> shift + 49 --> ! + 49

obkeypress 按下 键盘上字符可以触发 区分大小分, 返回大写和小写字母的编码

特殊键shift + 1 ---> ! 33

document.onkeydown = function (evs) {
    var ev = window.event || evs;
    // console.log(ev); // KeyboardEvent
    console.log(ev.key); // 标准: 具体的字符 ie: undefined
    console.log(ev.keyCode); // ASCII码
}

// document.onkeypress = function (evs) {
//     var ev = window.event || evs;
//     // console.log(ev); // KeyboardEvent
//     console.log(ev.key); // 标准: 具体的字符 ie: undefined
//     console.log(ev.keyCode); // ASCII码
// }

document.onkeyup = function (evs) {
    var ev = window.event || evs;
    console.log(ev.keyCode);
}

滚轮事件

chrome/ie: onmousewheel

wheelDelta: 120或150的倍数

> 0 向上

< 0 向下

ff: 事件必须通过事件监听的方式 DOMMouseScroll

detail: 3和3的倍数

> 0 向下

< 0 向上

function mouseScroll(ele, upFn, downFn) {
    // ele: 元素
    ele.onmousewheel = scroll;
    if (ele.addEventListener) {
        ele.addEventListener('DOMMouseScroll', scroll);
    }
    // 滚动滚轮触发的事件
    function scroll(evs) {
        var ev = window.event || evs;

        if (ev.wheelDelta) {
            // chrome ie
            var tag = ev.wheelDelta > 0 ? '上' : '下';
        } else {
            // ff
            var tag = ev.detail > 0 ? '下' : '上';
        }   

        // 根据滚轮向上向下执行不同的代码
        if (tag == '上') {
            upFn();
        } else {
            downFn();
        }

    }
}