前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
一、事件的两种绑定方式
1、on事件绑定方式
document.onclick = function() {
console.log("文档点击");
}
// on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法
// .onclick = function (){}
document.onclick = function() {
console.log("文档点击");
}
// 事件的移除
document.onclick = null;
2、非on事件绑定方式
document.addEventListener('click', function() {
console.log("点击1");
})
document.addEventListener('click', function() {
console.log("点击2");
})
// 非on事件可以同时绑定多个方法，被绑定的方法依次被执行
// addEventListener第三个参数(true|false)决定冒泡的方式
// addEventListener('事件',fn,冒泡方式)
function fn () {}
document.addEventListener('click', fn);
// 事件的移除
document.removeEventListener('click', fn);
二、事件参数event
- 存放事件信息的回调参数
三、事件的冒泡与默认事件
- 事件的冒泡：父子都具有点击事件，不处理的话，点击子级也会出发父级的点击事件
- 处理冒泡：（ev是onclick传出来的数据，回调函数获取并处理）
方法一. ev.cancelBubble = True;
方法二. ev.stopprppagation()
<body id="body">
<div id="sup">
<div id="sub"></div>
</div>
</body>
<script>
sub.onclick = function (ev) {
// 方式一：ev.stopPropagation();
ev.stopPropagation();
console.log("sub click");
}
sup.onclick = function (ev) {
// 方式二：ev.cancelBubble = true;
ev.cancelBubble = true;
console.log("sup click");
}
</script>
- 默认事件：取消默认的事件动作，如鼠标右键会弹出菜单
- 取消默认事件：
方法一. return false()
方法二. ev.preventDefault()
<body id="body">
<div id="sup">
<div id="sub"></div>
</div>
</body>
<script>
sub.oncontextmenu = function (ev) {
// 方式一：ev.preventDefault();
ev.preventDefault();
console.log("sub menu click");
}
sup.oncontextmenu = function (ev) {
console.log("sup menu click");
// 方式二：return false;
return false;
}
</script>
四、鼠标事件
- 鼠标事件
onclick：鼠标点击
ondblclick：鼠标双击
onmousedown：鼠标按下
onmousemove：鼠标移动
onmouseup：鼠标抬起
onmouseover：鼠标悬浮
onmouseout：鼠标移开
oncontextmenu：鼠标右键
- 事件参数ev
ev.clientX：点击点X坐标
ev.clientY：点击点Y坐标
div.onmousemove = function (ev) {
// 鼠标在页面中的位置
console.log("x的坐标:", ev.clientX);
console.log("y的坐标:", ev.clientY);
console.log("移动");
}
五、键盘事件
1. 操作一般标签,键盘事件绑定给document
2. 表单标签(可以录入文本),键盘事件绑定给表单标签
- 键盘事件
onkeydown：键盘按下
onkeyup：键盘抬起
- 事件参数ev
ev.keyCode：按键编号，键盘上每个按键都有唯一的编号
ev.altKey：alt特殊按键
ev.ctrlKey：ctrl特殊按键
ev.shiftKey：shift特殊按键
// 案例，键盘控制上下左右移动
var div = document.querySelector('.div');
document.onkeydown = function (ev) {
// console.log(ev.keyCode);
switch(ev.keyCode) {
case 37:
console.log("左");
// offsetLeft 获取移动钱左端所在位置
div.style.left = div.offsetLeft - 3 + "px";
break;
case 38:
console.log("上");
// offsetTop 获取移动钱上端所在位置
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 type="text/javascript">
// 平滑的移动
var div = document.querySelector('.div');
// 能否向左|右|上|下运动
var l_able = false;
var t_able = false;
var r_able = false;
var b_able = false;
setInterval(function () {
// l_able为假,则后者短路,可以实现if的简写
l_able && (div.style.left = div.offsetLeft - 3 + 'px'); // 左
t_able && (div.style.top = div.offsetTop - 3 + 'px'); // 上
if (r_able == true) {
div.style.left = div.offsetLeft + 3 + 'px'; // 右
}
b_able && (div.style.top = div.offsetTop + 3 + 'px'); // 下
}, 16);
document.onkeydown = function (ev) {
switch(ev.keyCode) {
case 37: l_able = true; break;
case 38: t_able = true; break;
case 39: r_able = true; break;
case 40: b_able = true; break;
}
}
document.onkeyup = function (ev) {
console.log(ev);
switch(ev.keyCode) {
case 37: l_able = false; break;
case 38: t_able = false; break;
case 39: r_able = false; break;
case 40: b_able = false; break;
}
}
</script>
六、表单事件
onfocus：获取焦点
onblur：失去焦点
onselect：文本被选中
oninput：值改变
onchange：值改变，且需要在失去焦点后才能触发
onsubmit：表单默认提交事件，form表单专有的事件
var form = document.querySelector('form');
var ipt = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');
ipt.onselect = function () {
console.log("文本被选中了");
}
// 值改变就触发
ipt.oninput = function () {
console.log("值在改变");
div.innerText = this.value;
}
// 键盘抬起触发
ipt.onkeyup = function () {
console.log("值在改变");
div.innerText = this.value;
}
// 值改变，并且在失去焦点时触发
ipt.onchange = function () {
console.log("值在改变");
div.innerText = this.value;
}
// form的专有事件
form.onsubmit = function () {
console.log("提交");
return false; // 取消默认事件
}
七、文档事件
- 文档事件由window调用
onload：页面加载成功
onbeforeunload：页面退出或刷新警告，需要设置回调函数返回值，返回值随意
<script type="text/javascript">
// 文档加载完毕,触发
window.onload = function () {
var div = document.querySelector('div');
console.log(div);
}
</script>
<script type="text/javascript">
// 退出页面
window.onbeforeunload = function () {
return false;
}
</script>
八、图片事件
onerror：图片加载失败
九、页面事件
- 由window来调用
onscroll：页面滚动
onresize：页面尺寸调整
window.scrollY：页面下滚距离
<script type="text/javascript">
window.onload = function () {
window.onscroll = function () {
console.log(window.scrollY);
}
</script>
前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件的更多相关文章
- JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）
鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...
- JS中级 - 03：文档宽高及窗口事件（选）
可视区尺寸 document.documentElement.clientWidth document.documentElement.clientHeight 滚动距离 document.body. ...
- BOM，文档宽高及窗口事件小析
(一)BOM:Browser Object Model(浏览器对象模型)页面上所有的变量都是window的属性 一.方法:1. open(,)打开一个新窗口(页面)一参为页面地址url,二参为打开方式 ...
- Vue Element-ui 框架：路由设置 限制文件类型 表单验证 回车提交 注意事项 监听事件
1.验证上传文件的类型: (1)验证图片类型 <template> <el-upload class="avatar-uploader" action=" ...
- form表单回车提交问题,JS监听回车事件
我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键 ...
- python运维开发(十五)----JavaScript
内容目录: HTML补充 javascript HTML补充 1.display标签 display的inline-block 属性会自动带3px的宽度 <span style="di ...
- 第十五节: EF的CodeFirst模式通过DataAnnotations修改默认协定
一. 简介 1. DataAnnotations说明:EF提供以特性的方式添加到 domain classes上,其中包括两类: A:System.ComponentModel.DataAnnota ...
- JavaScript - 表单提交前预览图片
其实这东西网上到处都是,但并不完整. 正好我也遇到了这个问题,不仅仅是预览,还需要得到图片的属性. 于是东凑西凑整理出一个完整的版本,并根据个人的理解加上了一点点说明. 首先做一些准备工作,HTML方 ...
- python 教程 第十五章、 结构布局
第十五章. 结构布局 #!/usr/bin/env python #(1)起始行 "this is a module" #(2)模块文档 import sys #(3)模块导入 d ...
- javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
随机推荐
- 从源码导入到github
http://stackoverflow.com/questions/4658606/import-existing-source-code-to-github If you've got local ...
- thymeleaf数组下标
<tr th:if="${exercisers != null}"th:each="exerciser:${exercisers}"> <td ...
- CF_127E reader Display
这道题其实找到规律之后其实不难,和破损的键盘一样,都有点递推转移的感觉 题意: 你可以进行这样一次操作:选一个点,然后把这个点横切竖切直到正对角线上面的点,全部翻转过来,问你要进行多少次操作才能把所有 ...
- 02、python的基础-->占位符、while...else...、逻辑运算符
1.%s.%d格式化输出程序(%占位符,s字符串,d数字) name = input('请输入姓名:') age = input('请输入年龄:') job = input('请输入工作:') hob ...
- Dubbo与SpringBoot的结合
前言 这段时间在接触分布式的内容,因为公司的技术栈是 dubbo ,所以我顺其自然地选择了 dubbo 作为我学习的框架. 看了任务清单,这篇文章应该是在6天前出来的,但是因为实习等等的一些事情耽误了 ...
- 在已有QT项目中添加多个UI布局界面
1.在工程中右键->添加新文件,按图选择 2.选择窗口部件 3.创建UI控制类 注意上图红框中命名按实际需要定义,否则后期改动要修改UI文件参数 4.修改UI文件,框1是窗口部件父类,框2是UI ...
- 软件开发程序猿日常必备，现用现查&日志记录
日志记录-- logging模块 日志用处: 1.记录用户信息 2.记录个人流水 3.记录软件的运行状态 4.记录程序员发出的指令(跳板机) 5.用于程序员代码调试(print特别消耗内存,在开发测试 ...
- USACO 2014 US Open Fair Photography /// 技巧
题目大意: 给定n头奶牛 给定n头奶头所在位置和品种 品种只有G H两种 求一段区间的长度 要求区间内包含的品种满足各品种的数量相同 将一个品种的值设为1 另一个设为-1 假设 i<j 而 1~ ...
- sqlServer MERGE 对数据进行修改或插入自动视别 特别用于批量数据的插入或修改
sqlServer MERGE 对数据进行修改或插入自动视别 特别用于批量数据的插入或修改 MERGE customer AS targetTable --目标表 USING ( ...
- Android消息处理：EventBus、BroadCast和Handler-优缺点比较
上一篇研究了EventBus的使用方法,但随之而来的一系列问题也是值得思考,EventBus到底给项目带来了什么?它与Android原有的消息处理机制有什么区别和优缺点?项目在什么场景下采用Event ...