您的位置：首页 > Web前端 > JavaScript

JavaScript之DOM的三大事件及事件模型

2017-08-22 17:54 661 查看

DOM的三大事件：1.鼠标事件

2.键盘事件

3.HTML事件
1.鼠标事件

click：单击
dblclick：双击
mousedown：按下鼠标 mousepress：按下到松开鼠标的过程

mouseup：松开鼠标

mouseove：鼠标移到什么上 mouseout：鼠标从哪移开

mousemove：移动鼠标

mouseenter：鼠标进入 mouseleave：鼠标离开
<body>
<buttononclick="myClick()">单击显示内容</button>
<button
ondblclick="myDBclick()">双击显示内容</button>
<button
onmousedown[/b]="myMousedown()"
onmouseup="myMouseup()">按下和松开鼠标显示内容</button>
<button
onmouseover="myMouseover()"
onmouseout="myMouseout()">移到和移开button上显示内容</button>
<button
onmousemove="myMousemove()">移动鼠标显示内容</button>
<button
onmouseenter="myMouseEnter()"
onmouseleave="myMouseLeave()">鼠标进入和离开</button>
</body>
<script>
function myClick() {
console.log("你单击了按钮");
}
function myDBclick() {
console.log("你双击了按钮");
}
function myMousedown() {
console.log("你按下了鼠标");
}
function myMouseup() {
console.log("你松开了了鼠标");
}
function myMouseover() {
console.log("你把鼠标移到了按钮上");
}
function myMouseout() {
console.log("你移开了鼠标");
}
function myMousemove() {
console.log("你移动了鼠标");
}
function myMouseEnter() {
console.log("鼠标进入！")
}
function myMouseLeave() {
console.log("鼠标离开！")
}
</script>
2.键盘事件
keydown：按下键盘
mousepress：按下到松开按键的过程
keyup：松开按键
（1）将输入的小写字母转化为大写字母
<body>
<input id="name" type="text"
onkeydown="myKeyDown(this.id)"

onkeyup="myKeyUp(this.id)">
</body>
<script>
/*输出输入的字符*/
function myKeyDown(id) {
console.log(document.getElementById(id).value);
}
/*按键结束，字体转换为大写*/
function myKeyUp(id) {
var text = document.getElementById(id).value;
document.getElementById(id).value = text.toUpperCase();
}
（2）根据键盘按键数字代码如何转化为按键实际意义区分浏览器
/*onkeydown：不区分大小写*/
document.onkeydown = function (event) {
var code = 0;
if(window.event){
code
= event.keyCode; /*IE chrome*/
}else {
code = event.which; /*W3c标准*/
}
if(code == 37){
console.log("左键")
}else if(code == 38){
console.log("上键")
}else if(code == 39){
console.log("右键")
}else if(code == 40){
console.log("下键")
}
console.log(event.keyCode);
}
/*onkeypress ：区分大小写*/
window.onkeypress = function (event) {
console.log(event.keyCode)
}
</script>
3.HTML事件
load：文档加载完毕
Select：选择文本内容
Change：改变内容
Focus：获得光标
resize：网页窗口变化
scroll：滚动条滚动
<div style="height: 5000px">
<input id="name" type="text" onselect="mySelect(this.id)">
<input id="name2" type="text" onchange="myChange(this.id)">
<input id="name3" type="text" onfocus="myFocus(this.id)">
</div>
</body>
<script>
window.onload = function () {
console.log("文档加载完毕！");
};
function mySelect(id) {
var text = document.getElementById(id).value;
console.log(text);
}
function myChange(id) {
var text = document.getElementById(id).value;
console.log(text);
}
function myFocus() {
console.log("获得光标")
}
window.onresize = function () {
console.log("窗口变化！")
}
window.onscroll = function () {
console.log("滚动条滚动")
}
</script>

DOM之事件模型：脚本模型

内联模型

动态绑定
<body>

<button
onclick="javascrpt:alert('Hello')">Hello1</button>

<button
onclick="showHello()">Hello2</button>

<button
id="btn3">Hello3</button>
</body>
<script>
/*DOM0：同一个元素，同类事件只能添加一个，如果添加多个，
* 后面添加的会覆盖之前添加的*/
function shoeHello() {
alert("Hello");
}
var btn3 = document.getElementById("btn3");
btn3.onclick = function () {
alert("Hello");
}
/*DOM2:可以给同一个元素添加多个同类事件*/
btn3.addEventListener("click",function () {
alert("hello1");
});
btn3.addEventListener("click",function () {
alert("hello2");
})
if (btn3.attachEvent){
/*IE*/
btn3.attachEvent("onclick",function () {
alert("IE Hello1");
})
}else {
/*W3C*/
btn3.addEventListener("click",function () {
alert("W3C Hello");
})
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript dom 事件

相关文章推荐

新的分享

章节导航