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 > </ 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 当按下键盘的时候。

 

转载于:https://www.cnblogs.com/daysme/p/6369505.html