js 事件绑定/解绑事件事件处理(冒泡,捕获) 封装兼容的事件 addEventListener第三个参数

最新推荐文章于 2020-09-17 16:45:05 发布

tianmeng1999

最新推荐文章于 2020-09-17 16:45:05 发布

阅读量227

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_42448623/article/details/102758332

版权

JavaScript 专栏收录该内容

184 篇文章 6 订阅

订阅专栏

绑定事件处理函数

ele.onxxx = function(){}
- 兼容性好，但是一个元素的同一个事件上只能绑定一个处理程序
- 基本等同于写在HTML行间上

div.onclick = function(){}

obj.addEventlistener(type,fun,false);
- IE9以下不兼容，可以为一个事件绑定多个处理程序
- 一个对象事件不能把同一个函数绑定多次
- 第三个参数
  - 布尔值：默认false true 事件处理模型变为捕获
  - 对象
    - capture: 默认false 是否使用捕获事件处理模型
    - once: 默认false, 是否只调用一次
    - passive: 默认false, 是否可以阻止默认事件

// IE9以下不兼容，可以为一个事件绑定多个处理程序
div.addEventListener('click',fun,false);
function fun(){console.log('a')}
div.addEventListener('click',fun2,false);
function fun2(){console.log('b')}
// a,b
// 一个对象事件不能把同一个函数绑定多次--------------------------------
div.addEventListener('click',fun3,false);
div.addEventListener('click',fun3,false);
function fun3(){console.log('a')}
//只执行一次 a

passive

var a = document.querySelector("a")
a.addEventListener('click', function(e){
    // 阻止默认事件
    e.preventDefault()
}, {
    passive: true // 阻止默认事件无效
})

obj.attachEvent(on+‘type’,fun);
- IE独有，一个事件绑定多个处理程序
- 把同一个函数绑定多次
- this指向window

div.attchEvent('onclick',function(){})

改变attachEvent this指向div

div.attachEvent('onclick',function(){
	fun.call(div)
})
function fun(){
	// 逻辑代码
}

解除绑定事件

匿名函数不能解除绑定

div.onclick = function(){}
div.onclick = null;

div.addEventListener('click',fun,false)
function fun(){}
div.removeEventListener('click',fun,false)

div.attachEvent('on'+type,fun)
function fun(){}
div.detachEvent('on'+type,fun)

事件处理模型冒泡捕获

一个对象的一个事件类型只能遵循一个事件处理模型
一个对象的一个事件类型同时绑定了捕获和冒泡
先捕获，后冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .red{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .yellow{
            width: 200px;
            height: 200px;
            margin-left: 300px;
            background-color: yellow;
        }
        .green{
            width: 100px;
            height: 100px;
            margin-left: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">
        <div class="yellow">
            <div class="green"></div>
        </div>
    </div>
    <script>
        var red = document.getElementsByClassName('red')[0],
            yellow = document.getElementsByClassName('yellow')[0],
            green = document.getElementsByClassName('green')[0];

        red.addEventListener('click',function(){
            console.log('red')
        },false)
        yellow.addEventListener('click',function(){
            console.log('yellow')
        },false)
        green.addEventListener('click',function(){
            console.log('green')
        },false)
        
        red.addEventListener('click',function(){
            console.log('red2')
        },true)
        yellow.addEventListener('click',function(){
            console.log('yellow2')
        },true)
        green.addEventListener('click',function(){
            console.log('green2')
        },true)
    </script>
</body>
</html>

// 点击green 
// 先捕获 后冒泡
// red2
// yellow2
// 捕获结束
// green 绑定事件执行 先绑定先执行
// green
// green2
// 事件执行完 开始冒泡
// yellow
// red

focus,blur,change,submit,reset,select等事件不冒泡

冒泡

html结构上(非视觉上)嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）
冒泡案例

捕获 chrome

html结构上(非视觉上)嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素冒捕获至子元素（事件源）（自顶向下）
IE 没有捕获事件

设置捕获
addEventListener()第三个参数设置true

捕获案例

封装兼容的事件

给一个 dom 对象添加一个该事件类型的处理函数

function addEvent(ele, type, handle){
	if(ele.addEventListener){
		ele.addEventListener(type, handle,false)
	}else if(ele.attchEvent){
		ele.attachEvent('on' + type, function(){
			handle.call(ele)
		})
	}else{
		ele['on' + type] = handle
	}
}

tianmeng1999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 事件绑定/解绑事件事件处理(冒泡,捕获) 封装兼容的事件 addEventListener第三个参数

绑定事件处理函数ele.onxxx = function(){}兼容性好，但是一个元素的同一个事件上只能绑定一个处理程序基本等同于写在HTML行间上div.onclick = function(){}obj.addEventlistener(type,fun,false);IE9以下不兼容，可以为一个事件绑定多个处理程序一个对象事件不能把同一个函数绑定多次第三个参数...
复制链接

扫一扫