js事件入门（2）
2.鼠标事件
鼠标事件就是用户与页面的许多交互时通过鼠标移动或者鼠标点击等触发的事件.
2.1.onmousedown
鼠标按下的时候触发的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标按下事件发生后，弹出一个1
oDiv.onmousedown = function(){
//这里弹出一个1就是事件发生后对应的操作
alert(1);
}
}
</script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
2.2.onmouseup 鼠标抬起事件
当鼠标按下后 抬起的时候发生的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标抬起事件发生后，打印出一个2
oDiv.onmouseup = function(){
//这里打印出一个2就是事件发生后对应的操作
console.log(2);
}
}
</script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
2.3.onmousemove 鼠标移动事件
当鼠标移动的时候发生
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标移动事件发生后，打印出3
oDiv.onmousemove = function(){
//这里打印出一个3就是事件发生后对应的操作
console.log(3);
}
}
</script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
2.4.onmouseover 鼠标移入事件
当鼠标移入的时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标移入事件发生后，打印出4
oDiv.onmouseover = function(){
//这里打印出一个4就是事件发生后对应的操作
console.log(4);
}
}
</script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
注意：这里的代码虽然和鼠标移动事件差不多，但是产生的效果不一样，鼠标移入div 只打印出1个值
鼠标在div上移动的话 会打印出n个值
2.5.onmouseout 鼠标移出事件
当鼠标移出对象的时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标移出事件发生后，打印出5
oDiv.onmouseout = function(){
//这里打印出一个5就是事件发生后对应的操作
console.log(5);
}
}
</script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
2.6.onclick 鼠标单击事件
当鼠标单击的时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标按下事件发生后，打印出6
oDiv.onclick = function(){
//这里打印出一个6就是事件发生后对应的操作
console.log(6);
}
}
</script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
2.7.ondblclick 鼠标双击事件
当鼠标双击的时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标双击事件发生后，打印出一个7
oDiv.ondblclick = function(){
//这里打印出一个1就是事件发生后对应的操作
console.log(7);
}
}
</script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
2.8.综合实例1
综合实例1代码实现:
//具体样式没有实现，js部分只是实现其移入移出效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap{
width: 200px;
margin: 0 auto;
}
#wrap a{
text-decoration: none;
}
ul{
margin-top: 10px;
padding: 0;
border: 1px solid #ccc;
display: none;
}
ul li{
list-style: none;
height: 35px;
line-height: 35px;
}
ul li:nth-of-type(3),ul li:nth-of-type(6){
border-bottom: 1px solid #999;
}
ul li:nth-of-type(7){
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function(){
//找到box和list对象
var oBox = document.getElementById("wrap");
var oList = document.getElementById('list');
oBox.onmouseover = function(){
//鼠标移入显示
oList.style.display = "block";
}
oBox.onmouseout = function(){
//鼠标移出消失
oList.style.display = "none";
}
}
</script>
</head>
<body>
<div id="wrap">
<a href="">个人中心</a>
<ul id="list">
<li>@我的</li>
<li>评论</li>
<li>赞</li>
<li>私信</li>
<li>未关注人私信</li>
<li>群通知</li>
<li>消息设置</li>
</ul>
</div>
</body>
</html>
螺钉课堂视频课程地址：http://edu.nodeing.com
js事件入门（2）的更多相关文章
- js事件入门（6）
7.事件冒泡机制 7.1.什么是事件冒泡 当一个元素接收到一个事件以后,会将事件传播给它的父级元素,它的负级元素会一层一层往上传播,直到最顶层window,这种事件传播机制叫作事件冒泡. <!D ...
- js事件入门（5）
5.窗口事件 5.1.onload事件 元素加载完成时触发,常用的就是window.onload window.onload = function(){ //等页面加载完成时执行这里的代码 } 5.1 ...
- js事件入门（4）
4.表单事件 表单事件处理主要用来验证表单,可以处理用户在表单上所做的任何操作. 4.1.onsubmit事件 当用户点击submit按钮来提交表单时,就会触发onsubmit事件,如果事件处理程序返 ...
- js事件入门（3）
3.键盘事件 3.1.onkeydown 键盘按下事件 当键盘按下的时候触发 <!DOCTYPE html> <html> <head> <meta char ...
- js事件入门（1）
1.事件相关概念 1.1 什么是事件? 事件是用户在访问页面时执行的操作,也就是用户访问页面时的行为.当浏览器探测到一个事件时,比如鼠标点击或者按键.它可以触发与这个事件相关的JavaScript对象 ...
- Node.js快速入门
Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...
- 第一百一十九节，JavaScript事件入门
JavaScript事件入门 学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...
- Node.js开发入门—HelloWorld再分析
在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld站点,这次我们再来细致分析下代码.了解很多其它的细节. 先看看http版本号的HelloWorld代码: 代码就是这 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
随机推荐
- C#中的TemplateMethod模式
一个真实的故事 大学的时候就开过一门课程,讲设计模式,可是大学生没什么编程实践经验,在大学里面听设计模式的感觉,就像听天书.听着都有道理,可是完全领会不到其中的奥妙,大抵原因就在于没有走过弯路,没有吃 ...
- link和@import引入css的区别
@import是在CSS2.1提出的,低版本的浏览器不支持.link支持良好: link引用CSS时,在页面载入时同时加载: @import需要页面网页完全载入以后加载.如果页面内容过多,会产生不好的 ...
- Java实现 LeetCode 783 二叉搜索树节点最小距离（遍历）
783. 二叉搜索树节点最小距离 给定一个二叉搜索树的根节点 root,返回树中任意两节点的差的最小值. 示例: 输入: root = [4,2,6,1,3,null,null] 输出: 1 解释: ...
- Java实现 LeetCode 449 序列化和反序列化二叉搜索树
449. 序列化和反序列化二叉搜索树 序列化是将数据结构或对象转换为一系列位的过程,以便它可以存储在文件或内存缓冲区中,或通过网络连接链路传输,以便稍后在同一个或另一个计算机环境中重建. 设计一个算法 ...
- Java实现有向图强连通分量的Tarjan算法
1 问题描述 引用自百度百科: 如果两个顶点可以相互通达,则称两个顶点强连通(strongly connected).如果有向图G的每两个顶点都强连通,称G是一个强连通图.有向图的极大强连通子图,称为 ...
- java实现第九届蓝桥杯全排列
全排列 对于某个串,比如:"1234",求它的所有全排列. 并且要求这些全排列一定要按照字母的升序排列. 对于"1234",应该输出(一共4!=24行): 12 ...
- electron内使用vue-slider-component组件报“$attrs is readonly”错误
解决办法 安装vue-no-ssr插件 https://www.npmjs.com/package/vue-no-ssr npm install vue-no-ssr --save-dev 代码 &l ...
- Fiddler13模拟弱网络环境测试
前言现在的Android软件,基本上都会有网络请求,有些APP需要频繁的传输数据时对于网络请求的稳定性和在特殊网络条件下的兼容性有要求,但是我们在测试的时候又很难模拟那种弱网络差网络的情况,今天就给大 ...
- 汇编指令mov、add、sub、jmp
mov:寄存器,数据 mov:寄存器,寄存器 mov:寄存器,内存单元 mov:段寄存器,内存单元 mov:内存单元,寄存器 mov:内存单元,段寄存器 mov:段寄存器,寄存器 mov:寄存器,段寄 ...
- 温故知新-Mysql索引结构&页&聚集索引&非聚集索
文章目录 摘要 索引 索引概述 索引优势劣势 索引结构 BTREE 结构 B+TREE 结构 页 索引分类 索引语法 索引设计原则 聚触索引 & 非聚触索引 你的鼓励也是我创作的动力 Post ...