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 ...
随机推荐
- Cookie的实现
Cookie是web server下发给浏览器的任意的一段文本,在后续的http 请求中,浏览器会将cookie带回给Web Server.同时在浏览器允许脚本执行的情况下,Cookie是可以被Jav ...
- jboss-eap-6.2修改端口号
最近要改版一个项目,用来配合日常工作使用,需要在服务器上放多个jboss,那么就需要修改jboss的端口,如果服务器上配置了JBOSS_HOME,需要先删除,否则配置修改不会生效,会依然用老的jbos ...
- Django中图片的上传并显示
一.settings配置文件中配置 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'medias').replace('\\', ...
- iDRAC RAC0218 最大会话限制
用ssh工具登陆IDRAC远程管理ip地址: /admin1-> racadm racreset RAC reset operation initated successfully. It m ...
- 3.Linux的远程管理及网络下载
3.1 Linux的远程管理 3.1.1 远程管理概述 什么是远程管理: 1.为什么需要远程管理: 服务器通常是Linux系统,而服务器不可能一直在身边,所以就需要远程来操作服务器 企业中通常需要集群 ...
- 7-9 旅游规划 （25 分）（Dijkstra算法）
题意: 思路:单源最短路问题,Dijkstra算法搞定就可以了,因为要找出最便宜的最短路,所以需要在更新最短距离的时候加一个条件(即当最短距离相等的时候,如果该路径的花费更小,就更新最小花费)就可 ...
- C#反射获取数据库字段
static string sqlselect = "insert into {0}({1}) values ({2})"; (这个方法可以适用于任何数据库的插入语句) publi ...
- 关于在JSP页面中为什么一定要用${pageContext.request.contextPath}来获取项目路径，而不能用${request.contextPath}?
这里的疑问在于pageContext和request都是JSP中的内置对象之一,为什么不直接用${request.contextPath}来获取项目路径? 出现这种疑问,其实是将JSP的内置对象和EL ...
- 传染病控制（洛谷 1041 WA 90）
题目背景 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府决定不惜一切代价控制传染病的蔓延.不幸的是,由于人们尚未完全认识这种传染病,难以准确判别病毒携带 ...
- oracle 内部机制-DTRACE
Oracle SQL Tuning and CBO Internals: Based Optimizer with CBO Internals and SQL Tuning Optimization ...