js 事件

Posted 2020-10-02

在javascript中有三种常见的事件绑定方法：

1、在DOM元素中直接绑定   　　

// 直接写
<div onclick = ‘ alert("Hello") ‘></div>

// 调用自定义函数 fn
<div onclick = fn></div>

 

2、在JavaScript代码中绑定 　　

// 绑定
obj.onclick = function(){}

// 解绑
document.onclick = null;

 

3、绑定事件监听函数　　　　　　

　　标准浏览器

// 绑定
obj.addEventListener( eventName, handle, useCapture )

// 解绑
obj.removeEventListener( 事件名称，事件函数， 是否捕获);

 

　　说明：

捕获 | 冒泡（默认是false，冒泡）

事件函数  click，没有on

正序执行

this 指向 obj

　　

　　IE

// 绑定
obj.attachEvent（事件名称，事件函数）

// 解绑
obj.

 

　　说明：

没有捕获

事件函数  onXXX

执行顺序  标准IE正序，非标准IE倒序（绑定多个事件函数？）

this指向    window

IE this指向的解决 call（参数1， 参数2..）

1. 参数1， 可以改变函数执行时内部 this 的指向
2. 从第二个参数开始是原函数的参数列表

 

兼容性处理

function addEvent(obj, evname, handle) {
　　try {
　　　　// Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
　　　　obj.addEventListener(evname, handle, false);
　　} catch (e) {　　　　　　
　　　　// IE8.0及其以下版本
　　　　obj.attachEvent(‘on‘ + evname, function() {　　　　　　　　　　
　　　　　　handle.call(obj);　　　　　　　
　　　　});
　　}
}

 

阻止冒泡

// 标准下
event.stopPropagation();

// IE下
event.cancelBubble = ture;

 

阻止默认事件

// 标准下， 
obj.preventDefault()；

// IE下，  
return false；（event.returnValue = false）

 

 

jQuery 中阻止冒泡，阻止默认事件

// 阻止默认行为
event.preventDefault();

// 阻止冒泡
event.stopPropagation();

// 同时阻止
return false;

 

获取 event 对象

• 标准下，event 是随事件处理函数传入的
• IE8.0及以下版本， event 必须作为 window 对象的一个属性

obj.onclick = function(ev) {
    var ev = ev || window.event;
}

 

获取事件源

• 标准下，事件源是作为event对象的属性存在的。在W3C规范中，这个属性是 target 
• IE8.0 及其以下版本，不支持该属性，使用 srcElement 属性来获取事件源。

obj.onclick = function(e) {
    var eve = e || event;
    var target = eve.target || eve.srcElement;  // 兼容所有浏览器
}