JavaScript---DOM事件
DOM事件
在触发DOM元素上的某个事件时,会产生一个事件对象event
,这个事件对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与事件有关的信息。
事件的类型
表单事件
事件类型 | 说明 |
---|---|
oninput | 输入事件 |
onsubmit | 表单提交事件 |
onreset | 表单重置事件 |
onchange | 内容改变事件 |
onfocus | 获取焦点时触发的事件 |
onblur | 失去焦点时触发的事件 |
鼠标事件
事件类型 | 说明 |
---|---|
onmouseover | 鼠标刚进入元素时触发 |
onmouseenter | 鼠标完全进入元素时触发 |
onmousemove | 鼠标在元素上移动时触发 |
onmouseout | 鼠标刚要离开元素时触发 |
onmouseleave | 鼠标完全离开元素时触发 |
onmousedown | 鼠标按下时触发 |
onmouseup | 鼠标弹起时触发 |
onclick | 鼠标单击时触发 |
ondblclick | 鼠标双击时触发 |
键盘事件
事件类型 | 说明 |
---|---|
onkeydown | 键盘按键按下时触发 |
onkeypress | 键盘按着不放时触发 |
onkeyup | 键盘按键弹起时触发 |
窗口事件
事件类型 | 说明 |
---|---|
onload | 文档及其资源文件都加载完成时触发 |
onunload | 关闭窗口时触发 |
注册事件处理程序
通过DOM元素属性注册事件处理程序
<button id="mybutton">点我</button>
<script> var mybutton = document.getElementById('mybutton');mybutton.onclick = function() { alert('Hello World');};mybutton.onclick = function() { alert('Hi');};
</script>
注意:通过上面这种方式添加事件,同一个类型的事件如果添加多次
的话,只执行最后添加的事件
。
通过HTML标签属性注册事件处理程序
<button onclick="alert('Hello World')">点我</button>使用addEventListener()方法注册事件处理程序<button id="mybutton">点我</button>
<script> var mybutton = document.getElementById('mybutton');mybutton.addEventListener('click', function() { alert('Hello World');
}, false);mybutton.addEventListener('click', function() { alert('Hi');
}, false);
</script>
注意:同一种类型的事件可以添加多次,执行顺序是先添加会先执行,后面依次执行
。
事件的传递过程
var div = document.getElementsByTagName("div");
var btn = document.getElementsByTagName("button")[0];console.log(div)
btn.onclick = function(){alert("点击事件被触发了1");}div[0].onclick = function(){alert("div接受到了btn传递上来的事件了1");
}div[1].onclick = function(){alert("div接受到了btn传递上来的事件了2");
}window.onclick = function(){alert("window");
}
阻止事件传播
使用事件对象的 stopPropagation()
方法停止事件传播。
阻止事件默认行为
方法一:使用事件对象的 preventDefault()
方法阻止默认行为。
方法二:在事件的处理函数中返回false
Math对象
Math 是一个内置对象
, 它具有数学常数
和函数的属性和方法
。不是一个函数对象。
与其它全局对象不同的是,Math 不是一个构造器
. Math 的所有属性和方法都是静态的
.
Math对象的常用属性
Math.E
欧拉常数,也是自然对数的底数, 约等于 2.718.
Math.LN2
2的自然对数, 约等于0.693.
Math.LN10
10的自然对数, 约等于 2.303.
Math.LOG2E
以2为底E的对数, 约等于 1.443.
Math.LOG10E
以10为底E的对数, 约等于 0.434.
Math.PI
圆周率,一个圆的周长和直径之比,约等于 3.14159.
Math.SQRT1_2
1/2的平方根, 约等于 0.707.
Math.SQRT2
2的平方根,约等于 1.414.
Math对象的常用方法
Math.ceil(x)
向上取整(天花板函数)
console.log(Math.ceil(3.1415926));// 4
Math.floor(x)
向下取整(地板砖函数)
console.log(Math.floor(3.689)); // 3
Math.max(x, y, z, ...)
求多个数之中的最大值
console.log(Math.max(2, 3, 23, 67, 90, 120));// 120
Math.min(x, y, z, ...)
求多个数之中的最小值
console.log(Math.min(54, 12, 3, 89, 45, 1)); // 1
Math.round(x)
对数字进行四舍五入运算,最后的结果为整数
console.log(Math.round(3.14));// 3console.log(Math.round(3.56));// 4
Math.random()
求0到1之间的随机数,包含0,但不包含1,[0, 1)
console.log(Math.random());Math.pow(x,y) 返回x值的y次方console.log(Math.pow(2, 3); // 8
Math.sqrt(x)
开平方
console.log(Math.sqrt(16)); // 4
案例:获取100到999之间的随机整数,包括两个数在内。
公式:Math.floor(Math.random() * (上限 - 下限 + 1)) + 下限;
var min = 100;var max = 999;Math.floor(Math.random() * (max - min + 1)) + min;**
Date用法
Date对象的创建方式
new Date();
new Date(value);
new Date(dateString);
new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);
Date对象的常用方法
getFullYear()
年份
console.log(date.getFullYear());
getMonth()
月份,从0 ~ 11开始计数
console.log(date.getMonth());
getDate()
日期
console.log(date.getDate());
getDay()
星期,返回一周中的某一天(返回值是0(周日)到6(周六)之间的一个整数)
console.log(date.getDay());
getHours()
小时
console.log(date.getHours());
getMinutes()
分钟
console.log(date.getMinutes());
getSeconds()
秒数
console.log(date.getSeconds());
getMilliseconds()
毫秒
console.log(date.getMilliseconds());
getTime()
返回 1970 年 1 月 1 日至今的毫秒数
console.log(date.getTime())
超时定时器
设置定时器
超时调用需要使用window对象
的setTimeout()
方法,该方法接受两个参数
:要执行的代码
和以毫秒为单位的时间(即在执行代码前需要等待多少毫秒)
。
setTimeout(callback, after)
//callback 时间到了之后要执行的方法;//after 多长时间之后去执行这个方法
``
清除定时器
clearTimeout(time_id)
调用setTimeout()
之后,该方法会返回一个数值ID
,用来唯一标识这个超时定时器
,可以用它来取消定时器
。要取消尚未执行的超时定时器
,可以调用clearTimeout()
方法,并将相应的超时定时器ID作为参数传递给它,如下所示:
//设置超时定时器
var timeoutId = setTimeout(function(){alert(“Hello world”);}, 1000);
//取消定时器
clearTimeout(timeoutId);
只要是指定的时间尚未到来之前调用clearTimeout()
,就可以取消掉超时定时器。
间歇定时器
间歇定时器与超时定时器类似,只不过它会按照指定的时间间隔重复执行代码,直到间歇定时器被取消或者页面被关闭。
设置定时器
setInterval(callback, repeat)
callback:回调方法
repeat: 每隔多长时间调用一次,单位是毫秒(ms)
。
设置间歇定时器的方法是setInterval()
,它接受的参数与setTimeout()
相同:要执行的代码和每次执行之前需要等待的毫秒数。如下例:
//设置间歇定时器
setInterval(function(){console.log(“Hello world”);}, 1000);
清除定时器
调用setInterval()
方法同样会返回一个定时器的唯一标识(ID)。要取消间歇定时器,可以用clearInterval()
方法并传入相应的ID值就行了。
clearInterval(number)
JavaScript---DOM事件相关推荐
- html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
- JavaScript Dom 事件 Bom 定时器方法
目录 Dom HTML Dom Node:节点对象,其他5个的父对象 修改标签体内容 属性 innerHTML 事件 BOM 定时器方法 Navigator:浏览器对象 creen:显示器 ...
- javascript DOM事件总结
1 <html> 2 <title>事件</title> 3 <meta charset="utf-8"/> 4 <body& ...
- 从八道面试题看JavaScript DOM事件机制
原文:https://segmentfault.com/a/1190000013894510#articleHeader0 As we all know,事件机制其实很简单,无非冒泡和捕获 这两点,笔 ...
- javaScript的使用(5)DOM事件
dom事件 浏览器监听特定的条件或用户行为,并且触发相应的操作(函数) 常见的dom事件如下: onclick:单击事件 onfocus:焦点事件 onblur:失去焦点事件 onkeydown:键盘 ...
- javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄 事件句柄 类型 说明 onabort 事件句柄 图像加载被中断 onblur 事件句柄 元素失去焦点 onfocus 事 ...
- ajax php 观察者模式,JavaScript观察者模式定义和dom事件实例详解
观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript中,一般使用事件模型来替代传统的观察者模式. 好处: ...
- JavaScript(六)—— DOM 事件高级
本篇为 JavaScript 系列笔记第六篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程 系列笔记: JavaScript(一)-- 初识JavaScript / ...
- 前端JavaScript之DOM事件操作~都是干货
下面是对DOM操作事件的整理,希望可以帮助到有需要的小伙伴~ 文章目录 DOM事件操作 JavaScript的基础 事件 代码书写步骤 1.获取绑定事件的元素 2.绑定事件 3.编写事件 注意事项 D ...
最新文章
- 二、Netty服务端/客户端启动整体流程
- 我的Java知识复习回顾笔记
- day04_09 while循环03
- Linux命令简单操作之lsof
- 还有哪些类似0.99999…=1有趣的事实?
- 运放电路的工作原理_图文讲解!教你看懂7款经典运放电路
- Spring BPP中优雅的创建动态代理Bean 1
- 使用分页方式读取超大文件的性能试验
- C#LeetCode刷题-数组
- 网络事件触发自己主动登录
- php 数据库时间具体到分钟,php – 在设定的到期时间后删除数据库行(例如5分钟)...
- python自学视频教程 38-自学 Python,视频教程和代码一看就懂,动手就废,应该这么学...
- CRM客户关系管理系统源码 CRM小程序源码
- StartUp.xls宏病毒清除方法(excel宏病毒)
- HNOI2004宠物收养所
- 局域中找不到Synology (搜索不到NAS服务器)
- HttpMessageConverter 专题
- 42岁大厂高管,给30岁-39岁人提个醒:这6个让你变强的习惯,要尽快养成
- NTFS 之 LCN,VCN
- 计算机应用词汇,计算机应用常用英语词汇 1
热门文章
- 【转】jsp+servlet和SSM分别是如何实现文件上传(示例)
- 常用Maven插件介绍(下)(转)
- [正则表达式] 正则表达式匹配UUID
- 【字符编码】彻底理解字符编码
- [国嵌笔记][025][ARM指令分类学习]
- 遇上放养型导师,论文就业该咋办?
- 【3D游戏建模】3D建模师的发展前景
- 【OpenCV】OpenCV实战从入门到精通之 -- 访问图像中的像素
- 最新 | 更小、更快、更强!EfficientNetV2:Smaller-Faster-Better
- 推荐 | Transformer最新成果!Learn to Dance with AIST++: Music Conditioned 3D Dance Generation!