JS事件

强制改变this指向
事件处理函数
事件对象
键盘事件
事件流

强制改变this指向

call

【格式】函数名.call();
参数：
第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数开始：将原函数的参数往后顺延一位

var show = function(x,y){
    alert(this);
  alert(x +','+ y)
}
show.call('this',x,y)

apply

【格式】函数名.apply()
参数：
第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数：数组数组内传入函数内原有参数

var show = function(x,y){
    alert(this);
  alert(x +','+ y)
}
show.apply('this',[x,y])

apply使用的小技巧
Math.max()//传入所有参数中的最大值
Math.min()//传入所有参数中的最小值

var arr = [10,20,30,40,50]
alert(Math.max.apply(null,arr))//输出最大值

bind

预设this指向

var show = (x,y) => {
    alert(this)
  alert(x +','+ y)
}
var res = show.bind('bind')
res(40,50)
show.bind('bind')(40,50)

事件基础
JavaScript事件是由访问web页面的用户引起来的一系列操作。当用户执行某些操作的时候，再去执行一系列代码，或者用来获取事件的详细信息，如鼠标的位置、键盘按键等

事件处理函数

JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。
所有的事件处理函数都会有两个部分组成，on + 事件名称

onclick 鼠标单击

var div = document.getElementById('div')
div.onclick = function() {
    console.log('click')
}

onmouseover 鼠标滑过

var div = document.getElementById('div')
div.onmouseover = function() {
    console.log('onmouseover')
}

onmousedown 鼠标长按（点击）

var div = document.getElementById('div')
div.onmoousedown = function() {
    console.log('onmousedown')
}

onmouseup 鼠标松开长按

var div = document.getElementById('div')
div.onmouseup = function() {
    console.log('onmouseup')
}

onsubmit 表单提交

<from>
  <input type = 'text' />
  <input type = 'submit' value = '提交' />
</from>
var from = document.getElementsByTagName('from')[0]//获取当前第一个from标签
var input = document.getElementsByTagName('input')
from.onsubmit = function() {
    console.log('submit')
  return false
}

onfocus 获得焦点

<from>
  <input type = 'text' />
  <input type = 'submit' value = '提交' />
</from>
var from = document.getElementsByTagName('from')[0]//获取当前第一个from标签
var input = document.getElementsByTagName('input')
input[0].onfocus = function() {
    console.log('onfocus')
}

onblur 失去焦点

<from>
  <input type = 'text' />
  <input type = 'submit' value = '提交' />
</from>
var from = document.getElementsByTagName('from')[0]//获取当前第一个from标签
var input = document.getElementsByTagName('input')
input[0].onblur = function() {
    console.log('onblur')
}

onchange 当前内容改变并失去焦点时触发

onchange 在元素失去焦点时触发。

<from>
  <input type = 'text' />
  <input type = 'submit' value = '提交' />
</from>
var from = document.getElementsByTagName('from')[0]//获取当前第一个from标签
var input = document.getElementsByTagName('input')
input[0].onchange = function() {
    console.log('onchange')//当文本框内的内容发生改变时出发
}

oninput 用户输入内容时出发

该事件类似于 onchange事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。

<from>
  <input type = 'text' />
  <input type = 'submit' value = '提交' />
</from>
var from = document.getElementsByTagName('from')[0]//获取当前第一个from标签
var input = document.getElementsByTagName('input')
input[0].oninput = function() {
    console.log('oninput')//当文本框内的内容发生改变时出发
}

onmoousemove 鼠标移动

<div>
    <span></span>
</div>
var div = document.getElementsByTagName('div')[0];
    var span = div.children[0];
    div.onmousemove = function(e) {
      var evt = e || event;
      var x = evt.offsetX;
      var y = evt.offsetY;
      span.innerHTML = x + ',' + y + 'px';
    }
    div.onmouseout = function() {
      span.innerHTML = ''
    }

onmouseout 鼠标移出

<div>
    <span></span>
</div>
var div = document.getElementsByTagName('div')[0];
    var span = div.children[0];
    div.onmousemove = function(e) {
      var evt = e || event;
      var x = evt.offsetX;
      var y = evt.offsetY;
      span.innerHTML = x + ',' + y + 'px';
    }
    div.onmouseout = function() {
      span.innerHTML = ''
    }

事件对象

当出发某个事件时，会产生一个对象，这个对象包含着所有与事件相关的信息。包括导致事件的元素、事件的类型、以及其他与特定事件相关的信息。
通过事件绑定的执行函数是可以得到一个隐藏参数的。说明，浏览器会自动分配一个参数，这个参数其实就是Event对象。

var div = document.getElementById('div')
div.onclick = function(e) {
    console.log(e);
  console.log(window.event)//IE
  var evt = e || event
  console.log(evt)
}

