CRainyDay

DOM事件

一.事件对象

事件对象: 当事件对应的响应函数被触发时, 浏览器每次都会将一个事件对象作为实参传递进响应函数, 在事件对象中封装了当前事件相关的一切信息, 比如: 鼠标坐标、键盘哪个按键被按下、鼠标滚轮滚动方向。。。

IE8及以下浏览器, 响应函数被触发时, 浏览器不会传递事件对象, 而把事件对象作为window对象的属性保存

事件句柄 描述
onmousemove 鼠标被移动
onunload 用户退出页面
onfocus 元素获得焦点
鼠标属性 描述
clientX 返回当事件被触发时,鼠标指针的水平坐标
clientY 返回当事件被触发时,鼠标指针的垂直坐标
pageX 鼠标相当于当前页面的水平坐标(IE9+)
pageY 鼠标相当于当前页面的垂直坐标(IE9+)
注意: 所有的html代码, 均可直接复制, 然后粘贴到W3School 代码区, 点击提交代码在线执行.

1.div随鼠标移动

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
<head>
<script type="text/javascript">
window.onload = function() {
var move = document.getElementById("move");
document.onmousemove = function(event){
event = event||window.event;
var st = document.body.scrollTop||document.documentElement.scrollTop;
var sl = document.body.scrollLeft||document.documentElement.scrollLeft;
var left = event.clientX + sl;
var top = event.clientY + st;
//clientY是相对于浏览器原点鼠标的垂直坐标,
//当页面中有滚动条时会出现错误,需要修改坐标
//你可以将+sl或+st去掉试试
move.style.left = left + "px";
move.style.top = top + "px";
};
};
</script>
<style type="text/css">
body{
height: 1000px;
width: 2000px;
}
#move{
width: 100px;
height: 100px;
background-color: red;
/*开启定位,否则设置div的left和top没用*/
position: absolute;
}
</style>
</head>
<body>
<div id="move"></div>
</body>

二.事件的冒泡

所谓事件冒泡, 就是指事件的向上传导, 当后代元素上的事件被触发时, 其祖先元素的相同事件也会被触发

而在开发中, 大部分情况下冒泡都是有用的, 但是有时候我们不希望事件冒泡.

取消冒泡: 通过将事件对象的cancelBubble属性设置为true, 即可取消冒泡.

例: 取消id为box的div的onmousemove事件的冒泡, 红色的div则不能随鼠标移动到box上

点击显/隐内容
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
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload = function() {
var move = document.getElementById("move");
var box = document.getElementById("box");
document.onmousemove = function(event){
event = event||window.event;
var st = document.body.scrollTop||document.documentElement.scrollTop;
var sl = document.body.scrollLeft||document.documentElement.scrollLeft;
var left = event.clientX + sl;
var top = event.clientY + st;
move.style.left = left + "px";
move.style.top = top + "px";
};
box.onmousemove = function(event){
event = event||window.event;
//取消box的onmousemove的冒泡
event.cancelBubble = true;
};
};
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 1000px;
width: 2000px;
}
#move{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box" style="width: 400px;height: 400px;background-color: #bfa;">
</div>
<div id="move"></div>
</body>

三.事件的委派

所谓事件委派, 就是指将事件统一绑定给元素的共同的祖先元素, 这样当后代元素上的事件触发时, 会一直冒泡到祖先元素, 从而通过祖先元素的响应函数来处理事件, 但是这样的话有时候我们点击页面往往会出现不可预料的结果: 我们不知道到底是什么触发了这个事件.

事件委派就是利用了事件冒泡, 通过委派可以减少事件的绑定次数, 提高程序性能

  • 通过事件对象的target属性, 可以获取触发此次事件的对象
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
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload = function() {
var btn01 = document.getElementById("btn01");
var u1 = document.getElementById("u1");
btn01.onclick = function() {
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link'>新超链接</a>";
u1.appendChild(li);
};
u1.onclick = function(event) {
event = event || window.event;
alert(event.target);
if (event.target.className.match(/\blink\b/)) {
alert("我是ul的单击响应函数");
}
};
};
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: #bfa;">
<li><p>123</p></li>
<li><a href="javascript:;" class="linkkk">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>

四.事件的绑定

  • 使用 对象.事件 = 响应函数; 形式为元素绑定事件响应函数, 只能同时为一个元素的一个事件绑定一个响应函数, 不能绑定多个, 若绑定了多个, 则最后绑定的函数生效.
  • 但是, 在有的时候, 我们就希望为一个元素的相同事件绑定多个响应函数, 此时可用元素的addEventListener()方法绑定响应函数

addEventListener()
—— 参数:1.事件的字符串, 不要on, 例 :”onclick”应为”click”
——2.回调函数, 当事件触发时调用
——3.是否在捕获阶段触发事件, 需要一个布尔值, 一般传false
可以绑定多个响应函数, 事件被触发时, 顺序执行绑定的响应函数
IE8及以下要用attachEvent()方法代替, 但它的执行顺序与addEventListener()方法相反

addEventListener()中的this是绑定该事件的对象, 而attachEvent()中的this是window

想要兼容各种浏览器, 就需要自己写一个方法:
——参数:
——obj 要绑定事件的对象
——eventStr 要绑定事件的字符串(不要”on”)
——callback 回调函数

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
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function bind(obj,event,callback){
if(obj.addEventListener){
//大部分浏览器
obj.addEventListener(event,callback,false);
}else{
//IE8及以下
/* 修改回调函数中的this为传入的obj对象
* this是由调用方式决定的
* 通过callback.call(obj)方式可以修改调用方法时的this
*/
obj.attachEvent("on"+event,function(){
callback.call(obj);
});
}
}
window.onload = function() {
var btn01 = document.getElementById("btn01");
bind(btn01,"click",function(){
alert(this);
alert(1);
});
bind(btn01,"click",function(){
alert(2);
});
};
</script>
</head>
<body>
<button type="button" id="btn01">bind()</button>
</body>

 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有