<!
DOCTYPE html
>
<
html
lang
=
"en"
>
<
head
>
<
title
>
事件类型
</
title
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
script
src
=
"js/jquery.js"
>
<
/
script
>
<
style
>
.div1
{
position
:
absolute
;
left
:
100px
;
top
:
100px
;
width
:
250px
;
background-color
:
white
;
border
:
1px
solid
gray
;
}
.div2
{
background-color
:
gray
;
border-bottom
:
1px
dotted
black
;
padding
:
3px
;
font-family
: snas-serif;
font-weight
:
bold
;
}
<
/
style
>
</
head
>
<
body
>
<
div
class
=
"shipping_address"
></
div
>
<
form
id
=
"shipping_address"
></
form
>
<
button
id
=
"mybutton"
>
click me
</
button
>
<
button
id
=
"testButton"
>
click me again
</
button
>
<
button
id
=
"addBtn"
onclick
=
"addBtn()"
>
add
</
button
>
<
p
class
=
"pNumber"
>
0
</
p
>
<!-- <img src="image/assistant-loading.jpg" style="position:absolute;left:100px;top:100px;" οnmοusedοwn="if(event.shiftKey) drag(this.event)" id="img" /> -->
<!-- <img src="image/assistant-loading.jpg" id="img1" style="position:absolute;" /> -->
<
div
class
=
"div1"
>
<
div
class
=
"div2"
onmousedown
=
"drag(this.parentNode,event)"
>
拖动我
</
div
>
<
p
>
这是一个测试,这是一个测试,
</
p
>
</
div
>
<
script
>
window
.
onload
=
function
() {
// 查找一个form元素
var
elt
=
document
.
getElementById
(
"shipping_address"
);
// 注册一个处理程序函数
elt
.
onsubmit
=
function
() {
return
validata
(
this
);
}
};
// addEventListener
var
b
=
document
.
getElementById
(
"mybutton"
);
b
.
onclick
=
function
() {
console
.
log
(
"click"
);
};
b
.
addEventListener
(
"click"
,
function
() {
console
.
log
(
"hello world"
);
},
false
);
// 事件处理程序移除代码
// document.removeEventListener();
document
.
removeEventListener
(
"mousemove"
,
function
() {},
true
);
// ie浏览器的事件处理
var
b
=
document
.
getElementById
(
"mybutton"
);
var
handler
=
function
() {
console
.
log
(
"ie事件处理程序"
);
};
if
(
b
.
addEventListener
)
b
.
addEventListener
(
"click"
, handler,
false
);
else
if
(
b
.
attachEvent
)
b
.
attachEvent
(
"onclick"
, handler);
//事件处理程序参数
function
handler
(
event
) {
event
=
event
||
window
.
event
;
//处理程序代码
}
//事件处理程序的运行环境
var
e
=
document
.
getElementById
(
"mybutton"
);
e
.
onclick
=
function
() {};
function
addEvent
(
target
,
type
,
handler
) {
if
(
target
.
addEventListener
)
target
.
addEventListener
(type, handler,
false
);
else
target
.
attachEvent
(
"on"
+
type,
function
(
event
) {
// 把处理程序作为事件目标的方法调用
// 传递事件对象
return
handler
.
call
(target,
event
);
});
};
var
btn1
=
document
.
getElementById
(
"testButton"
);
var
type
=
"click"
;
var
handler
=
function
() {
console
.
log
(
"the world is very beautiful"
);
};
addEvent
(btn1, type, handler);
// 事件处理程序的作用域
// 调用顺序:
// 事件取消preventDefault(),取消事件的默认操作;
function
cancelHandler
(
event
) {
// 用于ie
var
event
=
event
||
window
.
event
;
//这里是处理事件的代码
if
(
event
.
preventDefault
)
event
.
preventDefault
();
//标准技术
if
(
event
.
returnValue
)
event
.
returnValue
=
false
;
return
false
;
};
// 文档加载事件
// 当文档准备就绪是调用函数
/*
*传递给whenReady(),当文档解析完毕且为操作准备就绪时
*函数将作为文档对象的方法调用
*DOMContentLoad readystatechange or load事件发生时会触发注册函数
*一旦文档准备就绪时,所有的函数都会被调用,任何传递给whenReady()的函数都将立即调用
*/
var
whenReady
=
(
function
() {
var
funcs
=
[];
var
ready
=
false
;
function
handler
(
e
) {
if
(ready)
return
;
if
(
e
.
type
===
"readystatechange"
&&
document
.
readyState
!==
"complete"
)
return
;
for
(
var
i
=
0
; i
<
funcs
.
length
; i
++
)
funcs[i].
call
(
document
);
ready
=
true
;
funcs
=
null
;
};
if
(
document
.
addEventListener
) {
document
.
addEventListener
(
"DOMContentLoaded"
, handler,
false
);
document
.
addEventListener
(
"DOMContentLoaded"
, handler,
false
);
window
.
addEventListener
(
"load"
, handler,
false
);
}
else
if
(
document
.
attachEvent
) {
document
.
attachEvent
(
"onreadystatechange"
, handler);
window
.
attachEvent
(
"onload"
, handler);
};
return
function
whenReady
(
f
) {
if
(ready)
f
.
call
(
document
);
else
funcs
.
push
(f);
}
}());
var
number1
=
0
;
var
firstNumber
=
document
.
getElementsByClassName
(
"pNumber"
)[
0
];
function
addBtn1
() {
number1
++
;
firstNumber
.
textContent
=
number1;
if
(
firstNumber
.
textContent
>=
11
) {
number1
=
10
;
alert
(
"每天最多只能点10个赞"
);
firstNumber
.
textContent
=
10
;
}
};
//拖动文档元素
// drag()函数,它用于mousedown事件处理程序的调用
//elementToDrag:接收mousedown事件的元素或其他某些包含元素,它必须是绝对定位的元素
// 它的style.left and style.top值随用户的拖动而改变
// function getScrollOffsets(e) {
// console.log([
// e.width,
// e.height
// ]);
// };
// var e = document.getElementById("img");
// // console.log(e);
// getScrollOffsets(e);
//查询窗口滚动条的位置
function
getScrollOffsets
(
w
) {
w
=
w
||
window
;
if
(
w
.
pageXOffset
!=
null
)
return
{
x
:
w
.
pageXOffset
,
y
:
w
.
pageYOffset
};
var
d
=
w
.
document
;
if
(
document
.
compatmode
==
"CSS1Compat"
)
return
{
x
:
d
.
documentElement
.
scrollLeft
,
y
:
d
.
documentElement
.
scrollTop
};
};
function
drag
(
elementToDrag
,
event
) {
// 初始鼠标的位置
var
scroll
=
getScrollOffsets
();
var
startX
=
event
.
clientX
+
scroll
.
x
;
var
startY
=
event
.
clientY
+
scroll
.
y
;
// 在文档坐标下,待拖动元素的初始位置
// 因为elementToDrag是绝对定位的
// 所以假设它的offsetParen就是文档的body元素
var
origX
=
elementToDrag
.
offsetLeft
;
var
origY
=
elementToDrag
.
offsetTop
;
// 计算mousedown事件和元素左上角的距离
var
deltaX
=
startX
-
origX;
var
deltaY
=
startY
-
origY;
// 注册用于相应接着mousedown事件发生的mousemove和mouseup事件的事件处理程序
if
(
document
.
addEventListener
) {
document
.
addEventListener
(
"mousemove"
, moveHandler,
true
);
document
.
addEventListener
(
"mouseup"
, upHandler,
true
);
}
else
if
(
document
.
attachEvent
) {
elementToDrag
.
setCapture
();
elementToDrag
.
attachEvent
(
"onmousemove"
, moveHandler);
elementToDrag
.
attachEvent
(
"onmouseup"
, upHandler);
// 作为mouseup事件看待鼠标捕获的丢失
elementToDrag
.
attachEvent
(
"onlosecapture"
, upHandler);
};
// 我们处理这个事件,不让任何其他元素看到他
if
(
event
.
stopPropagation
) {
event
.
stopPropagation
();
}
else
{
event
.
cancelBubble
=
true
;
};
// 现在阻止任何默认操作
if
(
event
.
preventDefault
) {
event
.
preventDefault
();
}
else
{
event
.
returnValue
=
false
;
};
// 当元素正在被拖动是,它就是捕获mousemove事件的处理程序
// 它用于移动这个元素
function
moveHandler
(
e
) {
if
(
!
e) {
e
=
window
.
event
;
};
var
scroll
=
getScrollOffsets
();
elementToDrag
.
style
.
left
=
(
e
.
clientX
+
scroll
.
x
-
deltaX)
+
"px"
;
elementToDrag
.
style
.
top
=
(
e
.
clientY
+
scroll
.
y
-
deltaY)
+
"px"
;
if
(
event
.
stopPropagation
) {
event
.
stopPropagation
();
}
else
{
event
.
cancelBubble
=
true
;
};
};
// 这里捕捉得失拖动结束时发生的最终mouseup事件的处理程序
function
upHandler
(
e
) {
if
(
!
e) {
e
=
window
.
event
;
};
if
(
document
.
removeEventListener
) {
document
.
removeEventListener
(
"mouseup"
, upHandler,
true
);
document
.
removeEventListener
(
"mousemove"
, moveHandler,
true
);
}
else
if
(
document
.
detachEvent
) {
elementToDrag
.
detachEvent
(
"onlosecapture"
, upHandler);
elementToDrag
.
detachEvent
(
"onmouseup"
, upHandler);
elementToDrag
.
detachEvent
(
"onmousemove"
, moveHandler);
elementToDrag
.
repleaseCapture
();
}
if
(
e
.
stopPropagation
) {
e
.
stopPropagation
();
}
else
{
e
.
cancelBubble
=
true
;
};
}
};
<
/
script
>
</
body
>
</
html
>