JavaScript之事件对象的深入_js event.srcelement is undefined-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_58192905/article/details/129874974

一、添加事件监听（addEventListener()）

addEventListener()是为事件添加一个事件监听。当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window，也可以是任何支持事件的对象。
addEventListener() 的工作原理是将实现 EventListener 的函数或对象添加到调用它的 EventTarget 上的指定事件类型的事件侦听器列表中。如果要绑定的函数或对象已经被添加到列表中，该函数或对象不会被再次添加。

语法格式：
A.addEventListener(事件（不用加on）,函数名称,true/false );

eg:
input.addEventListener('click',function(){
	alert(1);
})
input.addEventListener('click',function(){
	alert(2);
})

一般情况下不要加第三个参数
有兼容性问题

true代表是事件捕获的情况下执行
false是事件冒泡的情况下执行

二、移除事件监听（removeEventListener()）

removeEventListener()

语法格式：
A.removeEventListener(事件名称（不用加on），函数名称)
eg:
function a(){
	alert(1);
}
function b(){
	alert(2);
}
A.removeEventListener('click',a);

精准解除事件监听

三、键盘事件

在 JavaScript 中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面 3 种类型：

keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会禁止keypress 事件响应）。
keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。
keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。

docunment.onkeydown = function(){
	alert(1);
}
docunment.onkeyup = function(){
	alert(2);
}
/*效果
	键盘按下，弹窗显示1，抬起，显示2
*/

键盘事件属性
键盘定义了很多属性，如下表所示。利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中，但是 ctrlKey 和 shiftKey 属性除外，因为它们可以在水保事件中存在。例如，当按下 Ctrl 或Shift 键时单击鼠标操作。

键盘事件定义的属性

属性	说明
keyCode	该属性包含键盘中对应键位的键值
charCode	该属性包含键盘中对应键位的 Unicode 编码，仅 DOM 支持
target	发生事件的节点（包含元素），仅 DOM 支持
srcElement	发生事件的元素，仅 IE 支持
shiftKey	是否按下 Shift 键，如果按下返回 true，否则为false
ctrlKey	是否按下 Ctrl 键，如果按下返回 true，否则为false
altKey	是否按下 Alt 键，如果按下返回 true，否则为false
metaKey	是否按下 Mtea 键，如果按下返回 true，否则为false，仅 DOM 支持

某些键的可用性不是很正确，如 PageUp 和 Home 键等。不过常用功能键和字符键都是比较稳定的。

键位和码值对照表

键位	码值	键位	码值
0~9（数字键）	48~57	A~Z（字母键）	65~90
Backspace（退格键）	8	Tab（制表键）	9
Enter（回车键）	13	Space（空格键）	32
Left arrow（左箭头键）	37	Top arrow（上箭头键）	38
Right arrow（右箭头键）	39	Down arrow（下箭头键）	40

 var box = document.getElementById("box");  // 获取页面元素的引用指针
 	box.style.position = "absolute";  // 色块绝对定位
    box.style.width = "20px";  // 色块宽度
    box.style.height = "20px";  // 色块高度
    box.style.backgroundColor = "red";  // 色块背景
    document.onkeydown = keyDown;
    //在Document对象中注册keyDown事件处理函数
    function keyDown(event){  // 方向键控制元素移动函数
        var event = event || window.event;  // 标准化事件对象
        switch(event.keyCode){  // 获取当前按下键盘键的编码
            case 37 :  // 按下左箭头键，向左移动5个像素
                box.style.left = box.offsetLeft - 5  + "px";
                break;
            case 39 :  // 按下右箭头键，向右移动5个像素
                box.style.left = box.offsetLeft + 5 + "px";
                break;
            case 38 :  // 按下上箭头键，向上移动5个像素
                box.style.top = box.offsetTop  - 5 + "px";
                break;
            case 40 :  // 按下下箭头键，向下移动5个像素
                box.style.top = box.offsetTop  + 5 + "px";
                break;
        }
        return false
    }
	/*首先获取页面元素，通过 CSS 脚本控制元素绝对定位、大小和背景色。然后在 document 对象上注册鼠标按下事件类型
处理函数，在事件回调函数 keyDown() 中侦测当前按下的方向键，并决定定位元素在窗口中的位置。其中元素的 offsetLeft 
和 offsetTop 属性可以存取它在页面中的位置。

键盘响应顺序
当按下键盘时，会连续触发多个事件，它们将按如下顺序发生。

对于字符键来说，键盘事件的响应顺序：keydown → keypress → keyup。
对于非字符键（如功能键或特殊键）来说，键盘事件的相应顺序：keydown → keyup。
如果按下字符键不放，则 keydown 和 keypress 事件将逐个持续发生，直至松开按键。
如果按下非字符键不放，则只有 keydown 事件持续发生，直至松开按键。

四、事件委托/代理/委派(srcElement||target)

事件委托/代理就是给予父级元素一个事件，然后父级元素可以找到子级事件源。通过判断事件源的className、nodeName、ID等找到我妈需要的事件源，给予JavaScript脚本。最大的好处是可以控制未来的元素（动态生成的元素）

语法格式：
event.target(常用)
event.srcElement

有兼容性问题：

target IE认为是undefined
srcElement 低版本火狐认为是undefined

所以为了更好的兼容所有浏览器，可以采用以下方法：

Target = event.target || event.srcElement

样例代码

document.documentElement.onclick = function(){
//console.log(event.target); 	
//console.log(event.srcElement); 	
var iTarget = event.target || event.srcElement; 	
	if(iTarget.className == 'div'){ 			
		iTarget.style.background = 'red'; 		
} else if(iTarget.className =='div1'){ 	 
		iTarget.style.background = 'green';
		} 		
	}; 
for(var i = 0;i < 10;i++){ 	
var oDiv = document.createElement('div'); 		
	if(i<5){
 		oDiv.className = 'div';
	} 		
else{
 			oDiv.className = 'div1'; 		
 }	
	document.body.appendChild(oDiv); 	
};