JavaScript基础事件（6）

day53

参考：https://www.cnblogs.com/liwenzhou/p/8011504.html#autoid-2-3-8

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

常用事件

onclick        当用户点击某个对象时调用的事件句柄。

ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框

onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

关于this

绑定方式：

方式一：

<div id="d1" onclick="changeColor(this);">点我</div>

<script>

  function changeColor(ths) {

    ths.style.backgroundColor="green";

  }

</script>

注意：

this是实参，表示触发事件的当前元素。

函数定义过程中的ths为形参。

方式二：

<div id="d2">点我</div>

<script>

  var divEle2 = document.getElementById("d2");

  divEle2.onclick=function () {

    this.innerText="呵呵";

  }

</script>

举例：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>class相关操作</title>

    <style>

        .c1 {

            height: 200px;

            width: 200px;

            border-radius: 50%;

            background-color: grey;

        }

        .c2 {

            background-color: yellow;

        }

    </style>

</head>

<body>

<!--点击执行change函数-->

<div class="c1 c2 c3" onclick="change(this);">div</div>

<div class="c1 c2 c3">div</div>

<div class="c1 c2 c3">div</div>

<div class="c1 c2 c3">div</div>

<script>

    function change(ths) {

        ths.classList.toggle("c2");//有c2去掉c2变灰，没有c2变黄

    }

//    第二种绑定事件的方式，批量处理用第二种

    var divEles = document.getElementsByTagName("div"); //div标签有多个，找所有div标签

    for (var i=0;i<divEles.length;i++){

        divEles[i].onclick=function () {

            this.classList.toggle("c2");//指向被点标签

        }

    }

</script>

</body>

</html>

通过class名去改变样式，ths.classList.toggle("c2");

效果：

第一种方法处理比较繁琐，第二种方法可以批量处理某一类标签。

搜索框示例

onfocus、onblur

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>搜索框示例</title>

</head>

<body>

<input type="text" id="i1" value="对子哈特">

<input type="button" value="搜索">

<script>

    // 找到input框

    var i1Ele = document.getElementById("i1");//找input

    i1Ele.onfocus=function () { //匿名函数

        // 把value清空

        this.value="";

    };

    i1Ele.onblur=function () {

        // 失去焦点之后把如果值为空就填回去

        if (!this.value.trim()){

            this.value="对子哈特";

        }

    }

</script>

</body>

</html>

效果：

输入框中写了默认值，若直接直接搜索则按默认值搜索，点击输入框则默认值消失。

06select联动示例

onchange

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>select联动示例</title>

</head>

<body>

<select id="s1">

    <option value="0">--请选择--</option>

    <option value="1">北京</option>

    <option value="2">上海</option>

</select>

<select id="s2"></select>

<script>

    var data = {1: ["昌平区", "朝阳区", "海淀区"], 2: ["静安区", "闵行区", "浦东区"]};

    // 给第一个select绑定事件,绑定的是onchange事件

    var s1Ele = document.getElementById("s1");//获得id s1的值

    s1Ele.onchange = function () {

        // 取到你选的是哪一个市

        console.log(this.value); //获得s1的值

        // 把对应市的区填到第二个select框里面

        var areas = data[this.value];  // 取到市对应的区 对应寻找

        // 找到s2

        var s2Ele = document.getElementById("s2");

        // 清空之前的

        s2Ele.innerHTML="";//这种方式清除

        // 生成option标签

        for (var i = 0; i < areas.length; i++) {

            var opEle = document.createElement("option");//生成option元素

            opEle.innerText = areas[i];

            // 添加到select内部

            s2Ele.appendChild(opEle);

        }

    }

</script>

</body>

</html>

效果：

选择了s1中的内容，马上在s2中跳出对应于s1的选项内容。

事件
               1. 常用事件
                   1. onclick
                   2. ondbclick

                   3. onfocus
                   4. onblur

                   5.onchange

               2. 绑定事件的方式
                   1. 在标签里直接写属性(onclick=foo())
                   2. 通过JS给标签绑定事件

               3. this --> 代表的是触发事件的当前标签