美文网首页
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事件对象

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