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;

停止传播, 非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;
    }

标准事件对象使用 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 编码转换成实际的字符

JavaScript 事件简介

事件

事件的概念

事件触发顺序

常用的事件类型

事件的三要素：

事件的书写位置：

注册事件的方式：

移除事件

事件对象(event)

获取事件对象

事件对象属性

事件目标对象target

禁止事件冒泡。

阻止事件的默认行为。

键码 : keyCode属性

字符编码: charCode属性

Twait

引用和评论

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具