常见事件对象的属性:返回触发对象及类型阻止冒泡阻止连接跳转事件委托

最新推荐文章于 2022-04-02 10:02:21 发布

weixin_50400752

最新推荐文章于 2022-04-02 10:02:21 发布

阅读量485

点赞数

分类专栏： dom 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50400752/article/details/108487570

版权

dom 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

事件对象的一些属性
1 返回触发事件的对象——e.target
e.target和this的区别
检测方法

<style>
        ul {
            background-color: chartreuse;
            width: 10px;
            height: 50px;
        }
        
        li {
            background-color: cornflowerblue;
            width: 120px;
            height: 60px;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var ul = document.querySelector('ul');
        var lis = document.querySelectorAll('li');
        lis[0].addEventListener('click', function(e) {
            // console.log(e.target);
            console.log(this)
        });
        ul.addEventListener('click', function(e) {
            console.log(e.target);
            // console.log(this)
        });
        // ul.onclick = function(e) {
        //     console.log(e.target);
        //     console.log(this)
        // };
    </script>
    //e.target得到的是触发click的事件的对象 //this获得的是绑定click的事件对象

在操作中可以看出要直接获取点击对象就使用e.target
要获取绑定事件的对象就使用this。
2 返回触发事件类型——e.type

<script>
var div=documen.queryselector('div');
div.addEventListener('mouseover',fn);
div.addEventListener('click',fn);
div.addEventListener('mouseout',fn);
function fn(e){
console.log(e.tupe)
}
//返回触发事件的类型
</script>

3 阻止默认行为事件比如让链接不跳转，或是让提交按钮不提交

<script>
//对于监听方式注册的事件只有一种阻止方式
var a =document.queryselector('a');
a.addEventListener('click',fn);
function fn(e){
e.preventDefault;}
//适用于普通浏览器 
//传统注册事件方式，有三种方法阻止方式
a.onclick=function(e){
e.preventDefault;
//适用于普通浏览器 
e.returnValue;
//适用于ie678浏览器
return false;
//也可以利用return false让连接不跳转,没有兼容性问题，但不能继续执行return后面的代码
}
</script>

4 阻止事件冒泡

<body>
	<div class='father'>
		<div class='son'></div>
	</div>
<script>
	var son.document.queryselector('.son');
	son.addEventListener('click',function(e){
	alert('son');
	e.stopPropagation();//stop停止 propagation传播
	e.cancelBubble=true;//cancel 取消 bubble冒泡
	},false);
	var father=document.queryselector('.father');
	father.addEventListener('click',function(e){
	alert('father');
	},false);
	document.addEventListener('click',function(e){
	alert('document');
	})
</script>
</body>

5 事件委托——利用冒泡减少dom访问次数

<body>
	<ul>
		<li>单机此处，弹框冒出</li>
		<li>单机此处，弹框冒出</li>
		<li>单机此处，弹框冒出</li>
		<li>单机此处，弹框冒出</li>
	</ul>
<script>
//为父级增加监听，利用冒泡影响子元素
var ul=document.querySelector('ul');
ul.addEventListener('click',function(e){
//e.target获得点击的对象
e.target.style.backgroundColor='pink';
},false)
</script>
</body>

weixin_50400752

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见事件对象的属性:返回触发对象及类型阻止冒泡阻止连接跳转事件委托

事件对象的一些属性e.target和this的区别检测方法<body> <div> <ul> <li></li> <li></li> <li></li> </ul> </div> <script> var ul=document.querySelector('ul'); var lis=document.querySelec
复制链接

扫一扫