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" οnclick="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.οnclick=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];  // 取到市对应的区 对应寻找// 找到s2var 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. 在标签里直接写属性(οnclick=foo())
                   2. 通过JS给标签绑定事件

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

转载于:https://www.cnblogs.com/112358nizhipeng/p/10210393.html