JavaScript事件和事件委托

事件

• 1. 事件类型
• 2. 事件绑定
• • 1.事件绑定
  • 2. 标准浏览器的事件绑定和ie浏览器的事件绑定的区别：
  • 3. 事件取消
• 3. 事件流
• • 阻止事件冒泡
• 4. 事件默认行为
• 5. 键盘事件
• 6. 事件委托

事件处理函数： 事件触发的时候调用的函数

事件对象：

ie和chrome： window.event，事件发生的时候，会将事件相关的所有内容储存在时间对象中（事件类型，实践目标，鼠标等）；

ff(火狐浏览器): 火狐的事件对象通过时间处理函数的第一个参数传入；

兼容：

document.onclick = function(ev){
	var ev = window.event || ev;
}

           

1. 事件类型

• type： 获取事件类型；
• target（scrElement(ie8-)） ： 获取触发时间的对象；
• clientX、clientY： 获取当前鼠标的位置，相对于屏幕；
• pageX、pageY： 获取当前鼠标的位置，相对与页面；
• shiftKey、ctrlKey、altKey： 布尔值，是否按了对应的键；

  document.onclick = function(ev){
  var ev = window.event || ev;
  console.log(ev.type);//事件类型;
  console.log(ev.target || ev.srcElement);//时间那触发对象;
  condole.log(ev.clientX+"-------"+ev.clientY);//鼠标的坐标;
  console.log(ev.pageX+"--------"+ev.clientY);//鼠标点击的坐标位置
  }
             

2. 事件绑定

1.事件绑定

标准浏览器： 标签.addEventListener(事件类型[不加on]，时间处理函数，是否捕获[默认是false])；

var xBtn = document.getElmentById("button")[0];
function fun1(){
	alert(1);
}
xBtn.addEventListener("click",fun1);
           

ie浏览器： 标签.attachEvent(事件类型[加on]，时间处理函数)；

xBtn,addachEvent("onclick',fun1);
           

2. 标准浏览器的事件绑定和ie浏览器的事件绑定的区别：

• ie没有获取，标准有获取；
• ie的事件名称前面有on，标准没有；
• 标准的ie会根据事件的顺序正序执行，非ie标准逆序，标准正序；
• ie的this是window，标准的是触发这事件的对象；
• 标准浏览器的事件绑定和ie浏览器的事件绑定是不共存的，所以需要兼容；

  if(oDiv.addEventListener){
  	oDiv.addEvetListener("click",fun); //标准浏览器
  }else{
  	oDiv.arrachEvent("onclick",fun); //undefined-假 ie浏览器
  }
             

3. 事件取消

```
标签.事件 = null;
标签.removeELvenListener(事件类型，时间处理函数，书否捕获);
标签.detachEvent(事件类型，事件处理函数);
```
           

3. 事件流

事件流： 事件发生后经过的一系列过程

事件捕获机制： 事件发生的是偶，将时间从最不确定的window开始，依次往子元素传递，一直到事件目标；

事件冒泡机制： 从实践目标开始处理事件，处理完之后将时间依次向父元素传递，一直传到window；

在绑定事件： addEvenListener(事件类型，处理函数，是否捕获)中有3个参数，最后一个参数默认是

false:

表示冒泡，

true:

表示捕获；

//HTML 
<div style="padding: 40px;background: cornflowerblue" id="box1">
    <div style="padding: 40px;background: sandybrown" id="box2">
        <div style="padding: 40px;background: greenyellow" id="box3">
            <div style="padding: 40px;background: salmon" id="box4"></div>
        </div>
    </div>
</div>

//JavaScript
 var oDiv = document.getElementsByTagName("div");
    function fun() {
        alert(this.id);
    }
    oDiv[0].addEventListener("click",fun,true);
    oDiv[1].addEventListener("click",fun,true);
    oDiv[2].addEventListener("click",fun,true);
    oDiv[3].addEventListener("click",fun,true);
           

阻止事件冒泡

子元素接收到事件之后，阻止子元素再给父元素传播事件，阻止事件的方法：

标准浏览器： ev.stopPropagation();

IE浏览器： ev.cancelBubble = true;

<div style="padding: 40px;background: cornflowerblue" id="box1">
    <div style="padding: 40px;background: sandybrown" id="box2">
        <div style="padding: 40px;background: greenyellow" id="box3">
            <div style="padding: 40px;background: salmon" id="box4"></div>
        </div>
    </div>
</div>

//JavaScript
<script>
    var oDiv = document.getElementsByTagName("div");
    function fun(ev) {
        var ev = window.event || ev;
        alert(this.id);
        ev.stopPropagation ? ev.stopPropagation() :ev.cancelBubble = true;
    }
    oDiv[0].onclick = fun;
    oDiv[1].onclick = fun;
    oDiv[2].onclick = fun;
    oDiv[3].onclick = fun;
</script>
           

4. 事件默认行为

给予了元素特殊的操作，如点击链接或跳转到其他的网页，在浏览器中右击鼠标会弹出菜单；

取消默认行为：
标签.事件--->return false; 阻止
标签.addEventListener -->ev.preventDefault(); 阻止
标签.attachEvent -->ev.returnValue = false; 阻止

<ul>
    <li>右击</li>
    <li>刷新</li>
    <li>右击</li>
    <li>右击</li>
    <li>右击</li>
</ul>
js：
<script>
    var xUl = document.getElementsByTagName("ul")[0];
    var xLi = document.getElementsByTagName("li");
    document.oncontextmenu = function(ev){
        var ev = window.event || ev;
        xUl.style.display = "block";//让ul显示出来
        xUl.style.left = ev.clientX + "px";
        xUl.style.top = ev.clientY + "px";
        return false;//阻止默认行为（菜单）
    };
</script>
           

5. 键盘事件

• onkeydown： 键盘按下
• onkeyup： 键盘弹起
• onkeypress： 按下

// onkeydown
window.onkeydown = function(ev){
	var ev = window.event || ev;
	console.log("按下");
	console.log(ev.key); //具体的按键
	alert(ev.keyCode);//按键对应的编码
	
	//3个特殊的按键，可以直接判断是否按下ctrlkey altkey shiftkey;
	alert(ev.shiftKey);	-->有没有按住shift键，按了true，没按false
	alert(ev.altkey);	-->有没有按住alt键，按了true，没按false
	alert(ev.ctrlkey);	-->有没有按住ctrl键，按了true，没按false
	
	console.log(ev.key);
	console.log(ev.keyCode); -->不区分大小写，全部都是大写编码
}

//onkeypress
document,onkeypress = function(ev){
	var ev = window.event || ev;
	console.log(ev.key);
	console.log(ev.keyCode); -->区分大小写
}
           

6. 事件委托

将事件添加给父元素，事件发生的时候荣国冒泡触发父元素事件，父元素就会去找对应的子元素处理事件

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

js:
var oUl = document.getElementsByTageName("ul")[0];
oUl.onclick = function(){
	var ev = window.event || ev;
	//获取事件目标（被点击的li）
	var target = ev.target || ev.scrElement;//兼容
	target.style.background = "red";//给被点击的li添加背景颜色
	//后期添加的元素也会有点击事件
	oUl.innerHTML += "<li>6</li>";
}