javascript事件

本文主要是介绍javascript事件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1、如何绑定事件处理函数？

element.onxxx=function( event){}(在行间里不用写function，直接写onxxx="执行内容")

兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序

基本等同于写在HTML行间上

//例子
var div=getElementByTagName('div')[0];
div.onclick=function(){
    console.log('hello');
}

3.程序this指向dom元素本身

obj.addEventlistener(type,fn,false);//事件监听
1. IE9以下不兼容(是W3C标准），可以为一个事件绑定多个处理程序
```
//例子
var div=getElementByTagName('div')[0];
div.addEventlistener('click',function(){
    console.log('hello');
},false);
```
2.特点：同一个对象可以通过addEventlistener()绑定多个不同处理程序(如果是同一个处理程序的话，只执行一次)，执行顺序自上而下

3.程序this指向dom元素本身
obj.attachEvent('on'+type,fn);
1. IE独有，一个事件同样可以绑定多个处理程序。
```
//例子
var div=getElementsByTagName('div')[0];
div.attachEvent('onclick',function(){
    console.log('hello');
})
```
2.特点：同一个对象可以绑定多个不同的处理程序（自上而下执行），也可以绑定多个同一个处理程序（绑定几个执行几次）

3.程序this指向window

2、封装兼容性的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;
    }
}

3、笔试题

<ul>
    <li>a<li/>
    <li>a<li/>
    <li>a<li/>
    <li>a<li/>
<ul/>//要求点击li元素时，按顺序打印li的下标
//解答：
    <script>
        var li =docuemnt.getElementsByTagName('li'),len=li.length;
        for(var =0;i<len;i++){
            (function(i){
                   li[i].addEventlistener('click',function(){
                    console.log(i);
                },false); 
            }(i))//使用立即执行函数防止形成闭包
        }
    <script/>

4、解除事件处理程序

ele.onclick=false/null;
ele.removeEventlistener(type,fn,false);
ele.detachEvent('on'+type,fn);

注：若绑定匿名函数，则无法解除；

5、事件处理模型（事件冒泡、捕获）

1.事件冒泡

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

<style type="text/css">
    .wrapper{
        width: 400px;
        height: 400px;
        background-color: red;
    }
    .content{
        width: 200px;
        height: 200px;
        background-color: blue;
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>
<div class="wrapper">
    <div class="content">
        <div class="box"></div>
    </div>
</div>
<script type="text/javascript">
    var wrapper=document.getElementsByClassName('wrapper')[0];
    var content=document.getElementsByClassName('content')[0];
    var box=document.getElementsByClassName('box')[0];
    wrapper.addEventListener('click',function(){
        console.log('wrapper');
    },false)//wrapper
    content.addEventListener('click',function(){
        console.log('content');
    },false)//content wrapper
    box.addEventListener('click',function(){
        console.log('box');
    },false)//box content wrapper 冒泡现象
</script>

2.事件捕获

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

IE没有捕获事件

<script type="text/javascript">
    var wrapper=document.getElementsByClassName('wrapper')[0];
    var content=document.getElementsByClassName('content')[0];
    var box=document.getElementsByClassName('box')[0];
    wrapper.addEventListener('click',function(){
        console.log('wrapper');
    },true)//wrapper
    content.addEventListener('click',function(){
        console.log('content');
    },true)// wrapper content 
    box.addEventListener('click',function(){
        console.log('box');
    },true)// wrapper content box
</script>

3.触发顺序，先捕获，后冒泡

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

5、除了将addEventListener的第三个参数设置为true触发事件捕获之外，还可以设置（div.setCapture//获取div的所有事件）（div.releaseCapture//释放div上的所有事件）也可触发事件捕获

注：事件捕获和冒泡不可能同时触发

6、取消冒泡和阻止默认事件

1、取消冒泡

W3C标准event.stopPropagation();但不支持ie9以下版本
IE独有event.canceBubble=true;(谷歌也有)

封装取消冒泡的函数stopBubble（event）

function stopBubble(e){
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble=true;
    }
}

2、阻止默认事件：

默认事件（表单提交，a标签跳转（也可以这样写<a href="javascript:void()">不会跳转<a/>），右键菜单（ele.oncontextmenu）等）
return false；以对象属性的方式注册的事件才生效(兼容性很好)
event.preventDefault();W3C标准，IE9以下不兼容
event.returnValue=false；兼容IE
封装阻止默认事件的函数cancelHandler(event);

function cancelHandler(e){
	if(e.preventDefault){
		e.preventDefault();
	}else{
		e.returnValue=false;
	}
}

7、事件对象

1、event||window.event 用于IE

2、事件源对象（可用于事件委托）

event.target 火狐只有这个
event.srcElement IE只有这个
这两个chrome都有

3、兼容性写法

<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>//要求点击li打印对应内容，如果动态添加li元素，添加后的li元素点击时也可以输出对应内容
<script type="text/javascript">
    // 事件委托
    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>

8、拖拽练习

原理图：

function Drag(elem){
	var disX,disY;
	elem.onmousedown=function(e){
		disX=e.pageX-parseInt(elem.style.left);
		disY=e.pageY-parseInt(elem.style.top);
		document.onmousemove=function(e){
			elem.style.left = e.pageX-disX+"px";
			elem.style.top = e.pageY-disY+"px";
		}
		document.onmouseup = function(){
			document.onmousemove=null;
		}
	}
}

9、事件分类

1、鼠标事件

click（click=mousedown+mouseup鼠标点击事件，存在延迟现象）、mousedown（鼠标落下事件）、mousemove（鼠标移动事件）、mouseup（鼠标抬起事件）、contextmenu（右键菜单事件）、mouseover（鼠标移入事件）、mouseout（鼠标移出事件）、mouseenter（html5新规范，鼠标移入事件）、mouseleave（html5新规范，鼠标移出事件）
用button来区分鼠标的按键，0/1/2(click事件触发不了)

document.onmousedown=function(e){
    console.log(e);//e事件对象包括了button这个属性
    if(e.button==2){
        console.log('right');
    }else if(e.button==0){
        console.log('left');
    }
}

DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键
如何解决mousedown和click冲突（设置延时即可（当mouseup-mousedown的时间到达某个条件，再触发click事件））

2、键盘事件

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

这篇关于javascript事件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程