combox控件触发事件

DOM事件

1. DOM事件

事件三要素：事件源、事件、事件驱动程序

事件源，也就是需要操作的对象，例如：var box = document.getElementById("box");
事件，例如：onclick、onmouseenter等，例如：box.onclick = function() { 程序 };
事件驱动程序，就是接下来我们将要要学习的关于DOM的操作，例如：this.innerHTML = "我是一个div盒子";

1.1 单击事件

| 事件 | 描述 | | :---: | :---: | | onclick | 鼠标点击某个对象 |

实例：给文档中的 id="box" 元素添加点击事件。

<script>window.onload = function () {var obj = document.getElementById("box");obj.onclick = function () {alert("单击事件");}}
</script>

我们也可以给元素直接添加点击事件。

<body><div onclick="testClick()">点击我</div><script>function testClick() {alert("单击事件");}</script>
</body>

1.2 双击事件

| 事件 | 描述 | | :---: | :---: | | ondblclick | 鼠标双击某个对象 |

实例：给文档中的 id="btn" 元素添加点击事件。

<body><div id="btn">双击事件</div><script>var btn = document.getElementById("btn");btn.ondblclick = function () {console.log("双击事件");};</script>
</body>

注意：如果对同一个元素添加单击事件和双击事件，需要我们自己手动区分！

1.3 焦点事件

| 事件 | 描述 | | :---: | :---: | | onfocus | 元素获得焦点时触发 | | onblur | 元素失去焦点时触发 |

实例：给文档中的id="uName"元素添加点击事件。

<body><input id="uName" type="text"><script>var input = document.getElementById("uName");input.onfocus = function () {console.log("获取焦点");};input.onblur = function () {console.log("失去焦点");}</script>
</body>

1.4 改变事件

| 事件 | 描述 | | :---: | :---: | | onchange | 域的内容被改变触发，用于input、select和textarea标签。 |

实例：给文档中的<select>和<input>元素添加改变事件。

<body>
故乡：<select name="city" id="city"><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option><option value="4">武汉</option></select>
密码：<input id="password" type="password" placeholder="请输入密码">
<script>var city = document.getElementById("city");city.onchange = function () {console.log("选中的城市：" + this.value);};var password = document.getElementById("password");password.onchange = function () {console.log("选中的城市：" + this.value);};
</script>

1.5 鼠标事件

当鼠标指针穿过元素时，会发生 onmouseenter 事件。该事件大多数时候会与 onmouseleave 事件一起使用。onmouseover 事件和 onmouseout 事件一起使用。

与 onmouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 onmouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 onmouseover 事件。

实例：给文档中的id="box"元素添加鼠标事件。

<body><div id="box"></div><script>window.onload = function () {var box = document.getElementById("box");// 鼠标进入box.onmouseenter = function () {console.log("鼠标进入");};// 鼠标移动box.onmousemove = function () {console.log("鼠标移动");};// 鼠标按下box.onmousedown = function () {console.log("鼠标按下");};// 鼠标抬起box.onmouseup = function () {console.log("鼠标抬起");};// 鼠标离开box.onmouseleave = function () {console.log("鼠标离开");}}</script>
</body>

1.6 键盘事件

| 事件 | 描述 | | :---: | :---: | | onkeydown | 键盘按钮按下 | | onkeyup | 键盘按钮弹起 |

实例：给文档中的id="box"元素添加鼠标事件。

<body>
<script>document.body.onkeydown = function () {console.log("键盘按钮按下");};document.body.onkeyup = function () {console.log("键盘按钮弹起");}
</script>
</body>

2. event事件对象

2.1 event属性

当前事件源，它的值一定是this（event.currentTarget == this）; 事件触发源，它的值为不一定是this（event.target ?== this）。

2.2 event方法

2.2.1 阻止事件冒泡

防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

| 方法 | 事件 | | :---: | :---: | | event.stopPropagation() | 任意事件 |

实例：阻止文档中 id="child" 的元素事件派发。

<body><div id="parent"><div id="child"></div></div><script>var parent = document.getElementById("parent");var child = document.getElementById("child");child.onclick = function (event) {console.log("child -- 子类被触发");// 阻止事件派发event.stopPropagation();};parent.onclick = function () {console.log("parent -- 父类被触发");}</script>
</body>

2.2.2 取消事件默认行为

| 方法 | 描述 | 事件 | | :---: | :---: | :---: | | preventDefault() | 取消事件的默认动作。 | 任意事件 |

事件冒泡：是因为事件会按照DOM的层次结构像水泡一样不多向上直至顶端。

实例：阻止文档中 id="link" 元素的默认行为。

<body><a id="link" href="http://www.baidu.com">百度一下，你就知道</a><script>var link = document.getElementById("link");link.onclick = function (event) {// 阻止默认行为event.preventDefault();};</script>
</body>

3.DOM事件案例

3.1 下拉更换背景图片

知识要点：改变事件 + CSS样式操作

3.1 天猫切换商品图片

知识要点：鼠标进入事件 + CSS样式操作 + 闭包

3.2 小蜜蜂飞呀飞

知识要点：鼠标移动事件 + CSS样式操作