HTML 14 JS事件
一 ：什么是事件
发生的某一件事；触发特定的条件，完成某一项功能
二：学习的目的
在特定的条件下，完成特定的功能
条件满足的情况下，系统会自动执行 ( 回调 ) 绑定的方法
学习要点：
1、事件的两种绑定方式 ***
2、事件event *****
3、冒泡和默认事件 *****
4、鼠标事件 *****
5、键盘事件 ***
6、表单事件 ***
7、文档事件 *
8、图片事件 *
9、页面滚动事件 *****
三：
事件的两种绑定方式：
// on // 非on
1、on事件绑定
当有两个 div 只打印 " 点击2 " ，原因,只能绑定最后一个方法
解绑的方法：
div.onclick = null;
2、非on事件的绑定
存在重复绑定
事件解绑的方法：
div.removeEventListener('click', fn) // 注:绑定与移除需要指向同一个方法(地址)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>事件的两种绑定方式</title>
</head>
<body>
<div class="div">12345</div>
</body>
<script type="text/javascript">
var div = document.querySelector('.div');
// on事件
div.onclick = function () {
console.log("点击1");
}
div.onclick = function () {
console.log("点击2");
}
// 只打印"点击2",原因,只能绑定最后一个方法 // 事件的移除
div.onclick = null; // 非on事件的绑定 *
// addEventListener('事件名', 回调函数, 冒泡方式)
div.addEventListener('click', function() {
console.log("点击1");
}); var fn = function() {
console.log("点击2");
}
div.addEventListener('click', fn);
// 存在重复绑定 // 事件的移除
// removeEventListener('事件名', 回调函数名)
div.removeEventListener('click', fn)
// 注:绑定与移除需要指向同一个方法(地址) </script>
</html>
事件的两种绑定方式
冒泡和默认事件：
冒泡：父子级拥有同一的事件，在子级区域触发子级事件，父级也能捕获并响应
点击传过来的是：MouseEvent，存储着鼠标触发事件的一系列信息
默认：默认事件: 取消默认的事件动作，如鼠标右键菜单
父级取消了默认事件，子级都被取消掉了
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>冒泡和默认事件</title>
<style type="text/css">
.sub {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
.sup {
width: 200px;
height: 200px;
background-color: orange;
position: relative;
/*position: absolute;
top: 50px;
left: 100px;*/
margin: 50px auto;
}
body {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="sup">
<div class="sub"></div>
</div>
</body>
<script type="text/javascript">
var sub = document.querySelector('.sub');
var sup = document.querySelector('.sup');
var body = document.querySelector('body'); // 冒泡: 父子级拥有同一的事件,在子级区域触发子级事件,父级也能捕获并响应
sub.onclick = function (ev) {
ev.stopPropagation();
console.log("sub click");
}
sup.onclick = function (ev) {
ev.cancelBubble = true;
console.log("sup click");
}
body.onclick = function (ev) {
// 事件的兼容
// ev = ev | event; // 点击传过来的是 MouseEvent,存储着鼠标触发事件的一系列信息
console.log(ev);
console.log("body click");
} // 默认事件: 鼠标右键 oncontextmenu
sub.oncontextmenu = function (ev) {
// ev.preventDefault();
console.log("sub menu click");
} // 父级取消了默认事件,子级都被取消掉了
body.oncontextmenu = function (ev) {
console.log("body menu click");
return false;
} </script>
</html>
冒泡和默认事件
鼠标事件
学习要点：事件参数 event （存放事件信息的回调参数）
onclick：鼠标点击
ondblclick：鼠标双击
onmousedown：鼠标按下
onmousemove：鼠标移动
onmouseup：鼠标抬起
onmouseenter（or）onmouseover：鼠标悬浮
onmouseout （or）onmouseleave：鼠标移开
oncontextmenu：鼠标右键
注：有些事件会相互冲突，可以一个一个来试验
鼠标事件ev反馈的鼠标点
1 移动： ev.clientX | ev.clientY 相对于页面原点（左上角）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style type="text/css">
.div {
width: 200px;
height: 200px;
background-color: orange;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
<script type="text/javascript">
var div = document.querySelector('.div'); // 单击
div.onlick = function () {
console.log("双击了");
} // 双击
div.ondblclick = function () {
console.log("双击了");
} // 鼠标按下
div.onmousedown = function () {
console.log("按下");
} // 鼠标移动
div.onmousemove = function (ev) {
// 鼠标在页面中的位置
console.log("x的坐标:", ev.clientX);
console.log("y的坐标:", ev.clientY);
console.log("移动");
} // 鼠标抬起
div.onmouseup = function () {
console.log("抬起");
} //悬浮
div.onmosueover = function () {
console.log("悬浮");
} //移开
div.onmouseout = function () {
console.log("移开");
} //右键
div.oncontextmenu = function () {
console.log("右键");
} </script>
</html>
鼠标事件
键盘事件
onkeydown：键盘按下
onkeyup：键盘抬起
1）事件参数ev
1 ev.keyCode：按键编号 // 37(左) 38(上) 39(右) 40(下)
2 ev.altkey：alt特殊按键 // 18
3 ev.ctrlkey：ctrl特殊按键 // 17
4 ev.shiftkey：shift特殊按键 // 16
// 自定义按键（比如说ctrl + c 和 ctrl + v 复制粘贴等）：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<style type="text/css">
.div {
width: 200px;
height: 200px;
background-color: yellow;
/*margin: 50px auto;*/
/*定位来做键盘移动方式*/
position: absolute;
top: 0;
left: 100px;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
<script type="text/javascript">
var div = document.querySelector('.div');
// 操作一般标签，键盘事件绑定给文档 document
// 表单标签（可以录入文本），键盘事件绑定给表单标签
document.onkeydown = function(ev) {
// 当在页面点击方向或特殊按键时会在控制台显示对应的数字
// console.log(ev.keyCode);
//移动
switch(ev.keyCode) {
// offsetLeft 盒模型 结合绝对定位来使用 获取之前的距左距离
case 37:
console.log("左");
div.style.left = div.offsetLeft - 3 + "px";
break;
case 38:
console.log("上");
div.style.top = div.offsetTop - 3 + "px";
break;
case 39:
console.log("右");
div.style.left = div.offsetLeft + 3 + "px";
break;
case 40:
console.log("下");
div.style.top = div.offsetTop + 3 + "px";
break;
}
}
</script>
</html>
键盘事件
HTML 14 JS事件的更多相关文章
- 2016.02.14 总结JS事件
今天主要总结JS事件的基本知识以及使用技巧,并作出相应的DEMO.
- js事件监听器用法实例详解-注册与注销监听封装
本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...
- js事件监听机制(事件捕获)
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- 原生js事件绑定
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresiz ...
- dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- 什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
- js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
随机推荐
- __declspec(dllexport)
__declspec(dllexport) (2010-06-17 10:04:28) 转载▼ 标签: __declspec dllexport 导出 it 分类: C 先看代码:以下是在dev-c+ ...
- 一个ROS的服务，使机器人向前移动指定距离
源代码有点长,放文末链接里了. 服务描述及代码现在的服务是:请求时携带要前进的距离,然后底盘前进相应距离.代码如下,改动很小: #!/usr/bin/env python import rospyfr ...
- SpringBoot启动报jdbc连接池错误
如图,启动报连接池错误 项目中没有使用任何连接池,以为没用连接池的原因,所以配置了druid,一开始可以正常启动,但后来重启项目时仍旧报同样的错.网上找了资料,url中加useSSL=false,显式 ...
- Ubuntu 18.04 nvidia driver 390.48 安装 TensorFlow 1.12.0 和 PyTorch 1.0.0 详细教程
最近要在个人台式机上搭建TensorFlow和PyTorch运行环境,期间遇到了一些问题.这里就把解决的过程记录下来,同时也可以作为安装上述环境的过程记录. 如果没有遇到类似的问题,想直接从零安装上述 ...
- models中字段参数blank和null的用法区别
blank当blank=True时,说明此处的数据可以不填,默认情况下为False,也就意味着默认情况下,所输入的数据不得空,blank是和页面表单有关,在页面需要输入参数的时候,如果在models里 ...
- mysql登录出现1045错误
这个问题是在window server 2012上安装mysql之后, 远程访问时出现的1045错误 我新建了一个相同的用户用于远程访问, 密码也相同, 但是还是访问不了 参照链接:https://b ...
- C#学习笔记_11_方法的隐藏和重写
11_方法的隐藏和重写 方法的隐藏 需要使用到关键字:new 方法的重写 虚函数: 使用关键字virtual修饰的函数 虚函数可以被子类隐藏,也可以被子类重写 非虚函数只能被子类隐藏 关键字:over ...
- Git：分支的创建、合并、管理和删除
了解分支 如果想实现多人协作.划出Bug区.Feature区等功能,就需要分支功能.(确实很强大的地方) 每次commit时,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条 ...
- nyoj_60_谁获得了最高奖学金_201311281117
谁获得了最高奖学金 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取 ...
- 洛谷 P1586 四方定理
P1586 四方定理 题目描述 四方定理是众所周知的:任意一个正整数nn,可以分解为不超过四个整数的平方和.例如:25=1^{2}+2^{2}+2^{2}+4^{2}25=12+22+2 ...