鼠标事件
click ： 单击
dblick：双击
mousedown：鼠标按下
mouseup：鼠标抬起
mouseout：鼠标离开
mousemove：鼠标一移动
mouseenter：鼠标进入
//html
<button onclick="myClick()">鼠标单击</button>
<button ondblclick="myDBClick()">鼠标双击</button>
<button onm ousedown="myMouseDown()" onm ouseup="myMouseUp()">鼠标按下和抬起</button>
<button onm ouseover="myMouseOver()" onm ouseout="myMouseOut()">鼠标悬浮和离开</button>
<button onm ousemove="myMouseMove()">鼠标移动</button>
<button onm ouseenter="myMouseEnter()" onm ouseleave="myMouseLeave()">鼠标进入和离开</button>
//JS
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("鼠标离开！")
}
键盘事件
keydown：按键按下
keyup：按键抬起
keypress：按键按下抬起
//html
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
//JS
/*输出输入的字符*/
function myKeyDown(id) {
console.log(document.getElementById(id).value);
}
/*按键结束，字体转换为大写*/
function myKeyUp(id) {
var text = document.getElementById(id).value;
document.getElementById(id).value = text.toUpperCase();
}
HTML事件
load：文档加载完成
select：被选中的时候
change：内容被改变
focus：得到光标
resize：窗口尺寸变化
scroll：滚动条移动
//html
<body onl oad="loaded()">
<div style="height: 3000px" ></div>
<input type="text" id="name" onselect="mySelect(this.id)">
<input type="text" id="name2" onchange="myChange(this.id)">
<input type="text" id="name3" onfocus="myFocus()">
</body>
//JS
window.onload = function () {
console.log("文档加载完毕！");
};
/*window.onunload = function () {
alert("文档被关闭！");
};*/
/*打印选中的文本*/
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("滚动");
}
事件模型
//html
<body>
<!--脚本模型：行内绑定-->
<button onclick="alert('hello')">hello</button>
<!--内联模型-->
<button onclick="showHello()">hello2</button>
<!--动态绑定-->
<button id="btn">hello3</button>
</body>
//JS
<script>
function showHello() {
alert("hello");
}
/*DOM0：同一个元素只能添加一个同类事件
* 如果添加多个，后面的会把前面的覆盖掉*/
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("hello");
};
btn.onclick = function () {
alert("hello world");
};
/*DOM2:可以给一个元素添加多个同类事件*/
btn.addEventListener("click", function () {
alert("hello1");
});
btn.addEventListener("click", function () {
alert("hello2");
});
/*不同浏览器的兼容写法*/
/*IE*/
if (btn.attachEvent) {
btn.attachEvent("onclick", function () {
alert("hello3");
});
/*W3C*/
} else {
btn.addEventListener("click", function () {
alert("hello4");
})
}
</script>
事件冒泡与事件捕获
冒泡
<div id="s1">s1
<div id="s2">s2</div>
</div>
<script>
s1.addEventListener("click",function(e){
console.log("s1 冒泡事件");
},false);
s2.addEventListener("click",function(e){
console.log("s2 冒泡事件");
},false);
</script>
捕获
<div id="s1">s1
<div id="s2">s2</div>
</div>
<script>
s1.addEventListener("click",function(e){
console.log("s1 捕获事件");
},true);
s2.addEventListener("click",function(e){
console.log("s2 捕获事件");
},true);
</script>