Event对象获取方式
e.clienX,e.clienY(当前鼠标距离页面(可视区)左边距和顶部的距离), e.pageX,e.pageY（鼠标距离整个页面【整个页面的高度而定】的左边距和也页面顶部的距离）, e.offsetX,e.offsetY(鼠标距离事件源的左边距和顶部的距离)

var div = document.getElementById('div')
div.onclick = function(e) {
    var evt = e || event
  console.log(evt.clienX,evt.clienY)
  console.log(evt.pageX,evt.pageY)
  console.log(evt.offsetX,evt.offsetY)
}

event对象例子

<div>
    <span></span>
</div>
var div = document.getElementsByTagName('div')[0];
    var span = div.children[0];
    div.onmousemove = function(e) {
      var evt = e || event;
      var x = evt.offsetX;
      var y = evt.offsetY;
      span.innerHTML = x + ',' + y + 'px';
    }
    div.onmouseout = function() {
      span.innerHTML = ''
    }

键盘事件

onkeypress 按下字符键触发

document.onkeypress = function() {
    console.log('onkeypress')//按下字符键才触发（f1 f2）非字符键不触发
}

onkeydown 按下任意键触发

document.onkeydown = function() {
    console.log('onkeydown')//按下任意键触发
}

altkey shiftkey ctrlkey 判断是否按下alt shift ctrl 这三个键是则返回true，否则返回false

document.onkeydown = function(e) {
    var evt = e || event
  console.log(evt.altkey,evt.shiftkey,evt.ctrlkey)
  //按下哪个键则哪个输出true
  console.log(evt.keCode    );
}

案列

var div = document.getElementsByTagName('div')[0];
    var input = document.getElementsByTagName('input');
    input[1].onclick = addtext;
    function addtext() {
      //输入框里面输入的值发布到div里
      div.innerHTML += input[0].value;
    }
    input[1].onkeydown = function(e){
      var evt = e || event
      if(evt.ctrlKey && evt.keyCode == 13){//判断是否按下ctrl和enter
        addtext();
      }
    }

事件流

事件流描述的是页面接受事件的顺序
事件流的三个阶段：捕获(从不特定到特定，即从外而内)，目标，冒泡（从特定到不特定，即从内而外）

阻止冒泡

<div><div></div></div>
var div = document.getElementsByTagName('div')
div[0].onclick = function() {
    console.log('1')
}
div[1].onclick = function(e) {
  var evt = e || event
    console.log('2')
  //阻止冒泡
  evt.cancelBubble = true;
  //evt.stopPropagation();//IE
}

事件委托步骤

找到当前父节点或者祖先节点
将事件添加到你找到的这个父节点或者祖先节点上

找到出发对象，判断触发对象是否想要的触发对象，进行后续的操作

<ul>
 <li></li>
<li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>
var ul = document.getElementsByTagName('ul');
var li = ul.getElementsByTagName('li')
//for(var i = 0; i < li.length; i++){
 //li[i].oncilck = function() {
   //console.log(li[i].innerHTML)
//}
//}
//事件委托
ul.onclick = function(e) {
 var evt = e || event
var _target = evt.target || evt.srcElement;
if(_target.nodeName.toUppercase() == 'LI'){
   console.log('_target.innerHTML')
}
}
for(var i = 0; i < 5; i++){
 var li2 = document.createElement('li')
li2.innerHTML = ''
ul.appendChild(li2)
}

事件默认行为

浏览器的默认行为
JavaScript事件本身所具有的属性，例如a标签的跳转，submit按钮的提交，右键菜单，文本框的输入

阻止默认行为的方式

event.preventDefault();event.returnValue = false; return false;

var a = document.getElementsTagName('a')
var form = document.getElementsByTagName('form')
var input = document.getElementsTagName('input')
a.onclick = function(e) {
 var evt = a || event
console.log('a');
return false;
evt.preventDefault();
evt.returnValue = false;
}
form.onsubmit = function() {
console.log('form')
 return false
}
input.onkeydown = function() {
 console.log('input')
return false
}
document.oncontextmenu = function() {
 return false
}

DOM2级事件

DOM2级事件处理程序
添加事件监听器：addEventListener(事件名，处理函数，布尔值)
移除事件监听器：removeEventListener(事件名，处理函数)
IE下的事件监听器: 添加：attachEvent(事件名，处理函数)
移除：detachEvent(事件名，处理函数)

var div = document.getElementsByTagName('div')
var add = function() {
 console.log('add')
}
var remove = function() {
 console.log('remove')
}
div.addEventListener('click',add,false);
div.removeEventListener('mouseover',remove,false)

获取宽高

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

// 部分jQuery函数
$(window).height() 　//浏览器时下窗口可视区域高度
$(document).height()　　　　//浏览器时下窗口文档的高度
$(document.body).height()　　　　　　//浏览器时下窗口文档body的高度
$(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度包括border padding margin
$(window).width() 　//浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width()　　　　　　//浏览器时下窗口文档body的高度
$(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度包括border padding

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量