js事件
一、什么是事件，事件的起因
btn.onclick = function(){
}
二、事件流
1》 事件冒泡：从内到外
2》 事件捕获：从外到内
三、鼠标类事件
1》 onclick ===è单击事件
2》ondbclick ==è双击事件
3》 oncontextmenu ===è右击事件
4》 onmouseover === >鼠标移入、穿过（一次）
5》 onmouseout=è鼠标移出
6》 onmousemove == >鼠标移入（一直会执行的代码）
7》 onmousedown === >鼠标按下
8》 onmouseup =è 鼠标释放
四、键盘类事件
1》 onkeydown ====è键盘按下
2》 onkeyup === 》键盘释放（松开）
********************属性：keyCode:得到键盘中的值
五、其他类事件
1. 》onload ====è加载（dom 加载事件）
2. 》onfocus === >得到焦点
3. 》onblue ===è失去焦点
4. 》onresize ==== >浏览器或者框架尺寸发生变化时触发的事件
5. 》onscroll ==è滚动条发送变化时触发
6. 》onchange ===== >发生变化时触发
六、事件处理程序===》添加
1》 html事件处理程序 ：
语法：把事件写到节点上
缺点：HTML和js耦合
2》 dom0级事件处理程序
语法：box.onclick = function(){}
缺点：同样一个事件后面的会覆盖前面的
3》 dom2级事件处理程序
语法：box.addEventListener(事件名称,函数,false|true)
参数1：不需要加on =èclick
参数3：false 代表冒泡，true 代表捕获
缺点：在ie8或者8以下中是不兼容的不支持
4》 ie事件处理程序
语法：box.attachEvent(事件名称,函数);
参数1：需要加on
5》 跨浏览器事件处理程序(兼容)
dom0级
dom2级
ie事件处理程序
//兼容事件
function setEvent(dom,evt,fn){
if(dom.addEventListener){
dom.addEventListener(evt,fn,false);//dom 2级事件处理程序
}else if(dom.attachEvent){
dom.attachEvent("on"+evt,fn);//ie 事件处理程序
}else{ //浏览器比较老以上都不支持
dom["on"+evt ]= fn //dom 0级事件处理程序
}
}
//测试
setEvent(box,"click",function(){alert(1)})
setEvent(box,"click",function(){alert(2)})
七、删除事件处理程序
dom 0级删除 ===》
语法：DOM对象.事件名称= null;
dom2级删除 ===》
语法：DOM对象.removeEventListener(事件名称,函数,false|true)
参数1:不需要加on
参数2：函数用同一个函数
ie删除
语法：DOM对象.detachEvent(事件名称,函数);
参数1：需要加on
参数2：函数用同一个函数
兼容处理
function removeEvent(dom,evt,fn){
if(dom.removeEventListener){
dom.removeEventListener(evt,fn,false);
}else if(box.detachEvent){
dom.detachEvent("on"+evt,fn)
}else{
dom["on"+evt] = null;
}
}
八、事件对象
非ie事件对象 === 》参数
ie中事件对象======》 window.event
跨浏览器事件对象，处理兼容 ====》window.event || e;
var evt = window.event || e ;
九、事件对象的属性
a) target （非ie）==è目标（返回对应的dom 节点）
b) srcElement(ie中)
处理兼容 ：事件对象.target || 事件对象.srcElement;
//兼容处理
var tar = e.target || e.srcElement;
c) clientX ==è返回当前鼠标位置距离流量器左侧距离
d) clientY ==è返回当前鼠标位置距离流量器顶部距离
****************注意：返回结果没有单位的
十、事件委托
原理：冒泡的原理
优点：
1、性能较好（提高）
2、即使后添加的也有效
十一、事件的阻止冒泡
语法：
事件对象.属性名称
非IE: e.stopPropagation() ;//非IE 阻止冒泡 谷歌、火狐都可以
IE: e.cancelBubble =true; // IE 阻止冒泡 谷歌可以火狐不行
兼容处理：
if(e.stopPropagation){
e.stopPropagation() ;
}else{
e.cancelBubble =true;
}
十二、事件的阻止默认行为
语法：
事件对象.属性名称
非ie : e.preventDefault();
ie : e.returnValue = false ;
兼容处理：
//兼容处理
if(e.preventDefault) {
e.preventDefault(); //非IE
}else {
e.returnValue = false ; //ie
}
//事件流————--冒泡：从内到外 /捕获：从外到内
/*var dv1 = document.getElementById("dv1"),
dv2 = document.getElementById("dv2");
dv1.onclick = function(){
alert(1)
}
dv2.onclick = function(){
alert(2)
}*/
//鼠标事件
//var box = document.getElementById("box");
/*box.onclick = function(){
alert(1)
}*/
/*box.ondblclick = function(){
alert("双击")
}*/
/*box.oncontextmenu = function(){
alert("右击")
}
*/
//键盘事件
/*document.onkeydown = function(){
alert(1)
}
document.onkeyup = function(){
alert("释放")
}*/
/*document.onkeydown = function(e){
alert(e.keyCode)
}*/
//事件处理程序
//html事件处理程序 ：
/*function fn(num1,num2){
return num1+num2;
}
box.onclick = function(){
alert("dom 0级事件处理1")
}
box.onclick = function(){
alert("dom 0级事件处理2")
}//缺点 下边覆盖上面
window.onload = function(){
alert(1)
}
window.onload = function(){
alert(2)
}*/
//dom0级事件处理程序 缺点 下边覆盖上面
//dom 2级事件处理程序
//var box = document.getElementById("box");
//语法：box.addEventListener(事件名称,函数,false|true)
//box.addEventListener("click",function(){alert(1)},false) ;//false ===冒泡
//box.addEventListener("click",function(){alert(2)},false) ;//false ===冒泡
//ie中事件处理程序
//语法：box.attachEvent(事件名称,函数);
/*box.attachEvent("onclick",function(){
alert(1)
})
box.attachEvent("onclick",function(){
alert(2)
})*/
//兼容事件
/*function setEvent(dom,evt,fn){
if(dom.addEventListener){
dom.addEventListener(evt,fn,false);//dom 2级事件处理程序
}else if(dom.attachEvent){
dom.attachEvent("on"+evt,fn);//ie 事件处理程序
}else{ //浏览器比较老以上都不支持
dom["on"+evt ]= fn //dom 0级事件处理程序
}
}
//测试
setEvent(box,"click",function(){alert(1)})
setEvent(box,"click",function(){alert(2)})*/
//删除事件处理程序
var box = document.getElementById("box");
/*box.onclick = function(){
alert(2);
}
box.onclick = null;//dom 0级删除事件
*/
function fn (){
alert(1)
}
/*box.addEventListener("click",fn (),
false
);
//语法：box.removeEventListener(事件名称,函数,false|true)
box.removeEventListener("click",fn (), //添加删除用同一个函数
false
);*/
//ie删除
//box.attachEvent("onclick",fn);
//box.detachEvent("onclick",fn)
//兼容删除处理
//可以删除dom 0级 dom 2级 ie
/*function removeEvent(dom,evt,fn){
if(dom.removeEventListener){
dom.removeEventListener(evt,fn,false);
}else if(box.detachEvent){
dom.detachEvent("on"+evt,fn)
}else{
dom["on"+evt] = null;
}
}*/
//事件对象
/*var box = document.getElementById("box");
box.onclick = function(e){ //mouseEvent
// alert(e) ;//非ie事件对象 === 》参数
// alert(arguments.length) ;//只有一个实参 就是事件对象
// alert(window.event);//ie中
//1>非ie认识的是参数e ie认识的是window.event
var evt = window.event || e ;
alert(evt);
}
function fn(){
alert(arguments[0])
}
fn(5,6)
*/
// 事件对象的属性
/*var box = document.getElementById("box");
box.onclick = function(e){
var e = window.event || e;
// alert(e.target);//非ie 中对象属性
// alert(e.srcElement)//ie中对象属性
//兼容处理
var tar = e.target || e.srcElement;
alert(tar)
}
*/
// 事件委托
var btn = document.getElementById("btn"),
uls = document.getElementById("uls"),
lis = document.getElementsByTagName("li");
/*for(var i = 0 ; i < lis.length ; i++){
lis[i].onclick = function(){
this.style.background = "red";
}
}
*/
/*
btn.onclick = function(){
var oli = document.createElement("li");
uls.appendChild(oli);
}
*/
/**
* 本身是li 加事件 现在然uls 加事件
*/
/*uls.onclick = function(e){
var e = window.event || e; //兼容
var tar = e.target || e.srcElement ; // 对象属性 ===》目标
if(tar.nodeName == "LI"){
tar.style.background = "red";
}
}
btn.onclick = function(){
var oli = document.createElement("li");
uls.appendChild(oli);
}
* */
//clientX clientY
/*document.onclick = function(e){
var e = window.event || e ;
alert(e.clientX);//当前鼠标距离浏览器位置
}*/
//事件的阻止冒泡
/*var dv1 = document.getElementById("dv1"),
dv2 = document.getElementById("dv2");
dv1.onclick = function(){
alert("dv1")
}
dv2.onclick = function(e){
var e = window.event || e;
// e.stopPropagation() ;//非IE 阻止冒泡
// e.cancelBubble =true; // IE 阻止冒泡
//兼容
if(e.stopPropagation){
e.stopPropagation() ;
}else{
e.cancelBubble =true;
}
alert("dv2");
}*/
//事件阻止默认行为
var oA = document.getElementById("oA");
oA.onclick = function(e){
var e = window.event || e ;
e.preventDefault();
}
var box = document.getElementById("box");
box.oncontextmenu = function(e){ //右击
var e = window.event || e ;
// e.preventDefault(); //非IE
// e.returnValue = false ; //ie
//兼容处理
if(e.preventDefault) {
e.preventDefault(); //非IE
}else {
e.returnValue = false ; //ie
}
alert(1);
}
document.oncontextmenu = function(e){ //屏蔽右键默认
// var e = window.event || e ;
//兼容处理
if(e.preventDefault) {
e.preventDefault(); //非IE
}else {
e.returnValue = false ; //ie
}
e.preventDefault();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--鼠标事件-->
<!--<div id="box" onclick="alert(fn(5,1))">我是box</div>--><!--html事件处理程序 ：-->
<!-- 事件属性-->
<!--<div id="box">
<p> 我是box </p>
<span> 1111 </span>
</div>-->
<!-- 事件委托-->
<!--<input type="button" id="btn" value="添加"/>
<ul id="uls">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>-->
<!--事件阻止冒泡-->
<!--<div id="dv1">
<div id="dv2"></div>
</div>-->
<!--事件阻止默认行为-->
<a href="http://www.baidu.com" id="oA">跳转页面</a>
<form action="a.html"><input type="submit" /></form>
<div id="box" style="width:300px;height:300px;background:#ADFF2F"></div>
<script src="script.js"></script>
</body>
</html>
<!--事件流
<div id="dv1">
<div id="dv2"></div>
</div>-->