---事件

事件

绑定事件处理函数

1. ele.onxxx = function(){}
   (1) 兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序(句柄绑定方式)
   (2) 基本等同于写在HTML行间上
   (3) this指向dom元素本身

2. obj.addEventListener(type’事件类型’,fn’处理函数’,false)
   (1) 事件监听器，可以为一个事件绑定多个程序(不能重复绑定同一个函数)
   (2) this指向dom元素本身

解除事件处理程序

1. ele.onclick = false/‘’/null;

2. ele.removeEventListner(type, fn, false);

事件处理模型 —— 事件冒泡、捕获

事件冒泡

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

取消冒泡和阻止默认事件

• 取消冒泡
  (1) W3C标准event.stopPropagation();
  (2) e.cancelBubble = true;
  封装取消冒泡的函数stopBubble(event);

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

//取消右键菜单
document.oncontextmenu = function(e){
    //  e.returnValue = false;
    // e.preventDefault();
    return false;
}

封装阻止默认事件的函数cancelHandle(event);

事件捕获

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

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

<div class="a" style="width: 100px; height: 100px; background-color: rgb(94, 245, 24);">
    <div class="b" style="width: 70px; height: 70px; background-color: rgb(131, 245, 167);">
        <div class="c" style="width: 40px; height: 40px; background-color: rgb(195, 247, 224);"></div> 
    </div>
</div>

var a = document.getElementsByClassName('a')[0];
var b = document.getElementsByClassName('b')[0];
var c = document.getElementsByClassName('c')[0];
//先捕获后冒泡
a.addEventListener('click', function(){
    console.log('aBubble');
}, false);
b.addEventListener('click', function(event){
    event.stopPropagation();//取消冒泡 click b --> a b bBubble
    console.log('bBubble');
}, false);
c.addEventListener('click', function(){
    console.log('cBubble');
    e.cancelBubble = true;//取消冒泡 click c --> a b c cBUbble
}, false);
//click c --> cBubble bBubble aBubble //从下往上冒泡

a.addEventListener('click', function(){
    console.log('a');
}, true);
b.addEventListener('click', function(){
    console.log('b');
}, true);
c.addEventListener('click', function(){
    console.log('c');
}, true);
//click c --> c b a //从外往内捕获

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

事件对象

event || window.event

事件源对象

1. event.target
2. event.srcElement

<div class="e" style="background-color: chocolate; height: 100px; width: 100px;"></div>

var e = document.getElementsByClassName('e')[0];
e.onclick = function(e){
    var event = e || window.event;
    var target = event.target || event.srcElement;
    console.log(target);//打印事件源对象
}

事件委托

• 利用事件冒泡和事件源对象进行处理

• 优点 :

  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>

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);
}

事件分类

鼠标事件

在移动端失效,移动端为touchstart、touchmove、touchend

• click = mousedown + mouseup 、mousemove、contextmenu
• mouseover、mouseout、mouseenter、mouseleave(前两个会冒泡，后两个不会，后两个为HTML5新规)
• 用button来区分鼠标的按键，0/1/2
• DOM3标准规定: click事件只能监听左键，即右键不能触发click，只能通过mousedown和mouseup来判断鼠标键
• 如何解决mousedown和click的冲突
• e.button == 0 -->左键 ；e.button == 2 --> 右键

键盘事件

• keydown keyup keypress
• keydown > keypress > keyup
• keydown和keypress的区别
  1.keydown可以响应任意键盘按键，keypress只可以响应字符类键盘按键
  2.keypress返回ASCII码，可以转换成相应字符

  String.fromCharCode(e.charCode);//将ASCII码转换成对应字符
  

文本操作事件

• input, focus, blur, change

<input type="text" placeholder="请输入">
<input type="text" maxlength="40" value="请输入关键字" name="SerchKey" class="inp-txt" onfocus="if(this.value=='请输入关键字'){this.value='';this.className='inp-txt inp-txt-active'}" onblur="if(this.value==''){this.value='请输入关键字';this.className='inp-txt'}" autocomplete="off">

窗体操作类(window上的事件)

• scroll load
  window.onload 在最最最后执行