事件
事件
一、 绑定事件处理函数
1.1 标签绑定
Document对象绑定
//1. ele.onxxx
l 兼容性好同一个元素只能绑定一个事件
l 类似于写在了行间样式
//2. obj.addEventListener(事件类型,处理函数,false) 事件监听,监听线程执行
l ie9一下不兼容,可以为一个对象的一个事件绑定多个处理程序
l 事件类型:event string表示事件类型的字符串“click”
l 处理函数:callback function 表示事件处理程序,函数中的this指向添加监听对象
boll boolean 表示事件处理程序,函数中的this指向添加监听的对象
//3. obj.attachEvent('on + 事件类型',处理函数) ie独有 可以执行多次
//神马面试题,用原生js,addeventListener写出以上点击事件按照顺序li 绑定事件 循环里访问i,数值越界,形成闭包
var liCol = document.getElementsByTagName('li'), len = liCol.length; for(var i = 0; i < len ;i++){ (function(i){ liCol[i].addEventListener('click',function(){ console.log(i); },false); }(i))
二、 事件处理程序的运行环境
//1.ele.onxxx = function(even){} 程序this指向dom元素自身
//2.addEventListener(type,fn,false) 程序this指向dom元素自身
//3. obj.attachEvent('on '+ 事件类型,处理函数) 程序this指向window
解决this指向window问题
封装addEvent(给一个dom对象,添加该事件类型的事件处理函数)
//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;
// }
//}
解除事件处理程序
//1.ele.onclick = false/''/null
//一次生效
var div =document.getElementsByTagName(“div”)[0];
div.onclick = function(){
console.log(“a”);
this.onclick = null;
}
//2.ele.removeEventListener(type,fn,false)
//3.ele.datachEvent('on'+type,fn)
//若绑定匿名函数,则无法解除
三、事件处理模型
事件冒泡:
结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素(自底向上)
事件捕获:
结构上(非视觉)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素(事件源元素)。(自顶向下)
ie没有捕获事件(事件捕获是netscaps提出的,微软提出事件冒泡)
事件触发顺序 先捕获,再目标,后冒泡,
focus(聚焦),blur,change,submit,reset,select等事件不冒泡
取消冒泡
1.W3C标准event.stopPropagation(); 但不支持ie9一下版本
2.IE独有 event.cancelBubble = true
//封装取消冒泡的函数stopBubble
//function stopBublle(event){
// if(event.stopPropagation){
// event.stopPropagation();
// }else{
// event.cancelBubble = ture;
// }
//}
阻止默认事件
// 默认事件- 表单提交,a标签跳转,右键菜单
//1.return false;以对象属性的方式注册的事件才生效(句柄方式才有效)
//2.event.preventDefault(); W3C标注,ie9一下不兼容
//3.event.returnValue = false 兼容ie
//封装组织默认事件的函数cancelHandler(event);
//function canceHandler(event){
// if(event.preventDefault){
// event.preventDefault();
// }else(event.returnValue){
// event.returnValue = false;
// }
//}
取消a标签默认事件
<a href="javascript:void(false)"> demo </a> //协议限定符
四、事件对象
e || window.event 用于IE兼容
e || event 其他兼容
事件源对象
event.target 火狐只有这个
event.srcElement ie只有这个
chrom都有
五、事件委托
用法
子元素的事件加到父元素上
触发事件时判断 触发该事件的元素是什么(e.target)
判断内容 innerHTML innerText
标签名 nodeName (判断的时候,标签名需要大写)
属性 e.target.hasAttribute("属性名"); 有则是true 无则是false
类名 ID e.target.classList.contains("类名"); 有则是true 无则是false
在判断成功中写对应的处理函数
应用场合
需要给大量元素添加同一事件处理程序的时候,提高代码运行的效率
在页面加载完成后新创建的元素, 比如通过ajax异步加载生成dom对象
利用事件冒泡,和事件源对象进行处理
优点
1.性能 不需要循环所有的元素一个个绑定事件
2.灵活 当有新的子元素时不需要重新绑定事件
//事件委托,ul>li点击出现对应内容
var ul =document.getElementsByTagName('ul')[0];
ul.onclick = function(e){
var event = e ||event.srcElement;
var target = event.target || event.srcElement;
console.log(target.innerText)
}
六、事件分类
1.1 鼠标事件
click mousedown(touchend) mousemove(touchastart)
mouseup contextmenu mouseover(touchmove) mouseout
mouseenter mouseleave(es6)
//鼠标拖动
1 var div = document.getElementsByTagName('div')[0]; 2 3 var divX, 4 5 divY; 6 7 div.onmousedown = function(e){ 8 9 divX = e.pageX - parseInt(div.style.left); 10 11 divY = e.pageY - parseInt(div.style.top); 12 13 document.onmousemove = function(e){ //document防止鼠标移出时小方块不移动了 14 15 var event = e || window.event; 16 17 div.style.left = e.pageX - divX + "px"; 18 19 div.style.top = e.pageY - divY + "px"; 20 21 } 22 23 document.onmouseup = function(){ 24 25 div.onmousemove = null; 26 27 }
//2.0判断了临界值
var tuo = document.getElementsByClassName("drag")[0]; function drag(tuo){ //按下--拖拽 ---抬起 var startX,startY,endX,endY; tuo.onmousedown = function(e){ startX = e.offsetX; //获取鼠标按下坐标 startY = e.offsetY; console.log(startX,startY); window.addEventListener("mousemove",move,false); //加监听 } tuo.onmouseup = function(e){ window.removeEventListener("mousemove",move,false); } function move(e){ endX = e.clientX; endY = e.clientY; console.log(endX,endY); var top = endY - startY; var left = endX - startY; if(top <= 0){ top = 0; }else if(top >= window.innerHeight - tuo.offsetHeight){ top = window.innerHeight - tuo.offsetHeight; } if(left <= 0){ left = 0; }else if (left >= window.innerWidth - tuo.offsetWidth){ left = window.innerWidth - tuo.offsetWidth; } tuo.style.top = top + "px"; tuo.style.left = left + "px"; tuo.style.margin = 0; } } drag(tuo)
//用button来区分鼠标的案件0/1/2(左滚轮右)
DOM3标准规定,click事件只能监听左键,只能通过mousedown和mouseup来判断鼠标键
e.button == 2 右键 e.button == 0 左键
//如何解决mousedown和click的冲突
用时间差
1 var firstTime = 0; 2 3 var lastTime = 0; 4 5 var key = false; 6 7 document.onmousedown = function(){ 8 9 firstTime = new Date().getTime(); 10 11 } 12 13 document.onmouseup = function(){ 14 15 lastTime = new Date().getTime(); 16 17 if(lastTime – firstTime < 300 ){ 18 19 key = true; 20 21 } 22 23 } 24 25 document.onclick = function(){ 26 27 if(key){ 28 29 console.log(“click”); 30 31 key = false; 32 33 } 34 35 }
1.2,1.3 键盘事件,表单事件
keydown(按下) keyup keypress(点击)(只识别数字字母)
keydown > keypress > keyup
keydown和keypress的区别
keydown可以相应任意键盘按键,keypress只可以相应字符类键盘按键
keypress返回ASCII码,可以转换成相应字符 String.fromCharCode(e.charCode)
l oninput 及时触发
l onchange 聚焦,失去焦点后触发
l onfocus 聚焦
l onblur 失去焦点
1.4 窗口操作类(windiow上的事件)
onscoll
onload