首页 > 网站开发 > JavaScript教程 >
-
WEB前端第三十一课——js事件处理-鼠标
1.事件基础
事件，是一种可以被js检测到的行为，本质是一种交互操作
事件的作用：
① 各个元素之间可以借助事件进行交互
② 用户和页面之间也可以通过事件交互
③ 后端和页面之间也可以通过事件交互
注意，事件通常与函数配合使用，事件发生时触发函数执行
2.事件传递
js中规定，事件不仅能和触发者交互，还会在特定情况下沿着DOM tree逐级传递，和DOM tree中的各个节点进行交互，这种事件处理机制称作事件传递
特定情况是指DOM tree不同层级中存在同名事件
事件传递的方式主要有两种：
事件冒泡，从最具体的元素开始，沿着DOM tree逐级向上依次触发，直至最不具体的元素停止
事件捕获，从最不具体的元素开始，沿着DOM tree逐级向下依次触发，直至最具体的元素停止
3.事件绑定
① HTML事件
绑定操作发生在HTML代码中的事件，成为HTML事件
语法：on+事件=' 函数1() ; 函数2() ;...' ，on事件作为属性添加给元素，示例如下：
|
1
2
3
4
5
|
<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(){ 函数体; };
获取鼠标移动坐标轨迹测试代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<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.拖动条鼠标事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<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.导航栏鼠标事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<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.拖动元素鼠标事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<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> |
出处：https://www.cnblogs.com/husa/p/13574927.html
