JavaScript 事件简介

事件

事件的概念

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间【触发与响应】
事件触发：用户在页面上操作(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框获得焦点, 失去焦点等)

事件触发顺序

捕获--目标--冒泡

• 事件流
  事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候， 那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。
• 事件冒泡
  事件冒泡是从里往外逐个触发. 事件捕获, 是从外往里逐个触发. 现代的浏览器默认情况下都是事件冒泡的模式.

常用的事件类型

'on'+事件名

• 表单：

change事件---域的内容被改变
focus事件--元素获得焦点(不冒泡)
blur事件---元素失去焦点（不冒泡）

• window事件：

load事件--页面资源包括图像完成加载，当页面完全加载后触发
resize事件---窗口改变。
scroll事件---当用户滚动带滚动条的元素时触发

• 鼠标事件：

contextmenu--鼠标右键
click事件---单击
mouseover事件（冒泡）---当鼠标移入某个元素的那一刻触发
mouseenter事件（不冒泡）----当鼠标移入某个元素的那一刻触发
mouseout事件（冒泡）---当鼠标刚移出某个元素的那一刻触发
mouseleave事件（不冒泡）----当鼠标刚移出某个元素的那一刻触发

mouseover和 mouseenter的区别是:
mouseover,mouseout: 元素的子元素也会触发事件
mouseenter ,mouseleave: 元素的子元素不会触发事件

• 键盘事件--一般由window对象或者document对象调用

keydown事件---某个键盘按键被按下
keyup事件----某个键盘按键被松开。
keypress事件----某个键盘按键被按下并松开。

事件的三要素：

1．事件源：要绑定事件的对象；
2．事件名称：发生了或是绑定了什么事件；
3．事件处理程序：要执行的函数或是要处理的结果。

事件的书写位置：

（1） 行内式：页面的标签当中---不利于维护

行内式注册事件，将事件类型当作属性名，属性值为一个调用我们在js中定义好的函数。相当于函数的返回值赋给onclick

<div id="box" onclick="show()">点我</div>
<script>
function show () {
   alert('点我才弹出来')
}
</script>

内联模式调用的函数不能放到window.onload里面, 否则会找不到该函数.

（2） 内嵌式(属性绑定模式)： 写在script标签之间---只能绑定一个函数

