js事件

如何绑定事件

• ele.onxxx = function (event) {} 兼容性很好，但是一个元素只能绑定一个处理程序 基本等同于写在HTML行间上
• obj.addEventListener(type事件类型, fn处理函数, false); IE9以下不兼容，可以为一个事件绑定多个处理程序
• obj.attachEvent(‘on’ + type, fn); IE独有，一个事件同样可以绑定多个处理程序

事件处理程序的运行环境

• ele.onxxx = function (event) {} 程序this指向是dom元素本身
• obj.addEventListener(type, fn, false); 程序this指向是dom元素本身
• obj.attachEvent(‘on’ + type, fn); 程序this指向window

封装兼容性的 addEvent(elem, type, handle);方法
function addEvent(elem,type,handle){
    if(elem.addEventListener){
        elem.addEventListener(type,handle,false);
    }else if(elem.attachEvent){
        elem.attachEvent('on'+type,function(){
            handle.call(elem);
        })
    }else{
        elem['on'+type]=handle;
    }
}
复制代码

解除事件处理程序

• ele.onclick = false/‘’/null;
• ele.removeEventListener(type, fn, false);
• ele.detachEvent(‘on’ + type, fn);
• 注:若绑定匿名函数，则无法解除

事件处理模型

事件冒泡,捕获

• 事件冒泡：
  • 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
• 事件捕获：
  • 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自底向上）
  • IE没有捕获事件
• 触发顺序，先捕获，后冒泡
• focus，blur，change，submit，reset，select 等事件不冒泡

取消冒泡和阻止默认事件

• 取消冒泡：
  • W3C标准 event.stopPropagation();但不支持ie9以下版本
  • IE独有 event.cancelBubble = true;

封装取消冒泡的函数 stopBubble(event)
function stopBubble(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble=true;
    }
}
复制代码

• 阻止默认事件:
  • 默认事件 — 表单提交，a标签跳转，右键菜单等
  • 1.return false; 以对象属性的方式注册的事件才生效
  • 2.event.preventDefault(); W3C标注，IE9以下不兼容
  • 3.event.returnValue = false; 兼容IE

事件对象

• event || window.event 用于IE
• 事件源对象:
  • event.target 火狐独有的
  • event.srcElement Ie独有的
  • 这俩chrome都有

事件委托

• 利用事件冒泡，和事件源对象进行处理
• 优点：
  • 1. 性能 不需要循环所有的元素一个个绑定事件
  • 2. 灵活 当有新的子元素时不需要重新绑定事件

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</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>
复制代码

事件分类

• 鼠标事件
• click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout
• 用button来区分鼠标的按键，0/1/2
• DOM3标准规定:click事件只能监听左键,只能通过mousedown 和 mouseup来判断鼠标键
• 如何解决mousedown和click的冲突
• 键盘事件
• keydown keyup keypress
• keydown > keypress > keyup
• keydown和keypress的区别
• keydown 可以响应任意键盘按键，keypress只可以相应字符类键盘按键
• keypress返回ASCII码，可以转换成相应字符
• 文本操作事件
• input,focus,blur,change
• 窗体操作类(window上的事件)
• scroll load