WebAPI—03

2024-03-29 14:03:52

注册事件：给元素添加事件，称为注册事件或绑定事件
注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式

利用on开头的事件onclick
特点：注册事件的唯一性：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

addEventListener(),它是一个方法，IE9之前的IE不支持此方法，可用attachEvent()代替
特点：同一个元素同一个事件可以注册多个监听器（事件处理程序），按注册顺序执行
eventTarget.addEventListener(type,listener,[useCapture]);
eventTarget.addEvenListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数

该方法接受三个参数：

type：事件类型字符串，如click、mouseover
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认为false

eventTarget.attachEvent(eventNameWithOn,callback);
eventTarget.attachEvent()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定事件时，指定的回调函数就会被执行

该方法接收两个参数：

eventNameWithOn：事件类型字符串，比如onclick，onmouseover这里要带on
callback：事件处理函数，当目标触发事件回调函数被调用

注册事件兼容性解决方案：

function addEventListener(element,eventName,fn){
	//判断当前浏览器是否支持addEventListener方法
	if (element.addEventListener){
		element.addEventListener(eventName,fn);//第三个参数默认是false
	}else if(element.attachEvent){
		element.attachEvent('on'+eventName,fn);
	}else{
		//相当于element.onclick = fn;
		element['on'+eventName] = fn;
	}

删除事件（解绑事件）
1、传统方式删除事件

eventTarget.onclick = null;

2、方法监听注册方式

eventTarget.removeEventListener(type,listener[,useCapture]);

e.g

    divs[1].addEventListener('click', fn);

    function fn() {
        alert(22);
    }

    divs[1].removeEventListener('click', fn);

DOM事件流：
事件流：描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
DOM事件流分成3个阶段：1、捕获阶段，2、当前目标阶段，3、冒泡阶段

JS代码只能执行捕获或者冒泡其中的一个阶段
onclick和attachEvent只能得到冒泡阶段
捕获阶段：如果addEventListener第三个参数是true，那么则处于捕获阶段，第三个参数为false或省略，则处于冒泡阶段
有些事件没有冒泡的，比如onblur、onfucus、onmouseenter、onmouseleave

e.g

     <script>
     //捕获阶段
        //document->html->body->father->son
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true)


        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true)
    </script>

事件对象：
div.onclick = function(event){}

1、event就是一个事件对象，写到我们侦听函数的，小括号里面，当形参来看
2、事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
3、事件对象是我们事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息，鼠标的坐标啊、，如果是键盘事件里面就包含了键盘事件的信息，比如判断用户按下了哪个键
4、这个事件对象我们可以自己命名，比如event、evt、e
5、事件对象也有兼容性问题，ie678 通过window.even来获取事件对象

e.target返回的是触发事件的对象（元素） this返回的是绑定事件的对象（元素）
区别：e.target点击了哪个元素，就返回哪个元素 this哪个元素绑定了这个点击事件就返回谁

e.type返回事件类型，例如click mouseover

e.preventDefault() 该方法阻止默认行为，例如跳转
a.addEventListener('click',function(e){
	e.preventDefault();
});

阻止冒泡事件：利用事件对象的方法

e.stopPropagation();
e.cancelBubble = true;

事件委托（代理、委派）

事件冒泡本身的特性，会带来的坏处，也会带来好处，
原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
例如给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。
作用：只操作了一次DOM，提高了程序的性能

常用鼠标事件：contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu',function(e){
	e.preventDefault();
})

禁止鼠标选中（selectstart 开始选中）

document.addEventListener('selectstart',function(e){
	e.preventDefault();
})

鼠标事件对象：event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent
鼠标事件对象说明
e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX 返回鼠标相对于文档页面的X坐标
e.pageY 返回鼠标相对于文档页面的Y坐标
e.screenX 返回鼠标相对于电脑屏幕的X坐标
e.screenY 返回鼠标相对于电脑屏幕的Y坐标

码农公寓

相关文章