1、事件介绍
事件:用户的行为所触发的效果,DOM使JavaScript有能力对HTML事件做出反应。
HTML事件例子:
当用户点击鼠标时;
当网页已加载时;
当图像已加载时;
当鼠标移动到元素上时;
当输入文字改变时;
当提交的HTML表单时;
当用户触发按键时
常见事件:
2、监听事件
监听函数是事件发生时,程序所要执行的函数。它是事件驱动编程模式的主要编程方式。DOM提供三种方法,可以用来为事件绑定监听函数。
HTML点击事件:HTML语言允许在元素标签的属性中,直接定义某些事件的监听代码。
DOM 0级事件:元素节点由事件属性,可以监听函数。
DOM 2级事件:定义事件的监听函数。
3种方式的区别:
方式1:监听函数后面覆盖前面。
<body> <div id="div2"style="background-color:orange;width:100px;height:100px;"οnclick="click1()"div> </body> <script> function click1(){ alert("click1"); } function click1(){ alert("click1-1"); } // click1-1 </script>
方式2:相同的事件监听函数定义,后面的覆盖前面的。
<body> <div id="div1"style="background-color:orange;width:100px;height:100px;"></div> </body> <script> vardiv1 = document.getElementById("div1"); div1.οnclick= function () { alert("click1"); } div1.οnclick= function () { alert("click2"); } // click2 </script>
方式3:相同的事件监听函数的定义不会产生覆盖
<body> <div id="div1"style="background-color:orange;width:100px;height:100px;"></div> </body> <script> div1.addEventListener("click",function() { alert("click1"); },false); div1.addEventListener("click",function() { alert("click2"); },false); //click1 click2 </script>
2.1事件捕获&冒泡
事件捕获:当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。
事件冒泡:当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。
W3C模型:默认是事件冒泡,直到到达document。
程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。
ele.addEventListener('click',doSomething2,true)
true=捕获
false=冒泡
<body>
<div id="div1" style="background-color: orange;width:100px;height: 100px;">
<div id="div2" style="background-color: darkgoldenrod;width:40px;height: 40px;"></div>
</div>
</body>
<script>
// test1:默认是事件冒泡
var div2 = document.getElementById("div2");
div2.onclick = function () {
alert("里面");
}
var div1 = document.getElementById("div1");
div1.onclick = function () {
alert("外面");
}
//点击div2 -- > 里面,外面
//test2:事件捕获
var div2 = document.getElementById("div2");
div2.addEventListener('click',function () {
alert("里面")
},true);
var div1 = document.getElementById("div1");
div1.addEventListener('click',function () {
alert("外面")
},true);
//点击div2 -- > 外面, 里面
//点击div1 -- > 外面
//test3:事件冒泡
var div2 = document.getElementById("div2");
div2.addEventListener('click',function (event) {
alert("里面");
},false);
var div1 = document.getElementById("div1");
div1.addEventListener('click',function () {
alert("外面");
},false);
//点击div2 -- > 里面,外面
//点击div1 -- > 外面
</script>
2.2阻止事件传播
• 在W3c中,使用event.stopPropagation()方法
在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~
见《javaScript Event》的描述。。。
Ps:在IE下设置cancelBubble = true;【老版的IE】
2.3阻止事件默认行为
使用event.stopPropagation()方法
3、JavaScript event
事件发生以后,会生出一个事件对象,作为参数传给监听函数。浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype对象。
3.1获取需要的参数
举例:使用console.log(event)输出鼠标点击事件。
常用的参数有:
表示鼠标距离屏幕左上角的位置:screenX、screenY
clientX、clientY:表示鼠标距离浏览器窗口左上角的位置(与页面是否横向滚动无关)
有垂直滚动条时,相对于垂直滚动条滑到顶部的左上角的位置
3.2Event常用属性和方法
(1)target属性:返回触发事件的那个节点,即事件最初发生的节点。
(2)preventDefault方法:取消浏览器对象当前事件的默认行为,比如点击链接,浏览器跳转到指定页面,或者按一下空格键,页面向下滚动一段距离。
(3)stopPropagation方法:阻止事件在DOM中继续传播,防止触发定义在别的节点上的监听函数,但不包括当前节点上新定义的事件监听函数。
还有其他属性:可自行通过console.log查看。
应用1:阻止浏览器默认行为
<a href="http://www.baidu.com">跳转到百度</a>
</body>
<script>
//阻止浏览器默认行为
var aObj = document.getElementsByTagName("a")[0];
aObj.onclick = function(event){
alert("a")
event.preventDefault();
}
//没有跳转到百度
</script>
应用2:阻止事件的传播
<body>
<div id="div1" style="background-color: orange;width:100px;height: 100px;">
<div id="div2" style="background-color: darkgoldenrod;width:40px;height: 40px;">
</div>
</div>
</body>
<script>
//阻止事件的传播
var div2 = document.getElementById("div2");
div2.addEventListener('click',function (event) {
alert("里面");
event.stopPropagation();
},false);
var div1 = document.getElementById("div1");
div1.addEventListener('click',function () {
alert("外面")
},false);
//点击div2 -- > 里面
//点击div1 -- > 外面
</script>
应用3:获取当前节点的信息
<body>
<a href="http://www.baidu.com">跳转到百度</a>
</body>
<script>
//获取当前节点的信息
var aObj = document.getElementsByTagName("a")[0];
aObj.onclick = function(event){
alert("a")
event.target.innerHTML = "跳转到百度开发者平台";
event.target.href="https://app.baidu.com/";
}
</script>
ps:<a href="http://www.baidu.com"οnclick="javascript:void(0)">跳转到百度</a>
javascript:void(0)
void是无返回值的操作,点击这个时候没有任何反应。而且如果在a标签中,如果href="#",点击后会回到网页顶部,javascript:void(0)会没有任何反应
3.3Event对象的一些兼容性写法
· 获得event对象兼容性写法
event|| (event = window.event);
· 获得target兼容型写法
event.target||event.srcElement
· 阻止浏览器默认行为兼容性写法
event.preventDefault? event.preventDefault() : (event.returnValue = false);
· 阻止冒泡写法
event.stopPropagation? event.stopPropagation() : (event.cancelBubble = true);
阻止默认事件
if(e&&e.stopPropagation){
e.preventDefault();
}else{
window.event.returnValue = false;
}
阻止事件传播
if(e&&e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}