上一篇文章写的事件冒泡中的冒泡优点,涉及到了事件委托和事件对象(事件源),感觉一笔带过没有深入好好的了解,这不是一个好的学习态度呀,惭愧惭愧。
基本的概念就不再赘述了,贴心弄个传送门,不清楚了去看一看吧 ==》。那现在直接上栗子吧,上篇是原生JS,这次有用jQuery也有用到JS测试,需求是点击每一个列表项时都可以有相应的弹框出现。
<ul>
<li>这是个测试1</li>
<li>这是个测试2</li>
<li>这是个测试3</li>
<li>这是个测试4</li>
<li>这是个测试5</li>
</ul>
<script>
$("ul").on("click",function(e){
alert("你点击了: "+e.target.textContent);
})
</script>
至于样式,可以自行随便定义,但就算只是测试demo,但我仍然认真写了CSS为了舒心,如下这般效果:
上篇文章有说过,父元素 ul 上绑定事件是因为存在事件冒泡产生了事件委托,又因为存在事件对象可以确定是点击了哪个 li。但这认识果然浮于表面,今天细看了一下代码,还是存在了一些困扰,尤其是对于事件对象中 target 这样的属性呀,都不是很清楚到底干嘛的。这里再提一下事件对象的概念,毕竟只有知其所以才能知其所以然,
事件对象
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁。
DOM中事件对象
target属性
target 属性作用于的元素可以是注册事件时的元素,或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。简单来说:event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素。
this和event.target的异同:
- .this和event.target都是dom对象,可以使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用
- js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素
事件对象的属性和方法有很多,除了上面那个,还有一些经常用到的,阐述一下他们的作用和区别
type属性
event.type:获取事件类型
<div>
<input type="button" value="按钮" id="btn">
</div>
<script>
var btn = document.getElementById("btn");
var event = {
// 添加事件
addEvent:function(elem,type,handle){ //根据DOM2级事件处理程序的三个参数
if(elem.addEventListener){ //非IE浏览器
elem.addEventListener(type,handle,false);
}else if(elem.attachEvent){ //IE浏览器
elem.attachEvent("on"+type,handle);
}else{ //以上都不支持时采用DOM0级处理程序
elem["on"+type]=handle;
}
},
// 删除事件
removeEvent:function(elem,type,handle){
if(elem.removeEventListener){
elem.removeEventListener(type,handle,false);
}else if(elem.detachEvent){
elem.detachEvent("on"+type,handle);
}else{
elem["on"+type]=null;
}
}
};
function message(e){
alert(e.type);
}
// 调用封装好的函数
event.addEvent(btn,"click",message);
</script>
以上例子是补充的,今天看了imooc上的课程加深了对事件相关知识的一些理解。对于事件的添加、删除,针对不同的浏览器会有不同的方法,代码中event封装了主流浏览器和IE浏览器以及很老的浏览器的兼容处理。其中,需要注意的一点,在最后调用的时候,犯了一个错误,最后一个参数是函数message,先是错误的写成了message(),这样是不对的,不能加括号。
pageX和pageY属性
event.pageX和event.pageY:获取鼠标当前相对于页面的坐标
通过这2个属性,可以确定元素在当前页面的坐标值,鼠标相对于文档的左边缘的位置(左边)与 (顶边)的距离,简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。
which属性
event.which:获取在鼠标单击时,单击的是鼠标的哪个键,左键报告1,中间键报告2,右键报告3。
$(document).bind("keydown mousedown", function(event){
var msg = '';
if( event.type == "mousedown" ){ // 鼠标按下事件
var map = {"1": "左", "2":"中", "3":"右"};
msg = '你按下了鼠标[' + map[event.which] + ']键';
}
if(msg){
$("body").prepend( msg + '<br>');
}
currentTarget属性
event.currentTarget:在事件冒泡过程中的当前DOM元素。冒泡前的当前触发事件的DOM对象,等同于this。
preventDefault方法
event.preventDefault() 方法:阻止默认行为
这个用的特别多,在执行这个方法后,如果点击一个链接(a标签),浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了
<a href="https://www.baidu.com" id="goto">跳转</a>
<script>
var goto = document.getElementById("goto");
var event = {
// 添加事件
addEvent:function(elem,type,handle){ //根据DOM2级事件处理程序的三个参数
if(elem.addEventListener){ //非IE浏览器
elem.addEventListener(type,handle,false);
}else if(elem.attachEvent){ //IE浏览器
elem.attachEvent("on"+type,handle);
}else{ //以上都不支持时采用DOM0级处理程序
elem["on"+type]=handle;
}
};
function goTo(e){
e.preventDefault();
}
// 调用封装好的函数
event.addEvent(goto,"click",goTo);
</script>
stopPropagation方法
event.stopPropagation() 方法:阻止事件冒泡
事件有冒泡模式,有些情况下需要防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。之前有用过解决冒泡模式的困扰。
IE中事件对象
- type属性,用于获取事件类型
- srcElement属性,用于获取事件的目标
- cancelBubble属性,用于阻止事件冒泡.设置为true表示阻止冒泡
- returnValue属性,用于阻止事件的默认行为.设置为false表示阻止事件的默认行为
因为存在IE和非IE的不同,所以还是需要兼容处理的。
//获取事件
getEvent:function(event){
return event?event:window.event;
},
//获取目标元素
getElement:function(event){
return event.target || event.srcElement;
}
//阻止默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
//阻止冒泡
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
关注我吧
关注「前端一起学」公众号 ,看着项目进阶学习,让我们一起学前端,一起进步。