javascript事件处理的三种方式

最新推荐文章于 2022-11-07 23:58:17 发布

summer7310

最新推荐文章于 2022-11-07 23:58:17 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/summer7310/article/details/47976385

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

问题描述：如何实现如下功能

单击输入框时，提示信息消失，输入框背景变黄色，但在浏览器其他地方后输入框显示提示消息

<body>
    <input type="text" id="name" value="请输入名字" >
    <button type="button" id="bt" >提交</button>
</body>

第一种：HTML处理事件

最为普遍，直接在标签加入事件监听

<body>
    <input type="text" id="name" value="请输入名字" οnfοcus="fun(this)" οnblur="fun1(this)" >
    <button type="button" id="bt" >提交</button>
</body>

事件处理代码：

var a = document.getElementById("name");
function fun (x) {
    if(a.value=="请输入名字"){
        a.value="";
        x.style.background="yellow";
    }
}

function fun1(x){
    if(a.value == ""){
        a.value = "请输入名字";
        x.style.background="white";
    }
    x.style.background="white";   
}

第二种：DOM0级事件

使用DOM监听，加载事件

var a = document.getElementById("name");
a.onfocus = function(){
    if(a.value=="请输入名字"){
        a.value="";
        this.style.background="yellow";
    }
}
a.onblur = function(){
    if(a.value == ""){
        a.value = "请输入名字";
        this.style.background="white";
    }
    this.style.background="white";  
}

第三种：DOM2级事件

是使用标准的addEventListener方式和IE私有的attachEvent方式

var a = document.getElementById("name");

if(a.addEventListener){
    a.addEventListener("focus",function(){
        if(a.value=="请输入名字"){
            a.value="";
            this.style.background="yellow";
        }
    })

    a.addEventListener("blur",function(){
        a.value="请输入名字";
        this.style.background="white";
    })
}else{
    a.attachEvent("onfocus",function(){
        if(a.value=="请输入名字"){
            a.value="";
            
        }
    })
    a.attachEvent("onblur",function(){
        a.value="请输入名字";
        
    })
}