JavaScript基础（三） 事件
事件流
事件流意味着页面上不止一个元素可响应相同的事件
如：当我们点击页面上的按钮时，实际上我们是点击了按钮，以及按钮的容器——整个页面。
事件冒泡
window ← document ← html ← body ← div
由点击的位置扩散到整个界面
事件捕获
由整个界面缩小到点击的位置
window → document → html → body → div
DOM事件流
包含事件冒泡和事件捕捉
传统事件处理程序指派方法
一、取得id = div1的元素节点。
var div1 = document.getElementById("div1");
//设置元素节点的onclick属性
div1.onclick = function(){alert("div1 被点了");}
或
function divClick(){alert(‘点中’);}
div1.onclick=divClick;
注意： 1、绑定事件处理程序时，后面不能加括号
2.必须确保在元素之后设置事件处理程序。
3.可在window.onload中指定处理程序。
window.onload = function(){}页面加载完成后自动调用
二、在事件属性中指定
<div id="div1" onclick="alert("div1 被点了.");" ></div>
现代事件处理程序指派方法
DOM
var div1 = document.getElementById("div1");
//添加事件处理程序,true:捕获阶段; false:冒泡阶段
div1.addEventListener("click",click1,false);
//删除事件处理程序
div1.removeEventListener("click",click1,false);
function click1(){
alert("div1 is click...");
}
提示：删除事件处理程序时，阶段要相同。 传统事件处理程序是在冒泡阶段添加的。
事件处理程序的返回值
利用事件处理程序的返回值，可以影响事件的默认行为
超链接例子:
<a href="a.html" onclick="return confirm('要跳转吗？')">a.html</a>
注意：是根据返回结果是true或false来确定是否执行默认行为。
得到event对象
DOM
div1.onclick = function(){
var e = arguments[0];//event对象
}
或者：
在元素标签内设置事件的时候，作为函数的参数直接传过去，this当前节点，event就是event对象
<div onclick="text(this,event)"></div>
函数：
function text（obj,e）｛
｝
event的属性和方法
获取事件类型：e.type
获取键盘码：keydown/keyup
检测是否按下e.shiftKey,e.altKey,e.ctrlKey
获取客户坐标:e.clientX,e.clientY //基于body的坐标
获取屏幕坐标：e.screenX,e.screenY
获取基于当前元素的坐标：e.offerX,e.offerY
获取事件源 e.srcElement
获取字符的编码 e.keyCode
获取字符 e.key
阻止默认行为 e.returnValue=false //可以用于限制键盘的输入类型
中止冒泡传播 e.cancelBubble=true
阻止默认事件：
<a href="http://www.baidu.com" onclick="stop(event)">百度</a>
<script>
function stop(event) {
if (event.preventDefault()) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
</script>
阻止跳转：
<a href="javascript:void(0)">不跳转</a>
鼠标事件
常见事件
click：单击
dblclick：双击
mousedown：鼠标按下
mouseup：鼠标抬起
mouseout、mouseleave：鼠标离开
mousemove：鼠标移动
mouseenter、mouseover：鼠标进入
事件发生顺序
单击：mousedown,mouseup,click
双击：mousedown,mouseup,click,mousedown,mouseup,click,doubleclick
键盘事件
常见事件
keydown 按下
keypress 可以阻止键盘输入0
keyup 松开
事件发生顺序
字符键：keydown,keypress,keyup
非字符键：keydown,keyup
HTML事件
常见事件
load：文档加载完成
select：被选中的时候
change：内容被改变
focus：获取焦点
resize：窗口尺寸变化
scroll：滚动条移动
blur: 失去焦点
submit: 用于阻止表单提交
<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()">
<script>
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("滚动");
}
</script>
