事件流
事件流意味着页面上不止一个元素可响应相同的事件
如:当我们点击页面上的按钮时,实际上我们是点击了按钮,以及按钮的容器——整个页面。
事件冒泡
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.οnclick=divClick;
注意: 1、绑定事件处理程序时,后面不能加括号
2.必须确保在元素之后设置事件处理程序。
3.可在window.onload中指定处理程序。
window.onload = function(){}页面加载完成后自动调用
二、在事件属性中指定
<div id="div1" οnclick="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" οnclick="return confirm('要跳转吗?')">a.html</a>
注意:是根据返回结果是true或false来确定是否执行默认行为。
得到event对象
DOM
div1.onclick = function(){
var e = arguments[0];//event对象
}
或者:
在元素标签内设置事件的时候,作为函数的参数直接传过去,this当前节点,event就是event对象
<div οnclick="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" οnclick="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" οnselect="mySelect(this.id)">
<input type="text" id="name2" οnchange="myChange(this.id)">
<input type="text" id="name3" οnfοcus="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>