代码改变世界

20180306 事件监听的方法 添加事件监听和取消事件监听 轮播图

2018-03-06 08:30  王那天  阅读(829)  评论(0)  编辑  收藏  举报

添加事件监听和取消事件监听：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>添加事件监听和取消事件监听</title>
<script type="text/javascript">
    function show(){
        alert("添加了监听事件");
    }
    function cancel(){
        alert("失去焦点");
    }
    function remove(){
        document.getElementById("b").removeEventListener("click",show);
    }
    //当文档加载完成后执行
    window.onload=function(){
        document.getElementById("b").addEventListener("mouseover",show);
        document.getElementById("d").onclick=remove;
    };
    </script>
</head>

<body>
<input type="button" id="b" value="按钮">
<input type="button" id="d" value="取消监听">
<input type="button" value="双击" onClick="show()">
<input type="button" value="移上来" onMouseOver="show()">
<input type="text" value="b" onFocus="show()" onBlur="cancel()">
<input type="text" value="a" onChange="show()" onSelect="cancel()">
</body>
</html>

事件监听的方法：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件的监听方法</title>
</head>

<body>
<a href="http://www.baidu.com" onClick="returnfalse">超链接</a>
<input type="button" value="按钮1" onClick="show1()">
<input type="button" value="按钮2" id="button2">
<script type="text/javascript">
    function show1(){
        alert("这是第一种监听方式：绑定HTML元素属性");
    }
    function show2(){
        alert("这是第二种监听方式:绑定DOM对象属性");
    }
    document.getElementById("button2").onclick=show2;//show2是函数名
    </script>
</body>
</html>

 轮播图：





<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<script type="text/javascript">
    var arr=["./img1/1.jpg","./img1/2.jpg","./img1/3.jpg","./img1/4.jpg","./img1/5.jpg","./img1/6.jpg","./img1/7.jpg"]
    var v=0
    var s=0
    function change(curr){
         v=curr.value;
        var i=document.getElementById("imgage")
        i.src=arr[v];
    }
    function up(){
        if(v==0){
            v=arr.length-1;
        }
        else{
            v--;
        }
        document.getElementById("imgage").src=arr[v];
    }
    function next(){
        if(v==arr.length-1){
            v=0;
        }else{
            v++;
        }
        document.getElementById("imgage").src=arr[v];
    }
    function cancel(){
        clearInterval(s);//清除定时器
    }
    function con(){
        s=setInterval("next()",1000);
    }
    //当文档全部加载完执行的代码
    window.onload=function(){
         s=setInterval("next()",1000);
    
        var i=document.getElementById("imgage");
        i.addEventListener("mouseover",cancel);
        i.addEventListener("mouseout",con);
        
    }
    </script>
</head>

<body>
<img src="./img1/1.jpg" id="imgage">
<input type="button" value="上一张" onClick="up()">
<input type="button" value="0" onClick="change(this)">
<input type="button" value="1" onClick="change(this)">
<input type="button" value="2" onClick="change(this)">
<input type="button" value="3" onClick="change(this)">
<input type="button" value="4" onClick="change(this)">
<input type="button" value="5" onClick="change(this)">
<input type="button" value="6" onClick="change(this)">
<input type="button" value="下一张" onClick="next()">
</body>
</html>






 


 




 


<!doctype html><html><head><meta charset="utf-8"><title>轮播图</title><script type="text/javascript">var arr=["./img1/1.jpg","./img1/2.jpg","./img1/3.jpg","./img1/4.jpg","./img1/5.jpg","./img1/6.jpg","./img1/7.jpg"]var v=0var s=0function change(curr){ v=curr.value;var i=document.getElementById("imgage")i.src=arr[v];}function up(){if(v==0){v=arr.length-1;}else{v--;}document.getElementById("imgage").src=arr[v];}function next(){if(v==arr.length-1){v=0;}else{v++;}document.getElementById("imgage").src=arr[v];}function cancel(){clearInterval(s);//清除定时器}function con(){s=setInterval("next()",1000);}//当文档全部加载完执行的代码window.onload=function(){ s=setInterval("next()",1000);var i=document.getElementById("imgage");i.addEventListener("mouseover",cancel);i.addEventListener("mouseout",con);}</script></head>
<body><img src="./img1/1.jpg" id="imgage"><input type="button" value="上一张" onClick="up()"><input type="button" value="0" onClick="change(this)"><input type="button" value="1" onClick="change(this)"><input type="button" value="2" onClick="change(this)"><input type="button" value="3" onClick="change(this)"><input type="button" value="4" onClick="change(this)"><input type="button" value="5" onClick="change(this)"><input type="button" value="6" onClick="change(this)"><input type="button" value="下一张" onClick="next()"></body></html>