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 ...
随机推荐
- Spring Boot项目中使用 TrueLicense 生成和验证License（服务器许可）
一 简介 License,即版权许可证,一般用于收费软件给付费用户提供的访问许可证明.根据应用部署位置的不同,一般可以分为以下两种情况讨论: 应用部署在开发者自己的云服务器上.这种情况下用户通过账号登 ...
- Scrapy爬虫框架 基础
1< scrapy的安装 命令行安装 pip install scrapy <常见错误是缺少 wim32api 安装win32api pip install pywin32 <还有就 ...
- Linux 下phpstudy的安装使用补充说明
(1)使用方法 在终端中使用sudo 或者 使用管理员账号运行 phpstudy start 开启 (2)命令列表: phpstudy start | stop | restart 开启 ...
- select 如何将文本居中
开始测试了几种方式但是结果都是失败的,最后测试一种方式终于成功了,所以做下笔记: select{ width: 3.2rem; height: 1.2rem; border-radius: 0.6re ...
- HDU114 - Piggy-Bank 【完全背包】
在 ACM 能够开展之前,必须准备预算,并获得必要的财力支持.该活动的主要收入来自于 Irreversibly Bound Money (IBM).思路很简单.任何时候,某位 ACM 会员有少量的钱时 ...
- 基于Arduino的音乐动感节奏灯
1.音乐动感节奏灯是个什么东西? 前段时间听音乐觉得无聊,便想着音乐光听也没意思啊,能不能 “看见” 音乐呢?于是谷歌了一番,发现还真有人做了将音乐可视化的东西,那就是音乐节奏灯.说的简单点就是LED ...
- Sessions共享技术设计
概述 分布式session是实现分布式部署的前提, 当前项目由于历史原因未实现分布式session, 但是由于在kubernets中部署多个pod时, 负载均衡的调用链太长, 导致会话不能保持, 所以 ...
- Python 元组和列表
Python 元组 Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 如下实例: tup1 ...
- [HEOI 2016] sort
[HEOI 2016] sort 解题报告 码线段树快调废我了= = 其实这题貌似暴力分很足,直接$STL$的$SORT$就能$80$ 正解: 我们可以二分答案来做这道题 假设我们二分的答案为$a$, ...
- 清北学堂模拟赛d7t6 拯救世界
分析:如果题目中没有环的话就是一道裸的最长路的题目,一旦有环每个城市就会被救多次火了.把有向有环图变成有向无环图只需要tarjan一边就可以了. #include <bits/stdc++.h& ...