事宜

事宜的观点

事宜就是文档或浏览器窗口中发作的一些特定的交互霎时【触发与响应】
事宜触发：用户在页面上操纵(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框取得核心, 落空核心等)

事宜触发递次

捕捉–目的–冒泡

• 事宜流
  事宜流是形貌的从页面接收事宜的递次，当几个都具有事宜的元素层叠在一起的时刻， 那末你点击个中一个元素，并非只要当前被点击的元素会触发事宜，而层叠在你点击局限的一切元素都邑触发事宜。事宜流包括两种形式：冒泡和捕捉。
• 事宜冒泡
  事宜冒泡是从里往外逐一触发. 事宜捕捉, 是从外往里逐一触发. 当代的浏览器默许情况下都是事宜冒泡的形式.

经常运用的事宜范例

‘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 编码转换成现实的字符