一. 事件概述
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发--- 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
二. 事件三要素
<div class="box">
我是出发时间的元素
</div>
<script>
// - 事件源（谁）：触发事件的元素
// - 事件类型（什么事件）： 例如 click 点击事件
// - 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
var box = document.getElementsByClassName('box')[0];
// 给事件源绑定一个点击事件（单击事件）
// 每一个事件都有一个事件对象\
// 事件对象：事件源触发的事件后，产生的一个对象
// 事件对象放到事件处理函数的形参中
//事件处理函数是一个形参
box.onclick = function(e){
console.log('e',e)
// console.log('event',event)
// console.log('event',event)
// console.log('e',e)
// 事件对象中有一个属性：target
// 事件对象中的target属性：指向触发事件的元素
// console.log('e',e.target)
console.log('点击事件')
}
</script>
三. 事件对象event
在触发DOM元素上的某个事件时，会产生一个事件对象event，这个事件对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与事件有关的信息。
-
什么时候会产生Event 对象呢?
-
例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.
-
-
事件通常与函数结合使用，函数不会在事件发生前被执行！
事件对象的使用:
var box = document.getElementById('box');
box.onclick = function(e){
console.log(e)
.........
}
事件对象(event)的属性:
| 属性和方法 | 描述 |
|---|---|
type | 返回当前 Event 对象表示的事件的名称。 |
preventDefault() | 通知浏览器不要执行与事件关联的默认动作(阻止默认行为) |
target | 返回触发此事件的元素（事件的目标节点）。 |
currentTarget | 返回其事件监听器触发该事件的元素。 |
keyCode | 返回键盘事件中的键码值 |
stopPropagation() | 阻止事件传播。 |
事件对象的兼容性写法:
box.onclick = function(e) {
// 事件对象
//兼容IE8以下的写法
e = e || window.event;
var target = e.target || e.srcElement;
console.log(target);
};
this指向总结(重点)
-
自定义构造函数中this:指向实例化对象
-
普通函数中this:指向window
-
自定义对象的方法中this:指向当前对象
-
事件绑定的函数中的this:指向事件的绑定者
<div id="box">我是box</div>
<script>
// this指向问题
// 1.构造函数的this指向
// 构造函数的this指向实例化对象
// function Person(name){
// console.log('this',this)
// this.name =name
// }
// var p1 = new Person('张三')
// console.log('p1',p1)
// 2.普通函数的this指向
// 普通函数的this指向window
// function fun1(){
// console.log('this',this)
// }
// fun1()
// 3.对象里面的函数this指向 指向该方法所属的对象
//
// var obj = {
// name:"张三",
// age:16,
// sleep:function(){
// console.log('this',this)
// }
// }
// obj.sleep()
// 4.事件的this指向
// 事件里面的this指向事件源
var box = document.getElementById('box');
box.onclick = function(){
console.log('this',this)
}
</script>四. 事件的类型
4.1 鼠标事件(12个)
| 事件类型 | 说明 |
|---|---|
| onmouseover | 鼠标刚进入元素时触发 |
| onmouseenter | 鼠标完全进入元素时触发 |
| onmousemove | 鼠标在元素上移动时触发 |
| onmouseout | 鼠标刚要离开元素时触发 |
| onmouseleave | 鼠标完全离开元素时触发 |
| onmousedown | 鼠标按下时触发 |
| onmouseup | 鼠标弹起时触发 |
| onclick | 鼠标单击时触发 |
| ondblclick | 鼠标双击时触发 |
| onmousewheel | 当鼠标滚轮正在被滚动时运行的脚本 |
| onscroll | 当元素滚动条被滚动时运行的脚本 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发（右击） |
<style>
.box {
width: 300px;
height: 200px;
border: 2px solid red;
}
img {
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="box">
box
</div>
<!-- <div class="box">
<img src="images/1.jpg" alt="">
</div> -->
<script>
var box = document.getElementsByClassName('box')[0];
// | onmouseover | 鼠标刚进入元素时触发 |
// | ------------ | ---------------------- |
// | onmouseenter | 鼠标完全进入元素时触发 |
// | onmousemove | 鼠标在元素上移动时触发 |
// | onmouseout | 鼠标刚要离开元素时触发 |
// | onmouseleave | 鼠标完全离开 |
// | ------------ | ---------------------- |
// box.onmouseover = function(e){
// console.log('鼠标进入onmouseover',e)
// console.log(e.target)
// }
// box.onmouseenter = function(e){
// console.log('鼠标进入onmouseenter',e)
// console.log(e.target)
// }
// box.onmousemove = function(e){
// console.log('鼠标在目标元素中移动onmousemove',e)
// }
// 鼠标离开 如果嵌套的有子元素当你进入子元素的时候也会触发
// 外层移动到内层的也会触发
// box.onmouseout = function(){
// console.log('鼠标离开onmouseout')
// }
// // 鼠标离开 如果嵌套的有子元素当你进入子元素的时候不会触发
// box.onmouseleave = function(){
// console.log('鼠标离开onmouseleave')
// }
// | onmousedown | 鼠标按下时触发 |
// | ----------- | -------------- |
// | onmouseup | 鼠标弹起时触发 |
// | onclick | 鼠标单击时触发 |
// | ondblclick | 鼠标双击时触发 |
// box.onmousedown = function(e){
// console.log('鼠标按下onmousedown',e)
// }
// box.onmouseup = function(e){
// console.log('鼠标弹起onmouseup',e)
// }
// 单击事件
// box.onclick = function(e){
// console.log('单击onclick',e)
// }
// 双击事件
// box.ondblclick = function(e){
// console.log('双击ondblclick',e)
// }
</script>
</body>
<style>
.box{
width: 200px;
background-color: #ff534c;
height: 4000px;
}
</style>
</head>
<body>
<div class="box">
</div>
<script>
// 当鼠标滚轮正在被滚动时运行的脚本
// onmousewheel window body doucment
// 触发对象是浏览器窗口
window.onmousewheel = function(e){
console.log('e',e);
// e.wheelDeltaY 滚轮滚动的高度
// 如果为正值，表示向上滚动
// 如果为负值，表示向下滚动
}
</script>
</body>
<style>
.box {
width: 100px;
height: 200px;
border: 2px solid red;
overflow-y: scroll;
}
.boxTwo {
width: 300px;
border: 3px solid blue;
height: 4000px;
}
</style>
</head>
<body>
<div class="box">
内容。
</div>
<div class="boxTwo">
</div>
<script>
var box = document.getElementsByClassName('box')[0];
// onscroll当元素滚动条被滚动时运行的脚本
// box.onscroll = function(e){
// console.log('滚动了',e)
// }
window.onscroll = function (e) {
console.log('滚动了', e)
}
</script>
</body> <style>
*{
margin: 0;
padding: 0;
}
#ulBox{
display: none;
position: fixed;
}
ul,li{
list-style: none;
}
li{
width: 300px;
height: 66px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<ul id="ulBox">
<li>
剪贴
</li>
<li>
复制
</li>
</ul>
</div>
<script>
var ul = document.getElementById('ulBox');
// oncontextmenu window/document
// 右键事件
window.oncontextmenu = function(e){
console.log('e',e);
// e.clientX e.clientY 光标的坐标
ul.style.display = 'block';
ul.style.left = e.clientX +"px";
ul.style.top = e.clientY +"px";
}
</script>
</body>4.2 表单事件(6个)
| 事件类型 | 说明 |
|---|---|
| onchange | 内容改变事件 |
| onfocus | 获取焦点时触发的事件 |
| onblur | 失去焦点时触发的事件 |
| oninput | 输入事件 |
| onsubmit | 表单提交事件 |
| onreset | 表单重置事件 |
<!-- action 跳转的目标地址（接口） -->
<form action="" id="formID" method="get">
<input type="text" id="username" name="username">
<!-- <input type="file" id="username" name="username"> -->
<input type="submit">
<input type="reset">
<!-- <button>重置</button> -->
</form>
<!-- -->
<!-- | onchange | 内容改变事件 |
| -------- | -------------------- |
| onfocus | 获取焦点时触发的事件 |
| onblur | 失去焦点时触发的事件 |
| oninput | 输入事件 |
| onsubmit | 表单提交事件 |
| onreset | 表单重置事件 | -->
<script>
var inputDom = document.getElementById('username');
// onchange 监听input的改变
// 用于监听文件的上传
// inputDom.onchange = function(e){
// console.log('input发生变化时触发的事件',e)
// console.log(inputDom.value)
// }
// inputDom.onfocus = function(e){
// console.log('获取焦点时触发的事件',e)
// }
// inputDom.onblur = function(e){
// console.log('失去焦点时触发的事件',e)
// console.log(inputDom.value)
// }
// inputDom.oninput = function(e){
// console.log('在表单输入内容触发的事件 只要输入内容就会触发 实时触发',e)
// console.log(inputDom.value)
// }
// onsubmit 表单提交事件 绑定的对象是form表单
// 如果你是一个form表单 只针对于标准的form表单 那么你只要点击提交按钮 就会触发from表单的事件
var formDom = document.getElementById('formID');
formDom.onsubmit = function (e) {
// 阻止默认的提交事件
e.preventDefault()
console.log('表单提交事件', e)
// form表单提交事件 默认是刷新页面的
}
formDom.onreset = function (e) {
console.log('表单重置事件', e)
// 清空form表单数据的
}
</script>4.3 键盘事件(3个)
| 事件类型 | 说明 |
|---|---|
| onkeydown | 键盘按键按下时触发 |
| onkeypress | 键盘按着不放时触发 |
| onkeyup | 键盘按键弹起时触发 |
<input type="text" id="username">
<script>
// 键盘事件
var input = document.getElementById('username');
// 1. 键盘按下事件
// | onkeydown | 键盘按键按下时触发 |
// | ---------- | ------------------ |
// | onkeypress | 键盘按着不放时触发 |
// | onkeyup | 键盘按键弹起时触发 |
input.onkeydown = function (e) {
console.log('键盘按下时触发', e);
}
input.onkeypress = function (e) {
console.log('键盘按着不放时触发', e);
}
input.onkeyup = function (e) {
console.log('键盘按键弹起时触发', e);
}
</script>e.keyCode:获取输入键盘的键码，13回车
4.4 窗口事件(3个)
| 事件类型 | 说明 |
|---|---|
| onload | 文档及其资源文件都加载完成时触发 |
| onresize | 事件会在窗口或框架被调整大小时发生。 |
| onunload | 关闭网页时 |
<script>
//onload 文档及其资源文件都加载完成时触发
window.onload = function(){
var box = document.getElementById('box');
console.log('box',box)//null
}
</script>
<style>
#box{
width: 300px;
height: 400px;
border: 3px solid rebeccapurple;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="box">我是box</div>
<script>
// 窗口事件
// 1. 窗口加载事件
// 监听页面尺寸大小的变化
// innerHeight 获取当前窗口的高度
// innerWidth 获取当前窗口的宽度
var box = document.getElementById('box');
window.onresize = function(e){
console.log('窗口大小变化了',e)
// if(window.innerWidth < 600){
// box.style.backgroundColor='red'
// }else{
// box.style.backgroundColor='green'
// }
if(this.innerWidth < 600){
box.style.backgroundColor='red'
}else{
box.style.backgroundColor='green'
}
}
// 页面关闭时触发 比如清楚缓存或者定时器
window.onunloade = function(){
console.log('页面关闭了')
}
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
