js 事件绑定/解绑事件事件处理(冒泡,捕获) 封装兼容的事件

时间 2020-06-03 标签 js 事件绑定解绑事件事件处理冒泡捕获封装兼容事件

绑定事件处理函数

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

div.onclick = function(){}

obj.addEventlistener(type,fun,false);
- IE9如下不兼容，能够为一个事件绑定多个处理程序
- 一个对象事件不能把同一个函数绑定屡次
- 第三个参数 true 事件处理模型变为捕获

// 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

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

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

改变attachEvent this指向divhtml

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

解除绑定事件

匿名函数不能解除绑定web

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)

事件处理模型冒泡捕获

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

<!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,sumlt,reset,select等事件不冒泡dom

冒泡

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

捕获 chrome

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

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

捕获案例this

封装兼容的事件

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

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

js 事件 绑定/解绑事件 事件处理(冒泡,捕获) 封装兼容的事件