08.【事件】

某些组件被执行了某些操作后,触发某些代码的执行。

  • 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
  • 事件源:组件。如: 按钮 文本输入框…
  • 监听器:代码。
  • 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。

常见的事件

1. 点击事件

  • onclick:单击事件
  • ondblclick:双击事件

代码:

<body>
    <img id="light" src="img/off.gif" onclick="fun()">
    <script>
        function fun() {
            alert('我TM被点了');
        }    
    </script>
</body>

2. 焦点事件

  • onblur:失去焦点
  • onfocus:元素获得焦点。

3. 加载事件

  • onload:一张页面或一幅图像完成加载。

4. 鼠标事件

  • onmousedown:鼠标按钮被按下。

  • onmouseup:鼠标按键被松开。

  • onmousemove:鼠标被移动。

  • onmouseover:鼠标移到某元素之上。

  • onmouseout:鼠标从某元素移开。【左:0、中:1、右:2】

5. 键盘事件

  • onkeydown:某个键盘按键被按下。

  • onkeyup:某个键盘按键被松开。

  • onkeypress:某个键盘按键被按下并松开。【回车键:keyCode:13】

6. 选择和改变

  • onchange:域的内容被改变。
  • onselect:文本被选中。

7.表单事件

  • onsubmit:确认按钮被点击。
  • onreset:重置按钮被点击。

8. 控制样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制样式</title>

    <style>
        .d1{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }

        .d2{
            border: 1px solid blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="div1">
        div
    </div>

    <div id="div2">
        div
    </div>

    <script>
        var div1 = document.getElementById("div1");
        div1.onclick =  function () {
            // 设置样式方式1
            div1.style.border = "1px solid red";

            div1.style.width = "200px";

            div1.style.backgroundColor = "red";
;
            // font-size ---> fontSize
            div1.style.fontSize = "50px";
        }

        var div2 = document.getElementById("div2");
        div2.onclick =  function () {
            // 设置样式方式2
            div2.className = "d1";
        }
    </script>
</body>
</html>

9. 如何绑定事件

第一种

直接在html标签上,指定事件的属性(操作),属性值就是js代码

  • 事件:onclick— 单击事件
<body>
    <img id="light" src="img/off.gif" onclick="fun()">
    <script>
        function fun() {
            alert('我TM被点了');
        }    
    </script>
</body>

第二种

  • 通过js获取元素对象,指定事件属性,设置一个函数

耦合性较小,便于独立开发。

<body>
    <img id="light2" src="img/off.gif">
    <script>        
        function fun2() {
            alert('呗点我!');

        }
        // 1.获取light2对象
        var light2 = document.getElementById("light2");

        // 2.绑定事件
        light2.onclick = fun2;
    </script>
</body>

案例一:电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
    <img id="light" src="img/off.gif">

    <script >
        var light = document.getElementById("light");

        var  flag = false;

        light.onclick = function() {
            if(flag) {
                light.src = "img/off.gif";
                flag = false;
            } else {
                light.src = "img/on.gif";
                flag = true;
            }
        }
    </script>
</body>
</html>
发布了16 篇原创文章 · 获赞 3 · 访问量 2088
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览