美文网首页
dom事件对象

dom事件对象

作者: 凭添一笔惨淡 | 来源:发表于2016-07-24 14:47 被阅读0次

事件定义

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

常见事件

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事件对象与IE事件对象

    DOM 事件处理对象 IE事件对象 注意: DOM中事件处理对象中的 event.currentTarget 与 ...

  • JavaScript事件03——事件对象

    大纲:事件对象(DOM中的事件对象,IE中的事件对象,跨浏览器) 一、事件对象 什么是事件对象? 在触发DOM上的...

  • 原生事件对象

    事件对象: 每当触发事件时,就会产生一个事件对象(不管是DOM 0 还是DOM2 都有事件对象)[ 事件对象操作的...

  • 事件对象

    什么是事件对象?在触发DOM上的事件时都会产生一个对象 事件对象event DOM中的事件对象 (1) type属...

  • DOM事件(二)

    一、 事件对象 1.1 DOM中的事件对象 在触发DOM上的某个事件时,会产生一个事件对象event: event...

  • Dom事件

    基本概念 Dom事件级别 Dom事件模型 Dom事件流 描述Dom事件捕获的具体流程 Event对象的常见应用 自...

  • 网易微专业-DOM编程艺术 05 事件

    1、DOM事件⑴主要内容▪事件流▪事件注册▪事件对象▪事件分类▪事件代理 ⑵什么是DOM事件▪点击一个DOM元素▪...

  • DOM事件类

    基本概念:DOM事件的级别 DOM事件模型 DOM事件流 描述DOM事件捕获的具体流 Event对象的常见应用 自...

  • DOM事件

    DOM事件的级别 DOM事件模型 DOM事件流 描述DOM时间捕获的具体流程 Event对象的常见应用 自定义事件...

  • 深入理解DOM事件机制

    前言 本文主要介绍: DOM事件级别 DOM事件流 DOM事件模型 事件代理 Event对象常见的方法和属性 一、...

网友评论

      本文标题:dom事件对象

      本文链接:https://www.haomeiwen.com/subject/ogzwjttx.html