js中ownerDocument与documentElement的区别

ownerDocument是Node对象的一个属性。返回的是某个元素的根节点文档对象，即document 对象

documentElement是document对象的属性，返回的是文档根节点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
/**
* 触摸屏幕模拟键盘按下事件
*/

<!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>
</head>
<style>
.panel {
width: 100%;
height: 200px;
position: absolute;
}
.key {
width: 160px;
height: 148px;
position: absolute;
left: 20px;
top: 16px;
}
.key div {
width: 60px;
height: 60px;
position: absolute;
}
.arrow_left {
left: 0;
top: 44px;
background: url('../img/arrow_left.png') no-repeat center/contain;
}
.arrow_down {
bottom: 0;
left: 51px;
background: url('../img/arrow_down.png') no-repeat center/contain;
}
.arrow_right {
right: 0;
top: 44px;
background: url('../img/arrow_right.png') no-repeat center/contain;
}
.arrow_up {
left: 51px;
top: 0;
background: url('../img/arrow_up.png') no-repeat center/contain;
}

</style>
<body>
<div class="panel">
<div class="key">
<div id="left" class="arrow_left"></div>
<div id="down" class="arrow_down"></div>
<div id="right" class="arrow_right"></div>
<div id="up" class="arrow_up"></div>
</div>
</div>
</body>
<script>

document.getElementById('left').addEventListener('touchstart',function (e) {
createKeyEvent(e.target, 'keydown', 37, "ArrowLeft");
});
document.getElementById('down').addEventListener('touchstart',function (e) {
createKeyEvent(e.target, 'keydown', 40, "ArrowDown");
});
document.getElementById('right').addEventListener('touchstart',function (e) {
createKeyEvent(e.target, 'keydown', 39, "ArrowRight");
});
document.getElementById('up').addEventListener('touchstart',function (e) {
createKeyEvent(e.target, 'keydown', 38, "ArrowUp");
});

/**
* 监听键盘按下
*
*/
window.addEventListener("keydown", function (event) {
console.log('down')
console.log(event)
if (event.defaultPrevented) {
return;
}
var handled = false;
if (event.key !== undefined) {
// Handle the event with KeyboardEvent.key and set handled true.
if(event.key === " "){
// space.classList.add('active')
console.log('space keydown')
}else if(event.key === 'a'){
// space.classList.remove('active')
console.log('a keydown')
}
} else if (event.keyIdentifier !== undefined) {
// Handle the event with KeyboardEvent.keyIdentifier and set handled true.
console.log( 'event.keyIdentifier',event.keyIdentifier);
} else if (event.keyCode !== undefined || event.which !== undefined) {
// Handle the event with KeyboardEvent.keyCode and set handled true.
if(event.keyCode === 32){
space.classList.add('active')
}else if(event.keyCode === 65){
space.classList.remove('active')
}
}
if (handled) {
// Suppress "double action" if event handled
event.preventDefault();
}
}, true);


/*
* 给元素添加事件（用来触发键盘事件）
* el模拟事件的触发元素，evtType事件类型，keycode对应的键盘事件的键值,key对应事件所触发的键名,
*/
const createKeyEvent = (el, evtType, keyCode ,key) => {
console.log(el.ownerDocument)
console.log(document)
var doc = document,
win = doc.defaultView || doc.parentWindow,
evtObj;
if(doc.createEvent){
if(win.KeyEvent) {
console.log(111)
evtObj = doc.createEvent('KeyEvents');
evtObj.initKeyEvent( evtType, true, true, win, false, false, false, false, keyCode, 0 );
}
else {

evtObj = doc.createEvent('UIEvents');
Object.defineProperty(evtObj, 'keyCode', {
get : function() { return this.keyCodeVal; }
});
Object.defineProperty(evtObj, 'which', {
get : function() { return this.keyCodeVal; }
});
evtObj.initUIEvent( evtType, true, true, win, 1 );
evtObj.key = key;
evtObj.keyCodeVal = keyCode;
if (evtObj.keyCode !== keyCode) {
console.log("keyCode " + evtObj.keyCode + " 和 (" + evtObj.which + ") 不匹配");
}
}
el.dispatchEvent(evtObj);
}
else if(doc.createEventObject){
evtObj = doc.createEventObject();
evtObj.keyCode = keyCode;
el.fireEvent('on' + evtType, evtObj);
}
};
</script>
</html>