一、事件概述
事件三要素:
事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)
二、事件的绑定
<body>
<!-- 1、行内方式绑定(元素属性) -->
<input type="button" value="按钮" id="btn" onclick="fn()">
</body>
<script>
function fn(){
alert(6);
}
</script>
<body>
<!-- 2、动态绑定(节点对象属性) -->
<input type="button" value="按钮" id="btn">
</body>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
alert(8);
}
</script>
<body>
<!-- 3、事件监听(节点对象方法) -->
<input type="button" value="按钮" id="btn">
</body>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
alert(6);
});
</script>
注意:行内绑定和动态绑定需要在事件名称前加on,而事件监听不需要在事件名称前加on
针对同一个元素的同一个事件,如果定义多个:
行内绑定:谁在前谁执行
动态绑定:后边的执行函数会将前面的覆盖掉(前边的不会执行)
事件监听:可以添加多个监听处理函数,都会执行
移除监听事件:
<body>
<!-- 移除监听事件 -->
<input type="button" value="按钮" id="btn">
</body>
<script>
function fn(){
alert(8);
}
var btn = document.getElementById('btn');
btn.addEventListener('click',fn);
btn.removeEventListener('click',fn);
</script>
三、事件类型
<!-- 页面事件(资源事件):在一个资源及其相关资源完成加载的时候触发 -->
<body onload="fn()">
body内容
</body>
<script type="text/javascript">
function fn(){
alert("fn");
}
</script>
<body>
<!-- 焦点事件: -->
<!-- focus元素:获得焦点时触发(不会冒泡) -->
<!-- blur元素:失去焦点时触发(不会冒泡) -->
<input type="text" id="tx" value="请输入文本" onfocus="fc()" onblur="bl()">
</body>
<script type="text/javascript">
function fc(){
document.getElementById('tx').value = "";
}
function bl(){
alert(document.getElementById('tx').value);
}
</script>
鼠标事件:
<!-- 禁止复制页面文字 -->
<body>
<div style="border:1px solid red;width: 200px;height: 100px;" id="div">
div内文字
</div>
</body>
<script type="text/javascript">
document.getElementById('div').oncopy = function(){
alert("无法复制!");
return false;
};
</script>
键盘事件:
<!-- 在网页中用上下左右键控制图片上下左右移动 -->
<body>
<img src="./abc.jpg" width="100" style="position: absolute;left:0px;top:0px;" id="img">
</body>
<script>
document.onkeydown = function(ev){
var img = document.getElementById('img');
var left = parseInt(document.getElementById('img').style.left);
var top = parseInt(document.getElementById('img').style.top);
if(ev.keyCode==37){
img.style.left = (left-10)+'px';
}
if(ev.keyCode==38){
img.style.top = (top-10)+'px';
}
if(ev.keyCode==39){
img.style.left = (left+10)+'px';
}
if(ev.keyCode==40){
img.style.top = (top+10)+'px';
}
}
</script>
Form表单事件:
<body>
<form id="form" action="sub.php">
姓名:<input type="text" name="" value=""><br>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</form>
</body>
<script type="text/javascript">
document.getElementById('form').onsubmit = function(){
var val = document.getElementsByTagName('input')[0];
if(val.value=="和尚周") return false;
}
document.getElementById('form').onreset = function(){
return confirm("你确定要重置吗?");
}
</script>
内容变化事件:
change: 当内容改变且失去焦点时触发 (存储事件)
input : 当内容改变时触发 (值变化事件)
四、事件的传播
当点击div1时,触发事件1,紧接着,事件2和事件3也被触发了。这种现象,我们称为事件冒泡。
在JS中当一个事件发生以后,它会在不同的DOM节点之间传播。这种传播分成三个阶段:
第一阶段:从window对象传导到目标节点(捕获阶段)。
第二阶段:在目标节点上触发,(目标阶段)。
第三阶段:从目标节点传导回window对象,(冒泡阶段)。
事件传播的最上层对象是window;事件的传播顺序,在捕获阶段依次为window、document、html、body、div;在冒泡阶段依次为div、body、html、document、window。
注意:三种事件绑定方式全部默认为监听冒泡阶段事件。
改变事件触发的阶段:
div2.addEventListener('click',function(){
alert('div2');
},true);//捕获阶段触发(最后一个参数设置为true即可)
阻止浏览器默认行为、阻止事件传播:
event.preventDefault()
:方法取消浏览器对当前事件的默认行为,比如点击链接后,浏览器跳转到指定页面,或者按一下空格键,页面向下滚动一段距离。event.stopPropagation()
:方法阻止事件在DOM中继续传播,防止再触发定义在别的节点上的监听函数
五、事件对象
<body>
<div id="div" style="border:1px solid red;width:100px;height:50px;">
<p>p标签中内容</p>
</div>
<input type="text" value="" id="inp">
</body>
<script>
//鼠标事件
document.getElementById('div').addEventListener('click',function(ev){
console.log(ev);
});
//键盘事件
document.getElementById('inp').addEventListener('keydown',kd);
function kd(ev){
console.log(ev);
};
</script>
六、事件委托
event.target
:对事件起源目标的引用,属性返回触发事件的那个节点。event.currentTarget
:属性返回事件当前所在的节点,即正在执行的监听函数所绑定的那个节点。作为比较,target属性返回事件发生的节点。
由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理也叫 事件委托 也有人称为 事件代理
<!-- 实现网页中图片跟随鼠标移动而移动 -->
<body>
<img src="./abc.jpg" width="100" id="img" style="position: absolute;">
</body>
<script type="text/javascript">
document.onmousemove = function(ev){
//事件对象ev
//console.log(ev);
document.getElementById("img").style.left = ev.clientX+"px";
document.getElementById("img").style.top = ev.clientY+"px";
}
</script>
<!-- div内跟随鼠标显示像素位置 -->
<body>
<div style="width: 200px;height: 200px; border: 1px solid red" id="div"></div>
<span id="span" style="position:absolute;"></span>
</body>
<script>
document.getElementById('div').onmousemove = function(ev){
document.getElementById('span').style.left = ev.clientX+"px";
document.getElementById('span').style.top = ev.clientY+"px";
document.getElementById('span').innerText = ev.clientX+"px,"+ev.clientY+"px";
}
</script>