js函数事件对象

  每个函数都有4个默认对象

    arguments 保存着实际传入的参数，集合列表

    return 有两个功能，打断函数和返回函数值

    this 谁调用的函数，this就是谁

    event 事件对象

事件

  box.onlick=function(){}

  表示点击 box 触发了一个函数。

  事件包含三点：

    1 谁触发的

    2 触发了什么事件

    3 触发的事件执行了什么动作

  焦点事件： 使浏览器能区分用户输入的对象。

    当一个元素有焦点的时候可以接受用户输入。

    不是所有元素都有焦点，能响应用户输入的才有焦点。

    onfocus 当元素获得焦点时。

    onblur 当元素失去焦点时。

  文本域的空白符会被识别。

  选中： obj.select();

  obj 文本域 textarea ，支持 select ,但比如 p 标签不支持。

事件对象 event 对象

  当一个事件发生的时候和当前事件发生有关的详细信息，都会被临时保存在一个指定的地方。

  event 对象，供我们需要时调用。像飞机的黑匣子。

  当在页面上发生了某事件的时候，会被事件对象记录。

window.onclick=function(e){

console.log(e) //MouseEvent {isTrusted: true…}

}

  事件对象的兼容处理

  e=event||window.event;

  ie/谷歌中： event 是一个内置的全局对象。

  标准下： 事件对象是通过事件函数的第一个参数传入的。

window.onclick=function(e,f){

//var f;

console.log(f) //undefined

}

  没有事件发生：输出 undefined

console.log(window.event) //undefined

console.log(event) //undefined

  形式参数和实际参数

  形式参数：

    相当于在函数内定义一个局部变量。

  如果一个函数是被事件调用的，这个函数定义的第一个参数就是事件对象。 arguments[0] 实际参数的第一个值。

window.onclick=function(e){

console.log(arguments[0]) //MouseEvent {isTrusted: true, screenX: 1027…}

}

  没有事件调用时： fn(1,2) 输出3

function fn(a,b){

console.log(a+b) //3

}

fn(1,2)

  有事件调用时： 还是输出3

function fn(a,b){

console.log(this) //window

//

console.log(a+b) //3

}

window.onclick=function(){

fn(1,2) //3

}

  clientX: number

  clientY: number

  当一件事件发生的时候，鼠标到页面的可视距离

  onmousemove 当鼠标移动的时候

  当鼠标在一个元素上移动的时候触发。触发频率不是像素，而是时间间隔。

  在一个指定的时间内，如果鼠标位置和上次的位置发生变化，就会触发。

  onmousedown 鼠标按下。

  onmouseup 鼠标抬起。

  onclick 是按下再抬起。

  onmouseover 是鼠标移上时触发的事件。

  onmouseout 是鼠标移出的时候触发事情。

事件冒泡

  当一个元素接收到事件的时候，会把接收的所有传递父级。一直到顶层的 window 对象。

<div id="d1">

<div id="d2">

<div id="d3"></div>

</div>

  点击d3时会把事件传到d2、d1。如果大家都有点击事件时，点击d3，会相当于全部都点击了。

  如果d1、d2没有点击事件时，其实点击事件也是冒泡到其身上的，只是没有执行。

  阻止事件冒泡：

e.stopPropagation() //常用方式，标准浏览器。不支持ie

e.cancelBubble=true; //不支持ie

return false //不支持ie

window.cancelBubble=true; //谷歌、ie

  阻止事件冒泡兼容

e=event||window.event;

e.cancelBubble=true;

e.stopPropagation();

  例如：

box.onclick=function(ev){

var e=ev||window.event;

alert("我是box2");

e.cancelBubble=true;

e.stopPropagation();

}

默认事件

  浏览器本身会存在一些默认事件，比如鼠标右键的菜单。

  阻止默认事件：

  如果不阻止，点击鼠标右键时首先会弹出1，再弹右键菜单。

  阻止后不弹出右键菜单。

document.oncontextmenu=function(ev){

var e=ev||window.event;

e.returnValue=false; //ie中

e.preventDefault();

alert(1)

}

键盘事件

  onkeydow 当按下键盘的时候。