1. 事件对象 -div动态移动
当给某个元素对象绑定响应函数后，浏览器在执行这个响应函数后会向这个函数自动传递一个实参，该实参封装了与此事件有关的任何数据; 可以给响应函数添加形参来调用这个事件对象;IE8及以下浏览器不会传递此实参，但是可以通过window.event来获取;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件对象 -div动态移动</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
/*
* 开启box1的绝对定位
*/
position: absolute;
}
</style>
<script>
/**
* 需求：使得div可以跟随鼠标移动
*/
window.onload=function(){
// 1、获取box1，Dom对象
var box1 = document.getElementById("box1");
// 2、绑定鼠标移动事件
document.onmousemove=function(event){
/**
* 涉及到的技术：
* 1、onmousemove 该事件将会在鼠标在元素中移动时候触发;
* 2、事件对象
* - 当事件的响应函数被触发时候，浏览器每次都会将一个事件对象event作为实参传递给响应函数;
* - 这个事件对象中封装了当前事件相关的一切信息，比如：鼠标坐标，鼠标按下那个键，鼠标滑轮方向;
*
* DOM标准的浏览器会将一个event对象传入到事件的处理程序当中，无论事件处理程序是什么都会传入一个event对象。
**/
/**
* 涉及到的event属性
* 1、scrollTop 这个元素的顶部到视图可见内容(的顶部)的距离的度量 纵向滚动条滚动距离;
* 2、scrollLeft 这个元素的左边到视图可见内容(的顶部)的距离的度量 横向滚动条滚动距离;
* 浏览器的滚动条在chrome中被认为是documentElement的scrollTop和scrollLeft的值，而在IE与firefox被认为是body的scrollTop和scrollLeft的值;
*
* 3、clientX 鼠标相对以浏览器有效区域的的X轴坐标;
* 4、clientY 鼠标相对以浏览器有效区域的的Y轴坐标;
*
* 5、pageX 鼠标指针的位置，相对于文档的左边缘;
* 6、pageY 鼠标指针的位置，相对于文档的上边缘;
* 对于pageX,pageY两个属性在IE8中不支持，所以如果需要兼容IE8，不要使用;
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
// 在IE8以及以下的浏览器中，是将事件对象作为window对象的属性保存，故而需要判定;
event = event || window.event;
var left = event.clientX;
var top = event.clientY;
// 3、设置div偏移量
box1.style.left=left+sl+"px";
box1.style.top=top+st+"px";
}
}
</script>
</head>
<body style="width: 1000px; height: 2000px;">
<div id="box1"></div>
</body>
</html>
2. 事件冒泡
所谓的冒泡指的是事件的向上传到，当后代元素上的事件被触发时候，其祖先元素相同事件也会被触发; 在开发中大部分情况冒泡都是有用的，如果不希望发生冒泡事件可以通过事件对象来取消冒泡;
- event.cancelBubble=true 不属于W3C标准，但是更方便，新版本的chrome与firefox都已经支持;
- event.stopPropogation() W3C标准，但是IE不支持;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件冒泡</title>
<style type="text/css">
#box1 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#s1 {
background-color: yellow;
}
</style>
<script>
/**
* 所谓的冒泡指的是事件的向上传到，当后代元素上的事件被触发时候，其祖先元素相同事件也会被触发;
* 在开发中大部分情况冒泡都是有用的，如果不希望发生冒泡事件可以通过事件对象来取消冒泡;
*/
/**
* 需求：实现冒泡简易效果
*/
window.onload = function () {
// 1、获取s1，dom对象
var s1 = document.getElementById("s1");
// 2、s1鼠标点击事件
s1.onclick = function (event) {
alert("s1点击事件被触发");
}
// 3、获取box1，dom对象
var box1 = document.getElementById("box1");
box1.onclick = function (event) {
// 表示该元素不进行事件冒泡
// box1点击事件触发时, 不进行事件冒泡, 即不会有"document.body 鼠标点击事件"发生
// 则位于box1内部的s1的冒泡也会到box1就停止,不会到body
event.cancelBubble = true;
alert("box1点击事件触发");
}
// 4、document.body 鼠标点击事件
document.body.onclick = function (event) {
alert("body点击事件触发");
}
}
</script>
</head>
<body>
<div id="box1">
我是box1
<span id="s1">我是span</span>
</div>
</body>
</html>
3. 事件委派
当在给节点添加新节点并且需要让这个新节点与其他兄弟节点有同样的响应函数时可以使用事件委派的功能, 当事件触发时响应函数的形参属性event.target会指定实际触发此函数的节点, 将响应函数绑定到父元素上，并且使用响应函数的形参的属性进行节点判断可以完成新增子节点不需要重新绑定响应函数的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04-事件的委派</title>
<script>
window.onload = function () {
// 1、获取ul,button的dom对象
var ul = document.getElementById("u1");
var btn01 = document.getElementById("btn01");
// 2、点击按钮添加超链接
btn01.onclick = function () {
// 2.1、创建一个li
var li = document.createElement("li");
li.innerHTML = "<a href='#' class='link'>新添加的超链接</a>"
// 2.2、将li添加到ul中
ul.appendChild(li);
}
/**
* 简要分析：
* 为每一个超链接绑定一个单击响应函数，这里我们为每一个超链接都绑定了一个单击响应函数，比较麻烦
* 而且这种操作只能为已经有的超链接设置事件，而新添加的超链接必须重新绑定
*/
/*
var allA = document.getElementsByTagName("a");
for(var i = 0 ; i < allA.length ; i ++){
allA[i].οnclick=function(){
alert("我是a的点击响应函数");
}
} */
/**
* 我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以
* 尝试将其绑定给元素的共同的祖先元素
*
* 事件的委派
* 将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时候，会
* 一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件
*
* 事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
*/
// 5、为祖先元素ul绑定一个单击响应函数
ul.onclick = function (event) {
// 解决浏览器兼容性问题
event = event || window.event;
/**
* 参数说明event
* event中的target表示触发事件的元素
*/
// alert(event.target);
// 如果触发事件对象是我们期望的元素，执行否则不执行
if (event.target.className = 'link') {
alert("我是ul的单击响应函数");
}
}
}
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1">
<li>
<p>我是p元素</p>
</li>
<li><a href="#" class="link">超链接1</a></li>
<li><a href="#" class="link">超链接2</a></li>
<li><a href="#" class="link">超链接3</a></li>
</ul>
</body>
</html>
4. 事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的绑定</title>
<script>
window.onload = function () {
var btn01 = document.getElementById("btn01");
/**
* 介绍
* 使用 '对象.事件' = 函数的形式绑定响应函数
* 它只能同时为一个元素的一个事件绑定一个响应函数
* 不能绑定多个，如果绑定了多个，则后边会覆盖前边的, 导致前绑定的函数不会被执行
*
* 如下, 如果两个btn01.onclick都存在 则只会有"2"的弹窗
*
*/
// btn01.onclick = function () {
// alert(1);
// }
// btn01.onclick = function () {
// alert(2);
// }
/**
* 涉及的监听事件addEventListener():
* - element.addEventListener(event, function, useCapture)
* - 通过这个方法可以为匀速绑定响应函数
* - 参数说明
* 1、事件的字符串，不用on; 即原本"onclick", 现在只要"click";
* 2、回调函数，当事件触发时候该函数会被调用
* 3、是否在捕获阶段触发事件，需要一个布尔值，一般传false
* true - 事件句柄在捕获阶段执行; false- 默认。事件句柄在冒泡阶段执行;
*
* 事件说明
* 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
* 这样当事件被触发时候，响应函数将会按照函数的绑定顺序执行
* 执行顺序是alert(1), alert(2);
*
* 注意
* 这个方法不支持IE8以及以下的浏览器
*/
//
// btn01.addEventListener("click", function () {
// alert(1)
// }, false);
// btn01.addEventListener("click", function () {
// alert(2)
// }, false);
/**
* attachEvent()
* - 在IE8中可以使用该事件来绑定点击响应函数
* - 参数说明
* 1、事件的字符串，使用on
* 2、回调函数, 当事件触发时候该函数会被调用
*
* - 这个方法可以同时为一个事件绑定多个处理函数
* 不同的是它是先执行后绑定，执行顺序和addEventListener()相反
* 执行顺序是alert(2),alert(1);
*/
// btn01.attachEvent("onclick",function(){
// alert(1);
// });
// btn01.attachEvent("onclick",function(){
// alert(2);
// });
// 2、自定义函数bind
/**
* 定义一个函数，用来为制定元素绑定响应函数
* addEventListener()中this, 是绑定事件的对象
* attachEvent()中的this, 是window
* 需要统一两个方法中this
*
* 参数说明
* obj 要绑定事件的对象
* eventStr 事件的字符串(不要on)
* callback 回调函数
*/
function bind(obj,eventStr,callback){
if(obj.addEventListener){
// obj调用函数addEventListener
obj.addEventListener(eventStr,callback,false);
}else{
// IE8以下执行
obj.attachEvent("on"+eventStr,function(){
// 匿名函数调用回调函数
// 使用.call 方法, 保证调用函数的this是obj
callback.call(obj);
})
}
}
// 3、调用自定义函数
bind(btn01,"click",function(){
alert(this);
})
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
</body>
</html>
5. 函数传播
浏览器在实现时对于事件传播微软与网景有不同的理解方式
- 微软认为事件由子元素向父元素传播;
- 网景认为事件由父元素向子元素传播
w3c定义 --三个阶段
- 捕获阶段：该阶段时候从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件;
- 目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件;
- 冒泡阶段：事件从目标元素向它的祖先元素传递，一次触发祖先元素的事件
当需要设置某个事件在捕获阶段执行时，将addEventListener()的第三个参数设置为true即可，IE8及以下浏览器没有实现捕获阶段所以没有办法设置
6. DIV拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件拖拽效果</title>
<style>
#box1 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
}
#box2 {
width: 200px;
height: 200px;
background-color: darkcyan;
position: absolute;
left: 300px;
top: 300px;
}
</style>
<script>
window.onload = function ()
{
/**
* 需求：拖拽box1元素
* 分析
* 1、当鼠标在被拖拽元素上按下时候，开始拖拽 onmousedown
* 2、当鼠标移动时元素随着鼠标移动 onmousemove
* 3、当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
*/
// 1、获取box1的dom对象
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var img1 = document.getElementById("img1");
drag(box1);
drag(box2);
drag(img1);
function drag(obj)
{
// 2、绑定一个鼠标按下事件
// 2.1、当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
obj.onmousedown = function (event)
{
// 设置捕获所有鼠标按下的事件
// 等同于
// if(obj.setCapture)
// {
// // 存在这个函数
// obj.setCapture();
// }
obj.setCapture && obj.setCapture();
// 解决浏览器兼容性问题
event = event || window.event;
// 保证鼠标拖动box时, 鼠标和box的相对位置保证与鼠标按下那一刻的相对位置一样
// 左侧偏移量(鼠标按下时, 鼠标x和obj左边距的距离) = clientX-offsetLeft
// 鼠标x - obj元素的相对于定位父元素的左侧偏移量
// 上边 clientY-offsetTop, 同理
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
// 2.2、当鼠标移动时被拖拽元素随着鼠标移动 onmousemove
document.onmousemove = function (event)
{
event = event || window.event;
var left = event.clientX - ol;
var top = event.clientY - ot;
// 修改box1的位置
obj.style.left = left + "px";
obj.style.top = top + "px";
// 2.3、当鼠标松开时，onmouseup，鼠标固定在当前位置
document.onmouseup = function ()
{
// 取消document的onmousemove事件
document.onmousemove = null;
// 取消document的onmouseup事件
document.onmouseup = null;
// 当鼠标松开时，取消对事件的捕获
obj.releaseCapture && obj.releaseCapture();
}
}
return false;
}
}
}
</script>
</head>
<body>
我是文章内容
<div id="box1"></div>
<div id="box2"></div>
<img src="img/pic1.jpg" id="img1" style="position: absolute; width: 300px; height: 200px;"/>
</body>
</html>
7. 事件补充
7.1 鼠标滚轮滚动
onmousewheel: 鼠标滚轮滚动事件，会在滚轮滚动时候触发, 但是火狐浏览器不支持该事件;
事件结果由event.wheelDelta返回向上滚时返回120，向下滚时返回-120，可以只关注正负;
火狐中需要使用addEventListener("DOMMouseScroll", func)来监听鼠标滚轮的操作，事件结果由event.detail返回，向上滚动时返回-3，向下滚动时返回3;
当浏览器中有滚动条时鼠标滚动操作会默认滚动滚动条，在IE与chrome中可以使用return false来取消默认行为，firefox需要使用preventDefault来取消;
mouseenter: 鼠标移入; mouseleave: 鼠标移出; mouseover: 鼠标移入; mouseout: 鼠标移出;
以上四个事件触发机制: 当鼠标移动至绑定监听器的元素或者子元素时就会被触发, 区别: 前两者不会冒泡后两者会;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚轮事件</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: darkcyan;
}
</style>
<script>
/**
* 需求：为box1绑定一个鼠标滚轮事件
*/
window.onload = function () {
// 1、获取ID为box1的dom
var box1 = document.getElementById("box1");
// 2、为box1添加滚轮滚动事件(在box1内部滚轮发生滚动时响应的事件)
box1.onmousewheel = function (event) {
event = event && window.event;
// alert(event.wheelDelta);
// alert(event.detail);
/**
* 当鼠标滚轮向下滚动时候，box1变长
* 当滚轮向上滚动时候，box1变短
*/
// 判断鼠标滚轮滚动方向
if (event.wheelDelta > 0 || event.detail < 0) {
// alert("变小");
box1.style.height = box1.clientHeight - 10 + "px";
} else {
// alert("变大");
box1.style.height = box1.clientHeight + 10 + "px";
}
/**
* 滚轮滚动时候，如果浏览器有滚动条，滚动条随之滚动
* 这是浏览器默认行为，如果不希望发生，可以取消默认行为
*
* 注意：
* 火狐使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
* 需要使用event来取消默认行为event.preventDefault()
* 但是IE8不支持event.preventDefault()这个东西，如果直接调用会报错
*/
event.preventDefault && event.preventDefault();
return false;
}
// 为火狐浏览器绑定滚轮事件
// 在firefox中使用addEventListener("DOMMouseScroll", func)来监听鼠标滚轮的操作
// 事件结果由event.detail返回，向上滚动时返回-3，向下滚动时返回3
// 但是addEventListener()方法在IE8及以下不兼容, 要换成attachEvent方法
bind(box1, "DOMMouseScroll", box1.onmousewheel);
function bind(obj, eventStr, callback) {
if (obj.addEventListener) {
//大部分浏览器兼容的方式
obj.addEventListener(eventStr, callback, false);
} else {
//IE8及以下
obj.attachEvent("on" + eventStr, function () {
callback.call(obj);
});
}
}
}
</script>
</head>
<body style="height: 2000px;">
<div id="box1"></div>
</body>
</html>
7.2 键盘事件
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document;
onkeydown: 当一直按着时，事件会被连续触发，当连续触发的时候，第一次和第二次间隔会稍微长一些后面的才会快速触发，为了防止误操作; 可以通过keyCode来获取按年的编码, 可以通过它可以判断吧哪个键被按下;
事件属性：event.altKey/event.ctrlKey/event.shiftKey: 当这三个键被按下时它们的值会被赋值为true, 否则为false;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
//使div可以根据不同的方向键向不同的方向移动
/*
* 按左键，div向左移
* 按右键，div向右移
* ...
*/
window.onload = function(){
//为document绑定一个按键按下的事件
document.onkeydown = function(event){
event = event || window.event;
//定义一个变量，来表示移动的速度
var speed = 10;
//当用户按了ctrl以后，速度加快
if(event.ctrlKey){
speed = 500;
}
/*
* 37 左
* 38 上
* 39 右
* 40 下
*/
switch(event.keyCode){
case 37:
//alert("向左"); left值减小
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
//alert("向右");
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
//alert("向上");
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
//alert("向下");
box1.style.top = box1.offsetTop + speed + "px";
break;
}
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
1245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
