javascript 事件处理

最新推荐文章于 2024-07-26 20:46:33 发布

小小玮

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量504

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/dai_jing/article/details/45576413

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

事件处理的多种方式：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
    <script type="text/javascript">

        //跨浏览器的代码
        var EventUtil = {

            addHandler:function(element,type,handler){
                if(element.addEventListener){
                    element.addEventListener(type,handler,false);
                }else if(element.attachEven){
                    element.attachEvent("on"+type,handler);
                }else{
                    element["on"+type]=handler;
                }
            },

            removeHandler:function(element,type,handler){
                if(element.removeEventListener){
                    element.removeEventListener(type,handler,false);
                }else if(element.detachEvent){
                    element.detachEvent("on"+type,handler);
                }else{
                    element["on"+type] = null;
                }
            }
        }

        //等待document对象加载完成
        window.onload = function(){
                var btn = document.getElementById("btn");
                //添加事件处理程序
//                btn.addEventListener("click",btnClick2,false);
//
//                btn.addEventListener("click",btnClick3,false);
//
//                //移除事件处理程序
//                btn.removeEventListener("click",btnClick2,false);

            //添加事件处理程序
//            btn.onclick = btnClick1;

            //添加事件处理程序
            EventUtil.addHandler(btn,"click",btnClick2);
            //移除事件处理程序
            EventUtil.removeHandler(btn,"click",btnClick2);

        }

        //定义事件处理程序
        function btnClick1(){
            window.alert("btn click1");
        }

        function btnClick2(){
            window.alert("btn Click2");
        }

        function btnClick3(){
            window.alert("btn Click3");
        }


    </script>
</head>

<body>
<input type="button" value="btn" id="btn" οnclick="btnClick1()"/>
</body>
</html>

一个函数处理多个事件，用到事件对象：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
    <script type="text/javascript">

        //等待document对象加载完成
        window.onload = function(){
            var btn = document.getElementById("btn");
            btn.onclick = btnEventHandler;
            btn.οnmοuseup=btnEventHandler;
            btn.onmousedown = btnEventHandler;
            btn.onmouseout = btnEventHandler;
            btn.onmouseover = btnEventHandler;

        }

        //定义事件处理程序,一个函数处理多个事件
        var btnEventHandler = function (event){
            switch(event.type){
                case "click":{
                    window.alert(click);
                    break;
                }
                case "mouseup":{
                    window.alert("mouseup");
                    break;
                }
                case "mousedown":{
                   window.alert("mousedown");
                    break;
                }
                case "mouserover":{
                    window.alert("mouseover");
                    break;
                }
                case "mouseout":{
                    window.alert("mouseout");
                    break;
                }
                default :break;
            }
        }

    </script>
</head>

<body>
<input type="button" value="btn" id="btn" />
</body>
</html>

小小玮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 事件处理

//跨浏览器的代码 var EventUtil = { addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,fals
复制链接

扫一扫

专栏目录