千鋒web前端開發(fā)項(xiàng)目教程_1000集完全零基礎(chǔ)入門HTML5+CSS3+JS到
### 1.鍵盤事件及事件對象
```javascript
鍵盤事件的事件元素通常都為document
?1.鍵盤彈起的時(shí)刻觸發(fā)(onkeyup)
?document.onkeyup = function(){
? ? ? ? console.log("嘿嘿嘿");
? ? }
?2.鍵盤按下的時(shí)刻觸發(fā) (onkeydown)
? ? document.onkeydown = function(){
? ? ? ? console.log("嘿嘿嘿");
? ? }
?3.生成一個(gè)字符時(shí)觸發(fā) (onkeypress)
? ? document.onkeypress = function(){
? ? ? ? console.log("嘿嘿嘿");
? ? }
document.onkeypress = function (evt) {
? ?key：鍵盤錄入的字符
? ? ? ? console.log(evt.key);
? 字符對應(yīng)的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()">點(diǎn)擊1</button>
?function f1(){
? ? ? ? console.log("嚶嚶嚶");
? ? }
2.通過dom節(jié)點(diǎn)方式綁定
? ? var oBtn = document.getElementsByTagName("button")[1];
? ? oBtn.onclick = function(){
? ? ? ? console.log("哈哈哈");
? ? }
缺陷：
? ? a.無法為同一個(gè)元素多次綁定相同的事件
? ? b.無法決定事件流的傳遞是冒泡還是捕獲
解決方案:
事件監(jiān)聽
? ?dom節(jié)點(diǎn).addEventListener("去掉on的事件名",事件體回調(diào)函數(shù),[冒泡false/捕獲true]);
好處:a.可以為同一個(gè)元素多次綁定相同的事件
? ? 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);
捕獲和冒泡同時(shí)存在，則先捕獲后冒泡
```
### 3.事件的解綁
```javascript
事件的解綁就是將事件賦值為null
1.普通解綁方式
? HTML綁定和dom綁定
解綁原理:將事件綁定覆蓋掉
? ? oBtn.onclick = function(){
? ? ? ? document.onclick = null;
? ? }
2.事件監(jiān)聽的解綁
?var fun = function () {
? ? ? ? console.log("heihei");
? ? }
? document.addEventListener("click", fun);
? ? oBtn.onclick = function () {
dom對象.removeEventListener("去掉on的事件類型",綁定時(shí)的同一個(gè)回調(diào)函數(shù))
? ? ? ? 必須解綁的回調(diào)函數(shù)和綁定的回調(diào)函數(shù)是同一個(gè)
? ? ? ? document.removeEventListener("click", fun);
? ? }
```
### 4.事件的委托
```javascript
委托:你的事，讓別人干
事件的委托:子元素觸發(fā)的事件，但是功能由父元素完成
? ? 事件委托依賴于事件流的冒泡
好處1:可以將批量綁定的子元素事件，綁定至父元素，從而大大提高程序運(yùn)行效率
好處2:可以為未來的元素，提前添加事件
? ?var oUl = document.querySelector("ul");
? ? oUl.onclick = function(evt){
? ? ? ? this.style.backgroundColor = "yellow";
? ? ? ? 問題:怎么獲取真實(shí)觸發(fā)事件的事件元素
? ? ? ? 獲取真實(shí)觸發(fā)事件的事件元素 evt.target || evt.srcElement
? ? ? ? var target = evt.target || evt.srcElement;
? ? ? ? target.tagName觸發(fā)事件的真實(shí)元素的標(biāo)簽名，大寫
? ? ? ? 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
移動(dòng) ? ?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);
```
