javascript基金会——鼠标事件,系统对话框,等等。
2023-09-14 09:10:17 时间
1、鼠标事件
(1)、onclick:用户点击鼠标左键,并且当焦点处于button准时,按用户Enter关键,发生onclick事件
(2)、ondblclick:当用户双击鼠标左键。发生ondblclick
(3)、onmousedown:用户按下随意鼠标button的时候,发生onmousedown事件
(4)、onmouseout:当光标在一个元素上。而且用户将其移出元素边界时,发生onmouseout事件
(5)、onmouseover:当光标在一个元素之外,而且用户将移动到该元素上时,发生onmouseover事件
(6)、onmouseup:当用户释放不论什么鼠标button时,发生onmouseup事件
(7)、onmousemove:当光标在一个元素上时。反复发生onmousemove事件
2、系统对话框
(1)、警告框:alert();
比如:alert("wrong!");
默认仅仅有一个确定button
(2)、确认框:confirm();
比如:confirm("Are you sure?
此处的click不能写为onclick
(2)、IE8及下面版本号:document.attachEvent()
5、取得下拉列表的内容:
<selece id="s1">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
在script元素中写:var a = document.getElementById("s1").value;就可以得到下拉列表中选择的内容。
6、取得复选框的内容:
<input type="checkbox" id="d1" value="音乐"/>
<input type="checkbox" id="d2" value="体育"/>
在script元素中写:var a = document.getElementById("d1").check;
if(a==true) var b = document.getElementById("d1").value;
b内容为内容复选框
(1)、onclick:用户点击鼠标左键,并且当焦点处于button准时,按用户Enter关键,发生onclick事件
(2)、ondblclick:当用户双击鼠标左键。发生ondblclick
(3)、onmousedown:用户按下随意鼠标button的时候,发生onmousedown事件
(4)、onmouseout:当光标在一个元素上。而且用户将其移出元素边界时,发生onmouseout事件
(5)、onmouseover:当光标在一个元素之外,而且用户将移动到该元素上时,发生onmouseover事件
(6)、onmouseup:当用户释放不论什么鼠标button时,发生onmouseup事件
(7)、onmousemove:当光标在一个元素上时。反复发生onmousemove事件
2、系统对话框
(1)、警告框:alert();
比如:alert("wrong!");
默认仅仅有一个确定button
(2)、确认框:confirm();
比如:confirm("Are you sure?
");
默认有两个button,各自是"确认"和"取消"
(3)、提示框:prompt();
除"确认"和"取消"外。还有文本框
3、事件封装:有的时候须要反复使用段代码如document.getElementById()的时候,能够用事件封装来
实现调用以使编码简便快捷
如:function $(id){
return document.getElementById(id);
}
在以下的函数中使用到document.getElementById()的时候直接写成$("id名")就可以
4、事件监听:
(1)、IE8及以上版本号:document.addEventListener("事件名称(如click,前面不能加on)",函数名,bCapture(true表示处理程序在捕获阶段,false则表示在冒泡阶段));
如:document.addEventListener("click",function (){document.getElementById("id名").style.display="none";})
此处为鼠标点击的时候,对应id名的标签显示被设为none;此处的click不能写为onclick
(2)、IE8及下面版本号:document.attachEvent()
5、取得下拉列表的内容:
<selece id="s1">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
在script元素中写:var a = document.getElementById("s1").value;就可以得到下拉列表中选择的内容。
6、取得复选框的内容:
<input type="checkbox" id="d1" value="音乐"/>
<input type="checkbox" id="d2" value="体育"/>
在script元素中写:var a = document.getElementById("d1").check;
if(a==true) var b = document.getElementById("d1").value;
b内容为内容复选框
版权声明:本文博客原创文章。博客,未经同意,不得转载。
相关文章
- 【JavaScript】事件
- 从八道面试题看JavaScript DOM事件机制
- Javascript中escape()、unescape()、encodeURI()、encodeURIComponent()、decodeURI()、decodeURIComponent()比较
- 深入理解javascript事件
- 探索客户端JavaScript
- 第一百三十六节,JavaScript,封装库--事件绑定
- 第一百二十一节,JavaScript事件绑定及深入
- Javascript获取地址栏参数值
- [Javascript] Window.matchMedia()
- [Javascript] JavaScript Array Methods in Depth - push
- 分享JavaScript获取网页关闭与取消关闭的事件
- [Javascript] Objects and Functions
- [Cypress] install, configure, and script Cypress for JavaScript web applications -- part5
- [Javascript] How to deal with floating number
- [Javascript] Functor Basic Intro
- javascript函数
- JavaScript 异步执行的学习笔记 - 什么是事件循环 Event loop?
- Angular input控件的click事件表达式如何被转换成JavaScript函数
- 从零开始学_JavaScript_系列(十一)——dojo(5)(GRID表格进阶:更新值,name,重置表结构/缓存,重绘表格)
- 从零开始学_JavaScript_系列(十一)——dojo(4)(GRID表格进阶:格式化、style、数据获取、多重排序、点击事件)
- javascript 获取焦点和失去焦点事件
- JS与ES6高级编程学习笔记(三)——JavaScript面向对象编程
- JavaScript实现禁用键盘和鼠标的点击事件
- JavaScript如何定义数组。
- 【前端领域高频笔试面试】—— JavaScript高级相关
- 开源?Highcharts JS 10.3.2 | Highcharts Javascript