码迷,mamicode.com
首页 > 其他好文 > 详细

事件处理

时间:2016-06-25 21:44:42      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:

事件处理
    一、事件源:任何一个HTML元素(节点) body,div,button,p,a...
    二、事件:你的操作
        鼠标:
            click    单机
            dbclick    双击
            textcontentmenu (在body)文本菜单
            mouseover 放上
            mouseout    离开
            mousedown    按下
            mouseup    抬起
            mousemove    移动
        键盘:
            keypress    键盘事件 数字字母键才能触发
            keyup    抬起 
            keydown    按下
        文档:
            load    加载:页面加载完后触发
            unload    关闭
            beforeunload    关闭之前
        表单:
            focus    焦点
            blur    失去焦点
            submit    提交事件
            change    改变
        其他:
            scroll    滚动事件
            selected    事件
            。。。
    三、事件处理程序
    
有三种方式添加事件
    第一种:
        格式:<tag on事件="事件处理程序" />
    第二种:
        <script>
            对象.on事件=事件处理程序
        </script>
    第三种:(不常用)
        <script for="事件源" event="事件">事件处理程序</script>
技术分享
<html>
    <head>
    
    </head>
    
    <body>
        <!--<div id="one" onclick="show()">-->
        <div id="one" onmouseover="show(this,‘red‘)" onmouseout="show(this,‘blue‘)" onclick="show(this,‘yellow‘)">
        wwwwwww
        </div>
        <!--
        <script>
        var one=document.getElementById("one");
        one.onclick=function(){
            this.style.background="red";
        }
            function show(){
                alert(document.getElementById("one").innerText);
            }
            
        </script>
        -->
        <!--
        <script for="one" event="onclick">//IE支持,火符不支持
            var one=document.getElementById("one");
            one.style.backgroundColor="yellow";
        </script>
        -->
        <script>
            function show(obj,col){
                obj.style.backgroundColor=col;
            }
        </script>
    </body>
</html>
View Code
技术分享
<html>
    <head>
        <div id="one">
            #########
        </div>
    </head>
    
    <!--<body oncontextmenu="alert(‘11‘); return false;">如果想要右键后不出现菜单,在后面加上return false,这个可以用来做表单验证-->
    
    <!--<body oncontextmenu="test()">这样可以达到前面的效果吗?不可以,因为这样相当于直接contextmenu=false -->
    
    <!--<body oncontextmenu="return test()">-->
    <body onload="test()" onunload="leave()" onbeforeunload="beforeleave()">
    <script>
        function test(){
        var one=document.getElementById("one");
            alert(one.innerText);
            return false;
        }
        function leave(){
            alert("离开");
        }
        function beforeleave(){
            event.returnValue="你小心点";
        }
    </script>
    
    </body>
</html>
View Code

 

事件处理

标签:

原文地址:http://www.cnblogs.com/aigeileshei/p/5616921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!