//先获取到元素节点对象, 再针对该节点对象添加事件
var box=document.getElementById('box')
box.onclick=function(){
alert('点我才弹出来')

（3） 导入式：后面一般用的多
把代码存放在.js文件中，导入到html文件

<sccript src="demo.js"></script>

注册事件的方式：

<!-- 浏览器默认是冒泡事件 -->
（1）on+type

var oBtn = document.getElementById("btn1");
oBtn.onclick=function(){
alert('a')
}
oBtn.onclick=function(){
alert('b') //一个节点对象只能邦定一个同名事件，后面的后覆盖掉前面的
}

（2）addEventListener:标准事件（ie不支持）
element.addEventListener('click', fn, false);
//三个参数："事件名称", "事件回调", "捕获（true）/冒泡(false)"。

//FF和Chrome  addEventListener(事件名，函数)，此方法ie不支持
var oBtn = document.getElementById("btn1");
oBtn.addEventListener("click",function()
{
 alert("a");
});
oBtn.addEventListener("click",function()
{
 alert("b");
 })

（3）attachEvent：仅仅ie支持
element.attachEvent('onclick', fn);
//两个参数："on事件名称", "事件回调"。

var oBtn = document.getElementById("btn1");
//IE  attachEvent(事件名，函数)，此方法只有ie支持，FF和Chrome均不支持
oBtn.attachEvent("onclick",function()
{
  alert("a");
});
oBtn.attachEvent("onclick",function()
{
  alert("b");
})

兼容的写法：

//ie只支持attachEvent,而FF和Chrome只支持addEventListener
function addEvent(obj,ev,fn)
    //obj为要绑定事件的元素，ev为要绑定的事件，fn为绑定事件的函数
{
  if(obj.attachEvent)
  {
  obj.attachEvent("on" + ev,fn);
  }
  else
  {
    obj.addEventListener(ev,fn,false);
  }
}

//绑定事件
addEvent(oBtn,"click",function()
{
  alert("a");
})

移除事件

function removeEventListener(element,type,listener){
    if(element.removeEventListener){
        element.removeEventListener(type,listener,false); //标准事件
    }else if(element.detachEvent){
        element.detachEvent("on"+type,listener);  //ie事件
    }else {
        element["on"+type] = null; //属性绑定事件
    }
}

事件对象(event)

event对象是在触发事件时, 浏览器会通过函数把事件对象作为参数传递过来, 在事件触发执行函数时一般会得到一个隐藏的参数, 该参数也是放在arguments数组中

//普通函数的arguments
function func() {
    console.log(arguments.length); //1, 得到一个传递的参数
}
func('hello');

//事件绑定的执行函数
box.onclick = function(){
     console.log(arguments.length); //1, 得到一个隐藏参数
     console.log(arguments); //数组
     console.log(arguments[0]); //获得该事件对象([object MouseEvent])

};

通过上面两组函数中, 我们发现, 通过事件绑定的执行函数是可以得到一个隐藏参数的. 说明浏览器会自动分配一个参数，这个隐藏参数其实就是event对象(事件对象)

获取事件对象

• 通过函数内部的arguments数组对象获取

box.onclick = function(){
     console.log(arguments[0]); //获得该事件对象([object MouseEvent])

};

• 通过给函数添加一个自定义的形参(推荐)

box.onclick = function(e){
     console.log(e);   //[object MouseEvent]
}

event事件兼容问题：
ie不能通过传递的参数来获取，需要用到全局的window.event来获取

兼容代码

box.onclick = function(evt){
     var e= evt || window.event; //获取到event对象(事件对象)
     console.log(e);
};

其中window.event中的window可以省略, 最终我们可以写成:
box.onclick = function(evt){
     var e= evt || event; //获取到event对象(事件对象)
     console.log(e);
};

注意: evt||event不要倒过来写

事件对象属性

button--返回的是鼠标键码(0代表鼠标左键,1代表鼠标滚动,2代表鼠标右键)

• event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），会随页面左右滚动而改变
可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

• event.pageX、event.pageY

浏览器内容区域的x,y坐标, 不会随页面滚动而改变
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标
这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

• event.offsetX、event.offsetY

鼠标相对于事件源元素（srcElement）
的X(左边界),Y（上边界）坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

• event.screenX、event.screenY

事件目标对象target

目标对象,存放绑定事件的元素节点对象

标准事件对象使用 event 的 target 属性获取事件目标event.target
IE 事件对象使用 event 的 srcElement 属性获取事件目标

获取事件目标对象兼容代码写法：

box.onclick = function(evt){
     var e= evt || event; //获取到event对象(事件对象)
     var objEle = eve.target || eve.srcElement;//获取事件目标对象
};

事件对象event：

1.target: 指向事件触发的目标元素对象，第一个事件源
2.currentTarget: 事件处理函数的元素对象，始终与 this 相等;

target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）

在事件里面，this始终指代当前对象 始终是触发事件的事件源 或者是始终是正在执行事件处理函数的事件源

//target等于目标节点对象（点击的元素节点对象）鼠标点了那就是具体的目标节点对象
//currentTarget是随着事件流，永远等于this，
//this等于正在执行事件处理函数的事件的对象
//currentTarget指向当前事件活动的对象(跟this理解是一样)

禁止事件冒泡。

但是一般我们只在指定的节点上添加事件, 而不想让其传递到下层节点触发事件, 这样我们就需要阻止事件冒泡;

阻止事件冒泡有两个方法:
( 在指定不想再继续传递事件的节点的事件执行函数中使用)
1.取消冒泡, IE

 e.cancelBubble = true;

1. 停止传播, 非IE
   e.stopPropagation();

例如:

document.getElementsByTagName('input')[0].onclick= function(evt){
     var e = evt || window.event;
     //可以通过下述两个方法取消事件冒泡
     e.cancelBubble = true || e.stopPropagation();

}

阻止事件的默认行为。

1.return false
//阻止默认的右键菜单

document.oncontextmenu = function(){
      console.log("右键被按下");
      return false;
}

<img src="images/placeholder.png" alt="" width="600" id="img"/>

//第一种：
<a href="images/1.jpg"  onclick="turn1(this);return false;">
    <img src="images/1-small.jpg" alt=""/>
</a>
var imgBox =document.getElementById("img");
function turn1(link){
        imgBox.src = link.href;
}

//第二种：
<a href="images/2.jpg"  onclick="return turn2(this);">
    <img src="images/2-small.jpg" alt=""/>
</a>
function turn2(link){
        imgBox.src = link.href;
        return false;
}

//第三种：
<a href="images/3.jpg" id="link3">
    <img src="images/3-small.jpg"/>
</a>
  var link3=document.getElementById("link3");
 link3.onclick= function () {
        imgBox.src=link3.href;
        return false;
    }

1. 标准事件对象使用 event 的 preventDefault() 方法取消事件默认行为

event.preventDefault(); // 浏览器不会跳转

3.IE 事件对象使用 event 的 returnValue 属性取消事件默认行为，该属性默认值为 true 设置为 false 就可以取消事件默认行为。
event.returnValue = false; // 浏览器不会跳转

兼容代码写法：

function StopDefault(){
    if(window.attachEvent){
      event.returnValue = false;
    }else if(window.addEventListener){
      event.preventDefault();
    }
}

键码 : keyCode属性

所有按键(包括功能键control, alt,shift, tab, 方向键等, 不包括亮度,音量..的按键)在发生 keydown和keyup 事件时，event对象的 keyCode属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符集，keyCode属性的值与 ASCII 码中对应.

document.onkeydown = function(evt) {
      var e = evt || event;
      console.log(e.keyCode);  //按任意键，得到相应的 keyCode
};

注意: 大写字母或小写的编码相同, 都为大写字母。

字符编码: charCode属性

Firefox, Chrome和Safari的event对象支持charCode属性, 只有按下字符键并且使用keypress事件时才会得到charCode, 这个charCode的值和ASCII码对应, 和keyCode也类似, 但是charCode的字母区分大小写. ( 字符键: 数字, 字母(区分大小写), 字符, 空格, 回车 )

document.onkeypress = function(evt) {
      var e = evt || event;
      console.log(e.charCode);
}

注：可以使用 String.fromCharCode()将 ASCII 编码转换成实际的字符