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 ...
随机推荐
- （转）Java任务调度框架Quartz入门教程指南（四）Quartz任务调度框架之触发器精讲SimpleTrigger和CronTrigger、最详细的Cron表达式范例
http://blog.csdn.net/zixiao217/article/details/53075009 Quartz的主要接口类是Schedule.Job.Trigger,而触发器Trigge ...
- 如何将本地项目上传到gitlab上？
git push后需要输入用户名,密码 这是上传成功显示的页面 打开gitLab项目地址检查代码是否被正确上传 上传前: 上传后 这就完成将项目上传到gitlab了
- Shell脚本备份数据库
使用crontab 定时备份数据库 1. 编辑crontab 规则,定时执行脚本 2. 在my.cnf 文件中加 [mysqldump] user=root password=密码 3.编写shell ...
- 面向对象：__getitem__、__setitem__、__delitem__
item系列 class Person(object): def __init__(self, name): self.name = name def __getitem__(self, item): ...
- Django基础配置
安装djangopip install Django==1.11.4进入pythonimport django查看版本号django.get_version()创建项目,在合适位置创建一个目录进入你要 ...
- Django-cookie与session操作
添加cookie: def login(req): if req.method=="POST": uf = UserInfoForm(req.POST) if uf.is_vali ...
- 7-15 QQ帐户的申请与登陆
7-15 QQ帐户的申请与登陆(25 分) 实现QQ新帐户申请和老帐户登陆的简化版功能.最大挑战是:据说现在的QQ号码已经有10位数了. 输入格式: 输入首先给出一个正整数N(≤105),随后给 ...
- Go语言基础介绍
Go是一个开源的编程语言.Go语言被设计成一门应用于搭载Web服务器,存储集群或类似用途的巨型中央服务器的系统编程语言.目前,Go最新发布版本为1.10. Go语言可以运行在Linux.FreeBSD ...
- keras与sklearn的结合使用
keras与sklearn的结合使用 新建 模板 Fly Time: 2017-4-14 引言 代码 引言 众所周知,keras目前没有提供交叉验证的功能,我们要向使用交叉验证,就需要与sklearn ...
- [RxJS] exhaustMap vs switchMap vs concatMap
exhaustMap: It drop the outter observable, just return the inner observable, and it waits until prev ...