javascript 中select框触发事件过程的分析

2024-09-28 21:43:51

javascript 中select框触发事件过程的分析

我们书写了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件绑定到了select上面，模拟客户选择相关事件的触发流程：

最后发现，触发的过程基本上一样，如果没有选择或者选择的是当前显示的option的话，不会触发change事件，只有在选择不同的option时候才会触发change事件。下面是选择了不同的option后触发事件的截图：

我们可以发现，做出改变了可以触发input事件和change事件，而如果没有改变或者下拉出现了直接点击别的地方，则不会促发这两个事件：

附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<select name="" id="input">
  <option value="1">1</option>
  <option value="">2</option>
  <option value="">3</option>
  <option value="">4</option>
  <option value="">5</option>
</select>
</body>
<script>
  document.getElementById("input").addEventListener("focus",function () {
    console.log("focus");
  }); 

  document.getElementById("input").addEventListener("mousedown",function () {
    console.log("mousedown");
  }); 

  document.getElementById("input").addEventListener("mouseup",function () {
    console.log("mouseup");
  }); 

  document.getElementById("input").addEventListener("input",function () {
    console.log("input");
  }); 

  document.getElementById("input").addEventListener("change",function () {
    console.log("change");
  }); 

  document.getElementById("input").addEventListener("blur",function () {
    console.log("blur");
  }); 

  document.getElementById("input").addEventListener("click",function () {
    console.log("click");
  }); 

  document.getElementById("input").addEventListener("keydown",function () {
    console.log("keydown");
  }); 

  document.getElementById("input").addEventListener("keyup",function () {
    console.log("keyup");
  }); 

  document.getElementById("input").addEventListener("select",function () {
    console.log("select");
  }); 

</script>
</html>

以上就是javascript 中select框触发事件过程的分析，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

AngularJS service之select下拉菜单效果

本文实例为大家分享了service之select下拉菜单效果的具体代码,供大家参考,具体内容如下  <!DOCTYPE html> <html lang="en" ng-app="myApp" ng-controller="myCtrl"> <head> <meta charset="utf-8"> <
JavaScript实现向select下拉框中添加和删除元素的方法

本文实例讲述了JavaScript实现向select下拉框中添加和删除元素的方法.分享给大家供大家参考,具体如下: 1.说明 a. 利用append()方法向下拉框中添加元素 b. 利用remove()方法移除下拉框中最后一个元素 2.实例源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
JavaScript实现的select点菜功能示例

本文实例讲述了JavaScript实现的select点菜功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>点菜</title> <style type="text/css"> select{ width:120px; } &l
Javascript操作dom对象之select全面解析

html代码: <select id="university"> <option value="北京大学">北京大学</option> <option value="清华大学">清华大学</option> <option value="北京电影学院">北京电影学院</option> </select> js原生操作 1.获取sele
JavaScript获取select中text值的方法

本文实例讲述了JavaScript获取select中text值的方法.分享给大家供大家参考,具体如下: 别的不说,先看代码: 方法一: <select name="parent_id" onchange="setTitleAndLinkByGoodsCategory(this.value,this.options[this.selectedIndex].text);" > <option value="0">请选择商品分类
JavaScript实现两个select下拉框选项左移右移

今天没事用js写了一个用两个select下拉框之间能互相移动元素的小程序,刚刚才开始学javascript还有很多优化的地方. Javascript代码 <script type="text/javascript"> /**选中的元素向右移动**/ function moveRight() { //得到第一个select对象 var selectElement = document.getElementById("first"); var optionE
javascript 中select框触发事件过程的分析

javascript 中select框触发事件过程的分析我们书写了mousedown,mouseup,click,input,change,focus,blur,keydowm,keydown事件绑定到了select上面,模拟客户选择相关事件的触发流程: 最后发现,触发的过程基本上一样,如果没有选择或者选择的是当前显示的option的话,不会触发change事件,只有在选择不同的option时候才会触发change事件.下面是选择了不同的option后触发事件的截图: 我们可以发现,做出改变了
JavaScript中BOM,DOM和事件的用法详解

目录 BOM 概念对象组成 Window:窗口对象 Location:地址栏对象 History:历史记录对象 DOM 概念 W3C DOM 标准被分为 3 个不同的部分核心DOM模型 HTML DOM 事件监听机制概念常见的事件事件简单学习 BOM 概念 BOM全称Browser Object Model浏览器对象模型,将浏览器的各个组成部分封装成对象. 对象组成 Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Lo
jsp中select的onchange事件用法实例

本文实例讲述了jsp中select的onchange事件用法.分享给大家供大家参考,具体如下: <script language = "JavaScript"> var onecount; onecount=0; subcat = new Array(); <% int count = 0; java.sql.ResultSet rs1 = DBManage.executeQuery("select hydm,zhydm,zhymc from zhy &qu
jquery实现勾选复选框触发事件给input赋值

代码如下: 复制代码代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery点击复选框触发事件给input赋值-柯乐义</title><base target="_blank" /> <style type="text/css"> * { marg
JavaScript中DOM操作常用事件总结

目录常用事件演示得到焦点和失去焦点演示鼠标划过和离开点击事件 load加载页面事件 onkeyup 键盘弹起事件内容变化事件选中时触发上一篇聊了如何同JavaScript获得页面元素,而获得页面元素的的目的就是操作这个元素的一行为,而这个行为是通过某个条件进行触发的.而这个一系列在JavaScript中称之为事件. 由此可以看出事件分三个部分: 事件源头: 也就是要操作的元素是谁. 事件类型: 也就是事件触发条件,比如鼠标点击以及鼠标滑过等. 事件处理: 如果触发了这个行为,如何
JavaScript中ES6 Babel正确安装过程

本文介绍Babel6.x的安装过程~首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行环境,针对Babel6.x版本) 1.首先安装babel-cli(用于在终端使用babel) npm install -g babel-cli 2.然后安装babel-preset-es2015插件 npm install --save babel-preset-es2015 注:Babel5版本默认包含各种转换插件,然而Babel6.x相
JavaScript中new运算符的实现过程解析

这篇文章主要介绍了JavaScript中new运算符的实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下废话不多说直接进入正题,首先我们需要先知道new运算符到底做了哪些事情,再来模拟它实现这一功能. 1. 建立一个空的Object对象: 2. 把这个空对象用__proto__链接到原型 3. 用apply绑定对象的this指向 4. 返回新的对象知道了new的具体过程之后,我们就可以来试一下用代码实现这一过程. // 传参 New
详解Golang中select的使用与源码分析

目录背景 select 流程背景 golang 中主推 channel 通信.单个 channel 的通信可以通过一个goroutine往 channel 发数据,另外一个从channel取数据进行.这是阻塞的,因为要想顺利执行完这个步骤,需要 channel 准备好才行,准备好的条件如下: 1.发送缓存有空间(如果是有缓存的 channel) 有等待接收的 goroutine 2.接收缓存有数据(如果是有缓存的 channel) 有等待发送的 goroutine 对channel实际使
Javascript中的几种继承方式对比分析

开篇从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究过javascript的继承方式,故特撰此文以供交流. 为何需要利用javascript实现
javascript中select下拉框的用法总结

本文针对开发项目中遇到的问题,进行了汇总问题1:如何选择select的option里面的值? 首先会用到一个方法 onchange():这个方法主要用于触发,选择框内容改变时间实现代码: <!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <select onchange="

javascript 中select框触发事件过程的分析

相关推荐

随机推荐