zoukankan      html  css  js  c++  java
  • Html事件、Dom0级事件处理和Dom2级事件处理

    1.在html代码元素中添加事件为Html事件。

    2.使用元素的onclick方法为DOM0级事件处理。

    3.使用事件添加方法为元素添加事件(

    chrome:addEventListener,removeEventListener
    IE:attachEvent,detachEvent 

    )为DOM2级事件处理。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body>
    <div>
    <input type="button" value="按钮" id="btn1" onclick="showMess()"/><!--DDDD-->
    <input type="button" value="按钮2" id="btn2"/>
    <input type="button" value="按钮3" id="btn3"/>
    <script type="text/javascript">
    function showMess()
    {
        alert("html事件");
    }
    var btn2 =document.getElementById("btn2");
    var btn3 =document.getElementById("btn3");
    btn2.onclick=function(){
        alert("Dom0级处理程序");
    }
    btn2.onclick=null;/*btn2为Dom0级事件处理程序*/
    /*var btn3 =document.getElementById("btn3");
    btn3.addEventListener('click',showMess,false);
    btn3.addEventListener('click',function(){
        alert("Dom2级处理程序");
    },false);
    btn3.removeEventListener('click',showMess,false);*/
    /*btn3为Dom2级事件处理程序*/
    
    //如下为添加对象兼容IE,谷歌或只支持Dom0级处理的浏览器
    var eventUnit={
        addEventHandler:function(element,type,handler){
            if(element.addEventListener)
                {
                    element.addEventListener(type,handler,false);
                }
                else if(element.attachEvent)
                {
                    element.attachEvent(type,handler);
                }
                else
                {
                    element['on'+type]=handler;
                }
            }
            ,
            removeEventHandler:function(element,type,handler){
                if(element.removeEventListener)
                {
                    element.removeEventListener(type,handler,false);
                }
                else if(element.detachEvent)
                {
                    element.detachEvent(type,handler);
                }
                else
                {
                    element['on'+type]=null;
                }
            }
        }
    eventUnit.addEventHandler(btn3,'click',showMess);
    </script>
    </div>
    </body>
    </html>
  • 相关阅读:
    spring04
    kepp running 团队视频分析初步总结
    spring03
    第六周学习进度博客
    spring02
    spring初级java 应用。搭建环境。基本语法
    给定一个整数数组 nums 和一个目标值 target,求nums和为target的两个数的下表
    团队项目-运动App
    第五周学习进度博客
    java编写规范
  • 原文地址:https://www.cnblogs.com/ankeyliu/p/6435925.html
Copyright © 2011-2022 走看看