事件定义

通过用户，或者数据模拟触发全局或者局部发生一些可见或者不可见的变动；

常见事件

1.鼠标事件

    onclick点击事件
    oncontextmenu用户点击鼠标右键上下文菜单时触发.
    ondblclick双击事件
    onmouserenter鼠标移动到元素时触发
    onmouseover 鼠标移入事件（支持事件冒泡|内部元素触发）
    onmouseleave当鼠标移除元素时触发(内部元素不触发)
    onmouseout鼠标从某元素移开(支持事件冒泡|内部元素触发 )
    onmousemove鼠标移动
    onmousedown  鼠标按下事件
    onmouseup鼠标按键松开


2.键盘事件

    onkeydown某个键盘按键被按下
    onkeypress某个键盘按键被按下并松开
    onkeyup某个键盘按键被松开

3.框架对象（frame/object）事件

    onabort图像加载被中断
    onbefireunload该事件在即将离开页面（刷新或关闭）时触发
    onerror加载文档或图像时发生错误（<object>,<body>,<framest>）
    onhashchange该事件在当前URL的锚部分发生修改时触发
    onload页面或者图片加载完成时
    onpageshow该事件在用户访问页面触发
    onresize窗口或框架被重新调整大小
    onscroll当文档滚动式发生的事件
    onunload用户退出页面（<body><frameset>）

4.表单事件

    onblur元素失去焦点时触发
    onchange该事件在表单元内容改变时触发（<input>,<keygen>,<select>,<textarea>）
    onfocus元素获取焦点时触发
    onfocusin元素即将获取焦点时触发
    onfocusout元素即将失去焦点时触发
    oninput元素获取用户时触发
    onsearch向搜索域输入文本时触发(<input="search">)
    onreset表单重置时触发
    onselect用户选取文本时触发（<input><textarea>）
    onsubmit表单提交时触发

5.剪贴板事件

    oncopy在用户拷贝元素内容时触发
    oncut在用户剪切元素内容时触发
    onpaste在用户粘贴元素内容时触发

6.打印事件

    onafterprint该事件在页面已经开始打印，或者答应窗口已经关闭时触发
    onbeforeprint该事件在页面即将开始打印时触发

7拖动事件

    ondrap在元素正在拖动时触发
    ondragend在元素完成拖动时触发
    ondragenter在元素拖动进入放置目标
    ondragleave在拖动元素离开放置目标上时触发
    ondragover在拖动元素在放置目标上时触法
    ondragstart在用户开始拖动元素时触发
    ondrop拖动元素放置在目标区域时触发

8.媒体事件（略过）

9.动画事件

    animationend在css动画结束播放时触发
    animationiteration在css动画重复播放时触发
    animationstart在css动画开始时触发

10.过渡事件

    transitionend在css完成过度后触发

11.其他事件（浏览器事件等。。。）

常见绑定方法

1.dom行内添加事件

    <divonclick="show()"></div

2.dom.onclick=fun

    dom.onclick=function(){};

3.IE5+/windows绑定事件

    dom.attachEvent("onclick",fun)

4.W3cDom事件监听addEventListenner

    dom.addEventListenner("click",fun)

事件对象

事件对象在过程中通常以参数形式传入函数中,如下代码中函数传入的e便是次事件对象：

document.getElementById("box").addEventListenner("click",function(e){
        
    })

1.对象获取

        <buttonid="btn">点击</button>
    <script>
        varbtn=document.getElementById("btn");
        btn.addEventListener("click",function(e){
            vareve=e||window.event;
            console.log(eve);
        })
    </script

2.对象属性

    a).bubbles--判断事件是否属于起泡事件，如果是返回true，否则返回false

        1).捕获阶段
        2).自身触发阶段
        3).冒泡阶段

    b).cancelable--返回布尔值，是否可取消默认动作
    c).currentTarget--返回事件监事件的元素（事件节点）
    d).target--返回触发事件的元素（点击节点）
    
3.方法

    a).iniEvent()初始化新创建的Event对象属性
    b).preventDefault()不执行默认动作
    c).stopPropagation()不再派发时间(阻止冒泡)

鼠标键盘事件对象

1.属性(精简)

    altKey返回当事件被触发时alt是否被按下
    ctrlKey同上ctrl
    shiftKey同上shift
    button返回事件被触发是，哪个鼠标按键被点击
    clientX返回事件触发时鼠标指针的水平坐标(相对于页面)
    clientY返回事件触发时鼠标指针的垂直坐标(相对于页面)
    key返回键盘事件的按键值(按的什么返回什么)
    keyCode返回键盘事件按键的字符代码(常用)
    which同上(兼容不同浏览器可同时使用)
    relatedTarget返回鼠标移入移出事件触发时与目标结点间切换的节点
    screenX返回事件触发时鼠标指针的水平坐标(相对于屏幕)
    screenY返回事件触发时鼠标指针的垂直坐标(相对于屏幕)

dom事件对象

dom事件对象

事件定义

常见事件

常见绑定方法

事件对象

鼠标键盘事件对象

推荐阅读更多精彩内容