WEB前端第三十一课——js事件处理-鼠标
1.事件基础
事件，是一种可以被js检测到的行为，本质是一种交互操作
事件的作用：
① 各个元素之间可以借助事件进行交互
② 用户和页面之间也可以通过事件交互
③ 后端和页面之间也可以通过事件交互
注意，事件通常与函数配合使用，事件发生时触发函数执行
2.事件传递
js中规定，事件不仅能和触发者交互，还会在特定情况下沿着DOM tree逐级传递，和DOM tree中的各个节点进行交互，这种事件处理机制称作事件传递
特定情况是指DOM tree不同层级中存在同名事件
事件传递的方式主要有两种：
事件冒泡，从最具体的元素开始，沿着DOM tree逐级向上依次触发，直至最不具体的元素停止
事件捕获，从最不具体的元素开始，沿着DOM tree逐级向下依次触发，直至最具体的元素停止
3.事件绑定
① HTML事件
绑定操作发生在HTML代码中的事件，成为HTML事件
语法：on+事件=' 函数1() ; 函数2() ;...' ，on事件作为属性添加给元素，示例如下：
<body>
<ul class="ulEvent" onclick="function1() ; function2() ;">
<li class="liEvent" onclick="function2()">事件冒泡</li>
</ul>
</body>
上述代码中，点击<li>时会先执行<li>的绑定事件，即执行 function2()函数
然后按照事件冒泡机制传递到上一级DOM节点<ul>，执行<ul>中的 function1()和 function2()函数
HTML事件是采用冒泡机制进行处理的，同一级函数的执行顺序按照绑定函数时的自然顺序为准
② HTML事件的移除
语法：元素节点 .setAttribute（'on+事件名' , null）;
HTML事件缺陷：耦合性太强，修改一处另一处也要修改；
当函数没有加载成功时，触发事件则会报错。
③ DOM0级事件
在js脚本中，直接通过“on+事件名”方式绑定的事件称为DOM0级事件
语法：元素节点 .on+事件名=function(){ 函数体 };
示例：btn .onclick = function(){ console.log('点击按钮触发事件'); };
DOM0级事件均以冒泡机制处理，不存在兼容问题
④ DOM0级事件的移除
语法：元素节点 .on+事件名=null;
示例：btn .onclick = function(){
console.log('点击按钮触发事件');
btn.onclick=null; //移除语句在函数内部，触发事件则会执行一次
}; //移除语句在函数外部，触发事件则不会执行
DOM0级事件缺陷：一次只能绑定一个触发函数，如果同时绑定多个，则以最后一个绑定事件为准
⑤ DOM2级事件
在js脚本中，通过按 addEventListener函数绑定的事件称为DOM2级事件
语法：元素节点 .addEventListener（'type' , listener , useCapture）;
参数 type，事件类型（不加 on！）
参数 listener，监听函数，绑定的函数
参数 useCapture，是否使用捕获机制（默认false：冒泡，true：捕获）
DOM2级事件可以绑定多个函数，执行顺序按照书写时的自然顺序
示例：
btn .addEventListener('click' , function(){ 函数体1 },true);
btn .addEventListener('click' , 外部函数名(),true);
⑥ DOM2级事件的移除
语法：元素节点 .removeEventListener(type, 外部函数(), useCapture);
注意：
如果绑定函数为“匿名函数”则无法删除，能够删除的只有外部函数
如果删除的事件为捕获机制，则第三个参数必须写 true，如果是默认可以不写
4.IE浏览器事件绑定
HTML事件和 DOM0级事件 在IE浏览器中的处理程序与非IE环境相同，但是 DOM2级事件处理方式不同
① IE浏览器环境下 DOM2级事件，在js脚本中，需要通过 attachEvent函数绑定事件
语法：元素节点 .attachEvent(' type ', listener);
参数 type，事件类型（需要加 on！）
参数 listener，监听函数，绑定的函数
注意，如果绑定多个函数，则按照函数书写的倒序执行！
② IE浏览器环境下，DOM2级事件移除
语法：元素节点 .detachEvent(' type ' , listener);
注意，匿名函数无法被删除！
5.鼠标事件
js鼠标事件是指通过鼠标一系列操作（如点击、进入等）来出发的时间
① 鼠标事件类型：
click，单击事件
dblclick，双击事件
mousedown，鼠标按下时触发
mouseup，鼠标抬起时触发
mousemove，鼠标移动时触发
mouseenter，鼠标移入时触发（不冒泡）
mouseleave，鼠标移除时触发（不冒泡）
mouseover，鼠标移入时触发（冒泡）
mouseout，鼠标移出时触发（冒泡）
语法：元素节点 .on+鼠标事件名 = 调用函数名；
示例：slem .ondblclick = function(){ 函数体; };
获取鼠标移动坐标轨迹测试代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
</head>
<body>
<div style="width:300px;height:300px;margin:100px auto;background-color:hotpink">
mouseEventTest
</div>
<script>
var div=document.querySelector('div');
div.onmousemove=function () {
var x=event.clientX;
var y=event.clientY;
//event对象仅在函数内部使用，表示事件本身
//clientX、clientY表示鼠标在窗口中的坐标
console.log('(x,y):('+x+','+y+')');
}
var div1=document.getElementsByTagName('div');
console.log(div1[0].firstChild.nodeValue);
// 也可以使用 .getElementsBy方法，但返回结果为集合，使用时需要加下标！
</script>
</body>
</html>
② 鼠标事件原则
鼠标的基本事件默认采用冒泡传递
可以给一个节点添加多个鼠标事件，不同的鼠标事件之间互不影响
mouseenter和mouseleave两个事件为不冒泡事件
6.拖动条鼠标事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标事件</title>
<style>
input{
width: 300px;
margin: 100px 600px 0px;
}
#tips{
width: 30px;
height: 25px;
margin: 0px 750px;
padding: 0;
font-size: 18px;
text-align: center;
border: 1px solid aqua;
position: absolute;
display: none;
}
</style>
</head>
<body>
<input type="range" min="0" max="100" value="50">
<div id="tips"></div>
<script>
var input=document.querySelector('input');
var tips=document.getElementById('tips');
function move(){
input.onmousemove=function () {
var x=event.clientX;
var Y=event.clientY;
// 使用switch语句控制提示框移动范围
/* switch (x>0) {
case x<600:tips.style.left=-150+'px';
break;
case x>900:tips.style.left=150+'px';
break;
case x>=600&&x<=900:tips.style.left=(x-750)+'px';
break;
}*/
// 使用if语句控制提示框移动范围
if (event.clientX>900){
x = 900;
}else if (event.clientX<600){
x = 600;
}else{
tips.style.left=(x-750)+'px';
}
tips.innerHTML=input.value;
// console.log('(x,y):('+x+','+'y'+')');
}
};
input.onmousedown=function () {
tips.style.display='block'
move();
};
input.onmouseup=function () {
tips.style.display='none'
input.onmousemove=null;
}
</script>
</body>
</html>
7.导航栏鼠标事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏hover效果鼠标事件</title>
</head>
<body>
<script>
var ul=document.createElement('ul');
ul.style.listStyle='none';
ul.style.padding='0';
var navArr=['首页','财经','政治','军事','娱乐','天气'];
for (var i=0;i<navArr.length;i++){
var li=document.createElement('li');
li.innerHTML=navArr[i];
li.style.cssText='width:80px;height:30px;text-align:center;' +
'line-height:30px;display:inline-block;background-color:lightblue;'
ul.appendChild(li);
//触发事件只能写在循环内部
//设置菜单hover效果
li.onmouseenter=function(){
//this对象表示函数的调用对象，即谁调用了该函数this就代表谁
//如果使用li设置style属性则只有最后一次循环生效
this.style.backgroundColor='orange';
}
li.onmouseleave=function () {
this.style.backgroundColor='lightblue';
}
//当<li>标签内嵌套有<a>标签时，设置li内非<a>标签区域的链接跳转，可以使用下面方法
/* li.onclick=function () {
this.querySelector('a').click();
}*/
}
document.body.appendChild(ul);
</script>
</body>
</html>
8.拖动元素鼠标事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素拖动鼠标事件</title>
<style>
#ball{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: aqua;
/*box-shadow: -10px -10px 10px 5px darkorange;*/
position: absolute;
}
</style>
</head>
<body>
<div id="ball"></div>
<script>
var ball=document.getElementById('ball');
var flag=false;
ball.onmousedown=function(){
flag = true;
}
ball.onmouseup=function(){
flag = false;
}
ball.onmousemove=function(){
if (flag==true){
ball.style.left=event.clientX-50+'px';
ball.style.top=event.clientY-50+'px';
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号