事件处理

Posted guoDaXia的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件处理相关的知识,希望对你有一定的参考价值。

事件处理
    一、事件源:任何一个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

 

以上是关于事件处理的主要内容,如果未能解决你的问题,请参考以下文章

如何处理片段上的触摸事件?

处理Fragment类ListView的按钮事件?

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup )(代码片段

C# 中 XBOX 控制器的事件处理程序?

处理recyclerview单击片段而不是持有者类

将通知设置为在某个用户事件时触发