千锋web前端开发项目教程_1000集完全零基础入门HTML5+CSS3+JS到

### 1.键盘事件及事件对象
```javascript
键盘事件的事件元素通常都为document
1.键盘弹起的时刻触发(onkeyup)
document.onkeyup = function(){
console.log("嘿嘿嘿");
}
2.键盘按下的时刻触发 (onkeydown)
document.onkeydown = function(){
console.log("嘿嘿嘿");
}
3.生成一个字符时触发 (onkeypress)
document.onkeypress = function(){
console.log("嘿嘿嘿");
}
document.onkeypress = function (evt) {
key:键盘录入的字符
console.log(evt.key);
字符对应的asc码值
48 97 65 13 32 10
0 a A 回车 空格 ctrl+回车
console.log(evt.keyCode);
console.log(evt.which);
console.log(evt.charCode);
总和 var myKeyCode = evt.keyCode || evt.which || evt.charCode;
console.log(myKeyCode);
ctrlKey:判断ctrl是否被按下
console.log(evt.ctrlKey);
}
```
### 2.事件绑定的方式
```javascript
1.通过HTML元素绑定
<button onclick="f1()">点击1</button>
function f1(){
console.log("嘤嘤嘤");
}
2.通过dom节点方式绑定
var oBtn = document.getElementsByTagName("button")[1];
oBtn.onclick = function(){
console.log("哈哈哈");
}
缺陷:
a.无法为同一个元素多次绑定相同的事件
b.无法决定事件流的传递是冒泡还是捕获
解决方案:
事件监听
dom节点.addEventListener("去掉on的事件名",事件体回调函数,[冒泡false/捕获true]);
好处:a.可以为同一个元素多次绑定相同的事件
document.addEventListener("click",function(){
console.log("111");
});
document.addEventListener("click",function(){
console.log("222");
});
b.
document.addEventListener("click", function () {
alert("document捕获");
}, true);
document.addEventListener("click", function () {
alert("document冒泡");
}, false);
捕获和冒泡同时存在,则先捕获后冒泡
```
### 3.事件的解绑
```javascript
事件的解绑就是将事件赋值为null
1.普通解绑方式
HTML绑定和dom绑定
解绑原理:将事件绑定覆盖掉
oBtn.onclick = function(){
document.onclick = null;
}
2.事件监听的解绑
var fun = function () {
console.log("heihei");
}
document.addEventListener("click", fun);
oBtn.onclick = function () {
dom对象.removeEventListener("去掉on的事件类型",绑定时的同一个回调函数)
必须解绑的回调函数和绑定的回调函数是同一个
document.removeEventListener("click", fun);
}
```
### 4.事件的委托
```javascript
委托:你的事,让别人干
事件的委托:子元素触发的事件,但是功能由父元素完成
事件委托依赖于事件流的冒泡
好处1:可以将批量绑定的子元素事件,绑定至父元素,从而大大提高程序运行效率
好处2:可以为未来的元素,提前添加事件
var oUl = document.querySelector("ul");
oUl.onclick = function(evt){
this.style.backgroundColor = "yellow";
问题:怎么获取真实触发事件的事件元素
获取真实触发事件的事件元素 evt.target || evt.srcElement
var target = evt.target || evt.srcElement;
target.tagName触发事件的真实元素的标签名,大写
console.log(target,target.tagName);
if(target.tagName == "LI"){
target.style.backgroundColor = "red";
}
}
例1.
var oUl = document.querySelector("ul");
oUl.addEventListener("click", function (evt) {
var target = evt.target || evt.srcElement;
if (target.tagName == "LI") {
target.style.backgroundColor = "red";
}
});
例2.
<input type="text" name="" id=""><br><br>
<ul>
<li>蔡徐坤</li>
<li>炎亚纶</li>
</ul>
<br> <br>
<button>添加</button>
var oBtn = document.querySelector("button");
var oInput = document.querySelector("input");
var oUl = document.querySelector("ul");
oUl.addEventListener("mouseover", function (evt) {
var target = evt.target || evt.srcElement;
if (target.tagName == "LI") {
target.style.backgroundColor = "green";
}
});
oUl.onmouseout = function (evt) {
var target = evt.target || evt.srcElement;
if (target.tagName == "LI") {
target.style.backgroundColor = "";
}
}
oBtn.onclick = function () {
if (oInput.value != "") {
var oLi = document.createElement("li");
oLi.innerHTML = oInput.value;
oUl.appendChild(oLi);
oInput.value = "";
}
}
```
### 4.拖拽
```javascript
按下 onmousedown box
移动 onmousemove document
抬起 onmouseup document
先有down,再有move和up
可视窗口的宽和高
console.log(window.innerWidth);
console.log(window.innerHeight);
例
<style>
#box {
width: 100px;
height: 100px;
position: absolute;
background-color: gold;
cursor: move;
}
</style>
<body>
<div id="box"></div>
</body>
var oBox = document.querySelector("#box");
oBox.onmousedown = function (evt) {
var offsetX = evt.offsetX;
var offsetY = evt.offsetY;
document.onmousemove = function (evt) {
var left = evt.pageX - offsetX;
var top = evt.pageY - offsetY;
if (left < 0) {
left = 0;
}
var maxLeft = window.innerWidth - oBox.offsetWidth;
if (left > maxLeft) {
left = maxLeft;
}
if (top < 0) {
top = 0;
}
var maxTop = window.innerHeight - oBox.offsetHeight;
if (top > maxTop) {
top = maxTop;
}
oBox.style.left = left + "px";
oBox.style.top = top + "px";
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
console.log(window.innerWidth, window.innerHeight);
```