zoukankan html css js c++ java

HTML之事件处理程序

HTML事件

<body>
    <input type="button" value="按钮1" id="but1" onclick="click()">
    <script type="text/javascript">
    function click(){
        alert(this.value+"被点击了");
    }
</script>
</body>

DOM0级事件

<body>
    <input type="button" value="按钮1" id="but1">
    <script type="text/javascript">
    function click(){
        alert(this.value+"被点击了");
    }
    var but1 = document.getElementById("but1");
    but1.onclick = click;//添加
    but1.onclick = null;//移除
</script>
</body>

DOM2级事件

<body>
    <input type="button" value="按钮1" id="but1">
    <script type="text/javascript">
    function click(){
        alert(this.value+"被点击了");
    }
    var but1 = document.getElementById("but1");
    but1.addEventListener("click", click, false);//添加,参数false表示事件冒泡流,true表示捕获流
    but1.removeEventListener("click", click, false);//移除
</script>
</body>

IE8-版本事件

<body>
    <input type="button" value="按钮1" id="but1">
    <script type="text/javascript">
    function click(){
        alert(this.value+"被点击了");
    }
    var but1 = document.getElementById("but1");
    but1.attachEvent("onclick", click);//添加,没有参数false或true,是因为IE8以及更早的浏览器只支持事件冒泡流,
    but1.detachEvent("onclick", click);//移除
</script>
</body>

兼容写法

<body>
    <input type="button" value="按钮1" id="but1">
    <script type="text/javascript">
    function myClick(){
        alert(this.value+"被点击了");
    }
    var but1 = document.getElementById("but1");
   var eventUtil = {//封装事件处理程序
        addEvent:function(ele,type,fun){
            if(ele.addEventListener){
                ele.addEventListener(type, fun, false);
            }else if(ele.attachEvent){
                ele.attachEvent('on'+type, fun);
            }else{
                ele['on'+type] = fun;
            }
        },
        removeEvent:function(ele,type,fun){
            if(ele.removeEventListener){
                ele.addEventListener(type, fun, false);
            }else if(ele.detachEvent){
                ele.detachEvent('on'+type, fun);
            }else{
                ele['on'+type] = null;
            }
        }
    }
    eventUtil.addEvent(but1,'click',myClick);
</script>
</body>

查看全文

相关阅读:
matlab画图-在同一图像中显示多个函数
 matlab简单作图2
matlab简单作图
 c++ this指针概念
 c++ 静态成员
 C++ 类对象作为类成员
 （C++核心编程）初始化列表
 （C++核心编程）点和圆的关系
 （C++核心编程）设计立方体类
 （python基础函数）

原文地址：https://www.cnblogs.com/caoruiy/p/4501868.html