事件的监听

<style>
    #d1{width: 200px;height: 200px;background: red;}
    #d2{width: 200px;height: 200px;background: yellow;display: none;}
    
    </style>
<script type="text/javascript">
    //绑定html元素方式
    function test1(){
        alert("这是绑定html元素的方式");
    }
    //绑定dom的方式
    function test2(){
        alert("这是绑定dom的方式");
    }
    //添加一个页面加载完成执行
    window.onload=function(){
        //获取按钮来执行test2函数
        var button=document.getElementById("test2");
        //给按钮添加监听
        button.onclick=test2;
    }
    
    /*更换*/
    
    function over(){
        //获取id为d2的元素
        var d2=document.getElementById("d2");
        //设置d2的元素显示
        d2.style.display="block";
    }
    function out(){
        //获取id为d2的元素
        var d2=document.getElementById("d2");
        //设置d2的元素显示
        d2.style.display="none";
    }
    </script>
    
</head>

<body>
<a href="https://www.baidu.com/" >点击我</a>
<input type="button" value="测试1" id="mytest1"  onClick="test1()">
<button type="button" id="test2"><b>测试2</b></button>


<div id="d1" onMouseOver="over()" onMouseOut="out()"></div>
<div id="d2"></div>
</body>

这是最普通的一个点击出现下拉滑块。

其中比较常用的事件是

常见的事件类型:

onclick

单击鼠标左键触发

ondblclick

双击鼠标左键触发

onmousedown

单击任意一个鼠标按键时触发

onmouseout

鼠标指针移出一个元素边界时触发

onmousemove

鼠标在某个元素上移动时持续触发

onmouseup

松开鼠标任意一个按键时触发

onmouseover

鼠标指针移到一个元素上时触发

常用的键盘事件:

onkeydown

按下键盘上某个按键时触发,一直按会持续触发

onkeyup

释放某个按键时触发

onkeypress

按下某个按键并产生字符时触发,忽略shift等功能键

HTML事件:

onload

页面完全加载后在window对象上触发  window.onload=function(){

}页面加载完成的常用语句

onunload

页面完全卸载后再window对象上触发

onselect

选择了文本框的一个或多个字符时触发

onchange

文本框失去焦点时,并且在它获取焦点后内容发生过改变时触发

onsubmit

单击“提交”按钮时在表单form上触发

onfocus

任何元素或窗口获得焦点时触发  当鼠标移入表单

onblur

任何元素或窗口失去焦点时触发 当鼠标移出表单

猜你喜欢

转载自www.cnblogs.com/a199706/p/11185161.html
0条评论
添加一条新回复