事件 - 简书

事件

封装兼容性好的添加事件的方法

function addEvent(elem,type,handle) {
    if(elem.addEventListener) {//通用 IE9以下不兼容
        elem.addEventListener(type,handle,false);
    }else if(elem.attachEvent) {//兼容IE
        elem.attachEvent('on' + type,function() {
            handle.call(elem);//this本身指向window，加上call(elem)使this指向elem
        })
    }else{//兼容性最好，但一个事件只能绑定一个处理函数（缺陷）
        elem['on' + type] = handle;
    }
}

解除事件处理程序

elem.onclick = false/''/null;
elem.removeEventListener(type,fn,false);
elem.detachEvent('on'+type,fn);

function removeEvent(elem,type,handle){
    if(elem.removeEventListener){
        elem.removeEventListener(type,handle,false);
    }else if(elem.detachEvent){
        elem.detachEvent('on'+type,handle);
    }else{
        elem['on'+type] = null;
    }
}

事件处理模型-事件冒泡，捕获

事件冒泡：

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

事件捕获：

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自底向上）

IE没有捕获事件

触发顺序，先捕获，后冒泡

focus，blur，change，submit，reset，select 等事件不冒泡

封装取消冒泡事件的方法

function stopBubble(event) {
    if(event.stopPropagation) {
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}

阻止默认事件

默认事件- 表单提交，a标签跳转，右键菜单（oncontextmenu）等

return false; 以对象属性的方式注册的事件才生效
event.preventDefault(); W3C标准，IE9一下不兼容
event.returnValue = false; 兼容IE

封装兼容性好的阻止默认事件方法

function cancelHandler(event) {
    if(event.preventDefault) {
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}

还能在a标签上写href="javascript:void(false)",也能阻止a标签的默认事件。

事件对象的兼容

var event = e || window.event;//后者兼容IE

事件源对象的兼容

var event = e || window.event;//后者兼容IE
var target = event.target || event.srcElement;//前者兼容火狐，后者兼容IE

事件源对象的应用

从父级向子级添加事件

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    var ul = document.getElementsByTagName('ul')[0];
    ul.onclick = function (e) {
        var event = e || window.event;
        var target = event.target || event.srcElement;
        console.log(target.innerText);
    }
</script>

方便后续扩充

用event.button来区分鼠标的按键

DOM3标准规定：click之间只能监听左键，只能由mousedown和mouseup来判断鼠标键

keydown>keypress>keyup

keydown和keypress的区别
1. keydown可以响应任意键盘按键，keypress只可以响应字符类键盘按键
2. keypress返回ASCII码，可以转换成相应字符（String.formCharCode(e.charCode)）

常用事件

click,

mousedown,mousemove,mouseup,

keydown,keypress,keyup,

input,focus,blur,change,

window.onscroll,

window.onload(效率低，不用来写主程序)

事件