event对象
用来获取事物的详细信息：鼠标位置、键盘按键
匿名函数括号里包含e,事件源对象,
e.clientx e.clientx 获得鼠标点击方位
注意点是IE5.7.8不支持参数e这种获取事件源的写法,但是event对象IE及谷歌都支持,但是低版本浏览器不支持,所以我们可以使用兼容写法
下图是获取键盘按键方法
keyCode是获取按下的相应键的值
获取event对象（兼容性写法）
o=e||event;
document.οnclick=function(e){
o=e||event;
alert(o.clientX+','+o.clientY);
}
练习:点击页面获取鼠标点击位置
事件流
从页面中接收事件的顺序
事件冒泡
当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window
只要子级接收了事件,那么无论使用那种绑定方法所有带事件的都会执行.这就是事件冒泡
阻止事件冒泡,与获取事件源一起阻止
非IE下：event.stopPropagation(); 在IE5.7.8中不支持
IE及谷歌下：event.cancelBubble=true;
事件捕获:
顺序会从父级往子级,与事件冒泡顺序相反
btn.
addEventListener("click",function(){
alert("我是第二种绑定事件的方法");
},false)
如果第三个参数传的是false,表示默认走冒泡事件
如果第三个参数传的是ture,表示默认走捕获事件
总结以下冒泡及捕获的顺序,可以参考图的案例:
点击事件的顺序是,先捕获,执行321,在冒泡,执行123;
移除绑定事件
removeEventlistener取消绑定,只取消第一个绑定事件.
阻止默认行为
第一种:在连接里,加#号变成锚连接是可以跳转,但是会产生历史记录,不推荐
建议使用javascript:;或javascript:void(0);可以阻止默认行为
第二种:使用js的方法阻止默认行为,有兼容问题
第三种:return false;使用这个一定要记得放到最后使用因为他会终止事件,返回false.没有兼容问题,但是要注意在原生js冒泡事件return是不能阻止默认行为的
除了onclick,我们还可以有许多可以阻止的,如图举例:
form表单阻止默认行为.表单的都可以用return false;来阻止他的默认行为
第四种 取消鼠标右键的默认行为
document.οncοntextmenu=function(){
return false; //阻止默认行为
}
这种方法也可以取消鼠标右键的默认行为.可以参考下
练习1：
仿浏览器菜单：
document.οncοntextmenu=function(e){
var oEvent=e||event;
var menu=document.getElementById("menu");
menu.style.display="block";
menu.style.left=oEvent.clientX+"px";
menu.style.top=oEvent.clientY+"px";
return false;
}
document.οnclick=function(){
menu.style.display="none";
}
练习2：
点击鼠标右键，阻止掉默认菜单，出现自定义菜单，且鼠标点击哪里，自定义菜单就在哪里
自定义菜单使用CSS制作，并添加过渡效果
<style>
* {
margin: 0;
padding: 0;
}
#idv1 {
border: 1px solid #ccc;
display: none;
width: 200px;
position: absolute;
/* transform: scale(2); */
/* transition-duration: 2s; */
}
li {
list-style: none;
padding: 8px;
}
</style>
</head>
<body>
<!-- 点击鼠标右键，阻止掉默认菜单，出现自定义菜单，且鼠标点击哪里，自定义菜单就在哪里
自定义菜单使用CSS制作，并添加过渡效果 -->
<div id="idv1">
<ul>
<li>返回</li>
<li>重新加载</li>
<li>另存为(A)...</li>
<li>打印(p)...</li>
<li>查看网页源代码</li>
</ul>
</div>
<script>
var li = document.querySelectorAll("li")
document.oncontextmenu = function (e) {
var oevent = e || event;
var div1 = document.getElementById('idv1');
div1.style.display = 'block';
div1.style.left = oevent.clientX + 'px';
div1.style.top = oevent.clientY + 'px';
return false;
}
for (var i = 0; i < li.length; i++) {
li[i].onmouseover = function () {
for (var j = 0; j < li.length; j++) {
li[j].style.background = "#fff"
li[j].style.color = "#000"
}
this.style.transition = "all,.5s"
this.style.background = "#ccc"
this.style.color = "#fff"
}
}
document.onclick = function () {
var div1 = document.getElementById('idv1');
div1.style.display = 'none';
}
</script>
练习3：
使用鼠标事件对象以及DOM属性完成拖拽案例
步骤：
鼠标按在红色方块上可以随意的在浏览器内拖拽红色方块
红色方块不可以超出上下左右浏览器的边界
鼠标松开红色方块时，红色方块被拖拽到了哪里便停在哪里即可
第一种写法:
<body>
<div class="drag"></div>
<script>
var drag = document.querySelector(".drag");
drag.onmousedown = function (e) {
var o = e || event
var x1 = o.clientX;
var y1 = o.clientY;
var l1 = this.offsetLeft;
var t1 = this.offsetTop;
window.onmousemove = function (e) {
var o = e || event
var x2 = o.clientX;
var y2 = o.clientY;
var l2 = l1 + (x2 - x1);
var t2 = t1 + (y2 - y1);
var maxW = document.documentElement.clientWidth - drag.offsetWidth;
var maxH = document.documentElement.clientHeight - drag.offsetHeight;
l2 < 0 ? l2 = 0 : l2 = l2;
t2 < 0 ? t2 = 0 : t2 = t2;
l2 > maxW ? l2 = maxW : l2 = l2;
t2 > maxH ? t2 = maxH : t2 = t2;
drag.style.left = l2 + 'px';
drag.style.top = t2 + 'px';
}
}
drag.onmouseup = function () {
window.onmousemove = null;
}
</script>
</body>
第二种写法:
<style>
#box
{
width
:
150px
;
height
:
150px
;
background
:
red
;
position
:
absolute
;
cursor
:
move
;
}
</style>
</head>
<body>
<div
id
=
"box"
></div>
<script>
var
box
=
document
.
getElementById
(
"box"
);
box
.
onmousedown
=
function
(
e
){
var
oEvent
=
e
||
event
;
//鼠标点击盒子的位置
var
x
=
oEvent
.
clientX
-
box
.
offsetLeft
;
var
y
=
oEvent
.
clientY
-
box
.
offsetTop
;
document
.
onmousemove
=
function
(
e
){
var
oEvent
=
e
||
event
;
//盒子到浏览器的左边距、上边距
var
left
=
oEvent
.
clientX
-
x
;
var
top
=
oEvent
.
clientY
-
y
;
var
maxW
=
document
.
documentElement
.
clientWidth
-
box
.
offsetWidth
;
var
maxH
=
document
.
documentElement
.
clientHeight
-
box
.
offsetHeight
;
if
(
left
<
0
)
left
=
0
;
if
(
top
<
0
)
top
=
0
;
if
(
left
>
maxW
)
left
=
maxW
;
if
(
top
>
maxH
)
top
=
maxH
;
box
.
style
.
left
=
left
+
"px"
;
box
.
style
.
top
=
top
+
"px"
;
}
}
box
.
onmouseup
=
function
(){
document
.
onmousemove
=
null
;
}
</script>
知识点:
获取文档的可视高度是值得,当时获取 body的高度为0,因为body我们没有设置高度
扫一扫
1573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
