当前位置：首页 > article >正文

JS-06-事件监听

article 2024/11/29 7:23:07

事件监听

当鼠标进行操作的时候能够对网页页面进行操作。

事件绑定

常见事件

onload: 当某个页面或者元素加载完成之后执行指定的代码块

onclick:鼠标单机的时候就执行指定的代码块

onblur\onfocus:鼠标点击的时候光标在的地方就是获得焦点否则失去焦点

onkeydown:绑定键盘的某个按键当按下某个按键的时候就会触发事件

onmouseover：鼠标移动到元素之上会触发

onmouseout:鼠标移出某个元素

onsubmit:表单提交之后执行代码块

案例

将上篇文章的控制操作使用点击事件进行完成。

//方法一

<body>
        <img src="imgjs/off.gif" id="img0" onclick="img_on()"><br><br>
        <div class="cls">北京方恒时尚中心</div> <br>
        <div class="cls">天津陆家嘴金融广场</div> <br>
        <input type="checkbox" name="hobby" > 看电影
        <input type="checkbox" name="hobby" > play games
        <input type="checkbox" name="hobby" > 旅行
</body>
<script>
    // 事件监听 绑定
    // 方式一
    //onclick 鼠标点击 
    let flag_img = false;
    function img_on(){
        var img_ = document.getElementById('img0');
        if(flag_img == false ){
            img_.src = "imgjs/on.gif";
            flag_img = true;
        }else{
            img_.src = "imgjs/off.gif";
            flag_img = false;
        }
    };

注意定义好函数以后，在调用的时候必须functionName+'()'，不然不会运行。

//方式二

 // 方式二
    document.getElementById('img0').onclick = function img_on() {
        if(flag_img == false ){
            document.getElementById('img0').src = "imgjs/on.gif";
            flag_img = true;
        }else{
            document.getElementById('img0').src = "imgjs/off.gif";
            flag_img = false;
        }
    }

其他的是一样的可以试试。

查看全文

http://www.kler.cn/a/413878.html