js基础之高级事件

高级事件

1. 注册事件有两种：传统方式和方法监听注册方式
   • 传统：注册事件唯一性，同一个元素同一个事件只能设置一个处理函数，后面覆盖前面
   • 方法监听：

     eventTarget目标对象.addEventListener(type事件类型,listener函数[,useCapture(true捕获阶段、false冒泡阶段)])
     type:加''字符型，不加on
     

2. 删除事件：
   • 传统方式：注册事件函数内divs[0].onclick = null;
   • removeEventListener 删除事件

     divs[1].addEventListener('click', fn) 函数调用不用小括号
     function fn(){
     	alert(22);
     	divs[1].removeEventListener('click', fn)
     }
     

DOM事件流：传播过程

1. 3个阶段：1）捕获阶段 2）当前目标阶段 3）冒泡阶段
2. js只能执行捕获或者冒泡中的一个阶段
3. 捕获阶段 如果addEventListener( , , 3)第三个参数为true
   • 处于捕获阶段：document——html——body——father——son
4. 冒泡阶段 如果addEventListener( , , 3)第三个参数为false或省略
   • 处于冒泡阶段：son——father——body——html——document
5. 一般情况更关注事件的冒泡，有些事无冒泡，比如onblur、onfocus、onmouseenter、onmouseleave

事件对象

1. 事件对象：事件一系列相关数据的集合

   div.onclick = function(e) {
   	e = e || window.event 兼容性ie678
   	console.log(e);
   }
   div.addEventListener('click', function(e){
   	console.log(e);
   })
   

2. 返回事件类型：e.type

   function fn(e){
   	console.log(e.type);
   }
   

3. 阻止默认行为（事件）：让链接不跳转或让提交按钮不提交

   var a = document.querySelector('a');
   a.addEventListener('click', function(e){
   	e.preventDefault();  //dom写法
   })
   

4. 传统方式

    a.onclick = function(e){
    	//e.preventDefault(); 方法
    	//ie678
    	e.returnValue = false; 属性
    	// 全部版本都可以 只限于传统的注册事件方式 return下面的不执行
    	return false;
    }
   

5. 阻止事件冒泡：
   • dom推荐标准 stopPropagation()
   • e.cancelBubble = true; //非标准
6. 事件委托：给父节点添加侦听器，利用事件影响每个子节点

   var ul = document.querySelector('ul');
   ul.add.....
   

7. 鼠标事件：禁止右键菜单：

   document.addEventListener('contextmenu', function(e){
   	e.preventDefault();
   })
   

8. 禁止选中文字：selectstart

e.target 和this 区别

1. e.target点击对象谁，就返回点击的对象；
2. this 哪个元素绑定了这个点击事件，就返回谁

鼠标事件对象 MouseEvent

1. client：鼠标在可视区的x,y坐标 e.clientX/Y
2. pageX\Y在页面文档的x,y坐标
3. screenX\Y在电脑屏幕的x,y坐标

键盘事件

1. 键盘事件之keyCode属性 返回ASCII码值
2. keydown \ keyup 不区分大小写 识别功能键
3. keypress 区分大小写