首页 > 代码库 > javascript基础——鼠标事件,系统对话框等
javascript基础——鼠标事件,系统对话框等
1、鼠标事件
(1)、onclick:用户点击鼠标左键,以及当焦点在一个按钮上时,用户按Enter键时,发生onclick事件
(2)、ondblclick:用户双击鼠标左键时,发生ondblclick事件
(3)、onmousedown:用户按下任意鼠标按钮的时候,发生onmousedown事件
(4)、onmouseout:当光标在一个元素上,并且用户将其移出元素边界时,发生onmouseout事件
(5)、onmouseover:当光标在一个元素之外,并且用户将移动到该元素上时,发生onmouseover事件
(6)、onmouseup:当用户释放任何鼠标按钮时,发生onmouseup事件
(7)、onmousemove:当光标在一个元素上时,重复发生onmousemove事件
2、系统对话框
(1)、警告框:alert();
例如:alert("wrong!");
默认只有一个确定按钮
(2)、确认框:confirm();
例如:confirm("Are you sure?");
默认有两个按钮,分别是"确认"和"取消"
(3)、提示框:prompt();
除"确认"和"取消"外,还有文本框
3、事件封装:有的时候需要重复使用段代码如document.getElementById()的时候,可以用事件封装来
实现调用以使编码简便快捷
如:function $(id){
return document.getElementById(id);
}
在下面的函数中使用到document.getElementById()的时候直接写成$("id名")即可
4、事件监听:
此处的click不能写为onclick
(2)、IE8及以下版本:document.attachEvent()
5、取得下拉列表的内容:
<selece id="s1">
<option value=http://www.mamicode.com/"10">10
<option value=http://www.mamicode.com/"20">20
<option value=http://www.mamicode.com/"30">30
</select>
在script元素中写:var a = document.getElementById("s1").value;即可得到下拉列表中选择的内容。
6、取得复选框的内容:
<input type="checkbox" id="d1" value=http://www.mamicode.com/"音乐"/>
<input type="checkbox" id="d2" value=http://www.mamicode.com/"体育"/>
在script元素中写:var a = document.getElementById("d1").check;
if(a==true) var b = document.getElementById("d1").value;
b的内容即为复选框的内容
(1)、onclick:用户点击鼠标左键,以及当焦点在一个按钮上时,用户按Enter键时,发生onclick事件
(2)、ondblclick:用户双击鼠标左键时,发生ondblclick事件
(3)、onmousedown:用户按下任意鼠标按钮的时候,发生onmousedown事件
(4)、onmouseout:当光标在一个元素上,并且用户将其移出元素边界时,发生onmouseout事件
(5)、onmouseover:当光标在一个元素之外,并且用户将移动到该元素上时,发生onmouseover事件
(6)、onmouseup:当用户释放任何鼠标按钮时,发生onmouseup事件
(7)、onmousemove:当光标在一个元素上时,重复发生onmousemove事件
2、系统对话框
(1)、警告框:alert();
例如:alert("wrong!");
默认只有一个确定按钮
(2)、确认框:confirm();
例如:confirm("Are you sure?");
默认有两个按钮,分别是"确认"和"取消"
(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=http://www.mamicode.com/"10">10
<option value=http://www.mamicode.com/"20">20
<option value=http://www.mamicode.com/"30">30
</select>
在script元素中写:var a = document.getElementById("s1").value;即可得到下拉列表中选择的内容。
6、取得复选框的内容:
<input type="checkbox" id="d1" value=http://www.mamicode.com/"音乐"/>
<input type="checkbox" id="d2" value=http://www.mamicode.com/"体育"/>
在script元素中写:var a = document.getElementById("d1").check;
if(a==true) var b = document.getElementById("d1").value;
b的内容即为复选框的内容
javascript基础——鼠标事件,系统对话框等
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。