如何绑定事件处理函数
1.ele.onxxx = function(event){}
兼容性很好，但是一个元素的同一个事件上只能绑定一个处理函数，基本等同于写在HTML行间上
<div style ="width:100px;height:100px;
background-color:red;" onclick ="console.log('a')">
</div>这是行间 等同于于下面的
var div = document.getElementsByTagName('div')[0];
div.onclick = function(){
console.log('a');
}
2.obj.addEventListener(type, fn, false);
IE9以下不兼容，可以为一个事件绑定多个处理程序
div.addEventListener('click', function(){
console.log('a');
},false);
div.addEventListener('click', function(){
console.log('b');
},false); a,b
3.obj.attachEvent('on' + type, fn);
IE独有，一个事件同样可以绑定多个处理程序
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
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(event){}
程序this指向是dom元素本身
2.obj.addEventListener(type, fn , false);
程序this指向是dom元素本身
3.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);
注：若绑定匿名函数，则无法解除
1.div.onclick = null;
2.div.addEventListener('click', test, false);
function test(){
console.log('a');
}
div.removeEventListener('click', test, false);
事件处理模型——事件冒泡丶捕获
- 事件冒泡：
结构上(非视觉上)嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。(自底向上) - 事件捕获：
结构上(非视觉上)嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素(事件源元素)。（自顶向下）
IE没有捕获事件 - 触发顺序，先捕获，后冒泡
focus,blur,change,submit,reset,select等事件不冒泡
.wrapper{
width:300px;
height:300px;
background-color:red;
}
.content{
width:200px;
height:200px;
background-color:green;
}
.box{
width:100px;
height:100px;
background-color:orange;
}
<div class="wrapper">
<div class="content">
<div class="box"></div>
</div>
</div>
var wrapper =
document.getElementsByTagName('wrapper')[0];
var content =
document.getElementsByTagName('content')[0];
var box = document.getElementsByTagName('box')[0];
wrapper.addEventListener('click',function(){
console.log('wrapper')
},false);
content.addEventListener('click',function(){
console.log('content')
},false);
box.addEventListener('click',function(){
console.log('box')
},false);
wrapper.addEventListener('click',function(){
console.log('wrapper1')
},true);
content.addEventListener('click',function(){
console.log('content1')
},true);
box.addEventListener('click',function(){
console.log('box1')
},true);
return wrapper1, content1,box,box1,content,wrapper
到黄色区域的时候 是box的事件执行，按事件绑
定的顺序执行，所以先执行最顶上的返回box，在
返回box1. 别的都一样 按正常顺序来
取消冒泡和阻止默认事件
取消冒泡：
- W3C标准event.stopPropagation();但不支持ie9以下版本
- IE独有event.cancleBubble = true;
.wrapper{
width:300px;
height:300px;
background-color:red;
}
<div class = 'wrapper'></div>
document.onclick = function (){
console.log('你闲的啊')；
}
var div = documemt.getElementsByTagName('div')[0];
div.onclick = function(e){
e.stopPropagation();
//e.cancleBubble = true;
this.style.background = 'green';
}
这个参数e是事件对象，如果console.log(e)就会打
印出函数，所以这个 e.stopPropagation();取消了
冒泡事件，也就是没有'你闲的啊'
封装取消冒泡的函数stopBubble(event)
function stopBubble(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancleBubble = true;
}
}
阻止默认事件:
- 默认事件—表单提交，a标签跳转，右键菜单等
1.return false; 以对象属性的方式注册的事件才生效(只有句柄方式才好使 addEventListener不好使)
document.oncontextmenu = function (){
console.log('a');
return false;
}右键只出a 不出菜单 默认事件被取消了
2.event.preventDefault(); IE9以下不兼容
document.oncontextmenu = function (e){
console.log('a');
e.preventDefault();
3.event.returnValue = false; 兼容IE
封装阻止默认事件的函数canceHandler(event);
function canceHandler(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
事件对象
event || window.event 用于IE
事件源对象：
event.target 火狐只有这个
event.srcElement IE只有这个
这俩chrome都有
兼容性写法
<div class = 'wrapper' style = 'width:100px;
height:100px; background-color:red; '>
<div class = 'box' style = 'width:50px;
height:50px; background-color:green; '>
</div>
</div>
var wrapper =document.getElemenstByTagName('wrapper')[0];
var box=document.getElemenstByTagName('box')[0];
wrapper.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);
}
无论里面有多少li，都是ul的子对象，都能冒泡给ul
事件分类
- 鼠标事件
click, mousedown, mousemove, mouseup, contextmenu, mouseover, mouseout, mouseenter, mouseleave
<div style="width:100px; height:100px;
background-color:red; position:absolute; left:0;
top:0;"></div>
function drag(elem){
var div = document.getElementsByTagName('div')[0];
var disX,
disY;
div.onmousedown = function(e){
disX = e.pageX - parseInt(div.style.left);
disY = e.pageY - parseInt(div.style.top);
document.onmousemove = function(e){
var event = e || window.event;
div.style.left = e.pageX - disX + 'px';
div.style.top = e.pageY - disY + 'px';
}
document.onmouseup = function (){
document.onmousemove = null;
}
}
小木块跟随鼠标移动，拖拽运动
<div style="width:100px; height:100px;
background-color:red; "></div>
var div = document.getElementsByTagName('div')[0];
div.onmouseover = function (){
div.style.background = ''yellow";
}
div.onmouseout = function (){
div.style.background = 'green';
}
鼠标覆盖时div变yellow，离开时变green
onmouseover == onmouseseenter
onmouseout == onmouseleave
- 用button来区分鼠标的按键 0/1/2
document.onmousedown = function(e){
if(e.button == 2){
console.log('right');
}else if (e.button == 0){
console.log('left');
}
}
var firstTime = 0;
var lastTime = 0;
var key = false;
document.onmousedown = function (){
firstTime = new Date().getTime();
}
document.onmouseup = function(){
lastTime = newDate().getTime();
if(lastTime - firstTime < 300){
key = true;
}
}
document.onclick = function (){
if(key){
console.log('click');
key = false;
}
}
- DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键
- 如何解决mousedown和click的冲突
键盘事件
- keydown keyup keypress
keydown > keypress > keyup
keydown 和keypress
keydown可以相应任何键盘按键，keypress只可以相应字符类键盘按键
keypress返回ASCII码 ，可以转换成相应字符
文本操作事件
input, focus, blur, change
input{
border: 1px solid #01f;
}
<input type='text' value = '请输入用户名'
onfocus="if(this.value = '请输入用户名'){this.value
= ''}" onblur="if(this.value =''){this.value = '请输入
用户名'}">
var input = document.getElementsByTagName('input')[0];
input.oninput = function(e){
console.log(this.value);
}
window.onsrcoll = function (){
console.log(window.pageXOffset + " " +
window.pageYOffset)
滚动条当前位置
window.onload = function(){
console.log();
}
这个函数就是等所有程序都完事了,页面全初始化完成，这个函数才会触发，效率最低
