今天编写了一个下拉框事件，功能是根据用户选择不同省份，另一个下拉框实时更新出省份所在的城市。我编写了一个简单的测试用例后发现，不能简单地通过获取元素的值来进行判断，因为如果写出类似于“var province = document.getElementsById("ps").value”的话是有问题的（selected="select"表示预选项）。
通过查询各种资料，找到了一种解决方法（肯定还有其他方式……），就是：首先获取已经选择的选项下标，下标通常是从0开始，这里就不多赘述了，学过变成的小伙伴肯定都知道，获取下标后还没有完成，我们需要根据下标获取该下标对应选项中的value值，正如以下代码所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/JavaScript">
function province() {
var index = document.getElementById("ps").selectedIndex;
var p = document.getElementById("ps").options[index].value;
var c = document.getElementById("c").options;
console.log(p);
c.length = 0;
c.add(new Option("-请选择-", "-请选择-"));
if (p == "山东省") {
console.log("shandong");
c.add(new Option("济南", "济南"));
c.add(new Option("潍坊", "潍坊"));
}
if (p == "浙江省") {
console.log("zhejiang");
c.add(new Option("杭州", "杭州"));
c.add(new Option("宁波", "宁波"));
}
}
</script>
<body>
<span>省份</span>
<select id="ps" onchange="province()">
<option selected="selected">-请选择-</option>
<option value="山东省">山东省</option>
<option value="浙江省">浙江省</option>
</select>
<span>市区</span>
<select id="c">
<option selected="selected">-请选择-</option>
</select>
</body>
</html>在以上代码的第11行和第12行中，首先获取了id名为“ps”的元素（也就是select）的已选中的选项下标，然后再根据下标获取到该选项的value值，其实可以直接把赋值给变量index的那段表达式直接放到第12行的index的位置，只是因为看起来不明了，所以我在这里分开写了。
总结：
//获取select标签已选中的选项下标
var index = document.getElementsById("<select>标签的id").selectedindex;
//根据选项下标获取对应选项的value值
var selectedvalue = document.getElementsById("<select>标签的id").options[index].value;最后，虽然解决了问题，但是我还是觉得这种写法有些麻烦，所以，有时间会继续寻找更加简洁且高效的写法。
关闭
纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况，最常见的方法当然还是前端框架直接调用，省心省力，不易出错；当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式，给需要的人和给自己做个笔记：实现原理利用CSS伪类:target
React 中阻止事件冒泡的问题
在正式开始前，先来看看 JS 中事件的触发与事件处理器的执行。DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递，到达触发事件的元素后，开始由下往上冒泡。
关于鼠标移动太快导致moseleave事件不触发的问题
我做的是一个table的编辑功能，当移入某行的时候展示编辑状态，在移出某行的时候显示的是原始状态，此时遇到一种情况，就是.当mousenter事件触发之后，由于鼠标移动得太快，同一个tr上绑定的mouseleave事件压根儿就没有执行。
浏览器事件之事件流
事件流描述的是从页面中接收事件的顺序。但是IE和Netscape却提出了两个完全相反的事件流，分别是事件冒泡流和事件捕获流。E的事件流称为事件冒泡，从最具体的元素开始，然后逐渐向上传播到文档节点。
JavaScript 事件
客户端 JavaScript 程序采用了异步事件驱动编程模型、事件不是 JavaScript 对象，不会出现在程序源代码中、事件类型是一个用来说明发生什么类型事件的字符串，有时会称之为事件名字
JS事件冒泡机制以及委托方法,以及vue中的stop
要理解事件冒泡机制，就得先了解事件。浏览器是事件驱动型的，根据用户的行为触发不同的事件，根据事件执行相应的操作。我们较为熟悉的事件有三大类型：鼠标键盘事件、页面事件、表单相关事件。
jquery的on绑定点击事件执行两次的解决办法
jquery中用.on()给页面中新加的元素添加点击事件时，点击事件源，绑定的事件执行两次，这里的alert会执行两次，相应地数组删除也执行两次，具体代码如下
手写事件代理函数
面试是不是听过无数遍呢 !今天我们来手写一个这样的事件委托函数，它是通过事件冒泡机制，即子元素上触发的事件会冒泡到父级上， 即父级也会触发该类型的事件
网页浏览器缩放监听
这里的缩放不是指resize事件（改变浏览器窗口大小），而是指浏览器本身的缩放功能，一般使用以下方式进行缩放：ctrl配合鼠标滚轮；ctrl配合-/+/0进行缩放。
JavaScript 和 Node.js 中的“事件驱动”是什么意思？
事件驱动架构是建立在软件开发中一种通用模式上的，这种模式被称为发布-订阅或观察者模式。在事件驱动架构中，至少有两个参与者：主题（subject）和观察者（observer）。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!