JavaScript入门学习（二）

Dawn_Dusk_

已于 2022-03-26 02:51:54 修改

阅读量228

点赞数 1

文章标签：前端 javascript

于 2022-01-31 05:16:28 首次发布

本文链接：https://blog.csdn.net/Dawn_Dusk_/article/details/122755637

版权

一、注册事件

（一）on+事件名="fuctionName()"

（二）on+事件名绑定（onclick, onmouseover）

<body>
    <button id="button1">注册事件</button>
    <script>
      var btn = document.querySelector("#button1"); //事件源
      btns[0].onclick = function(){
            alert(this.innerHTML);
      }
    </script>
  </body>

一个元素只能绑定一个事件，多写相当于最后注册的事件绑定覆盖掉前面的，前面的注册事件全部失效

（三）addEventListener()

1.仅ie9以上支持

<body>
    <button id="button1">注册了两个事件的按钮</button>
    <script>
      var btn = document.querySelector("#button1"); //事件源
      btn.addEventListener("click", function () {
        alert(this.innerHTML);
      });
    </script>
  </body>

一个元素可以绑定多个事件，每个事件都有效，先绑先触发。

eventTarget.addEventListener(type, listener[, useCapture])

type: click, mouseover等(不带on)
listener: 函数
useCpature: true即使用捕获模式（capture），false表示使用冒泡模式

2.ie9以下使用attachEvent(eventNameWithOn, callback)

<body>
    <button id="button1">注册了两个事件的按钮</button>
    <script>
      var btn = document.querySelector("#button1"); //事件源
      btn.attachEvent("click", function () {
        alert(this.innerHTML);
      });
    </script>
  </body>

3.注册事件兼容性解决方案(了解）

function addEventListener(element,eventName,fn){
    //判断当前浏览器是否支持addEventListener方法
    if（element.addEventListener){
        element.addEventListener(eventName,fn);
    }else if(element.attachEvent){
        element.attachEvent('on' + eventName,fn);
    }else{
    //相当于 element.onclick = fn
    element['on'+eventName]=fn;
    }
}

二、删除事件

(一）on+事件名 = null;

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
      var divs = document.querySelectorAll("div"); //事件源
      btns[1].onclick = function(){
            alert(this.innerHTML);
            divs[0].onclick = null;
      }
    </script>
  </body>

（二）eventTarget.removeEventListener(type, listener[, useCapture])

1.ie9以上

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
      var divs = document.querySelectorAll("div"); //事件源
      divs[0].addEventListener("click", fn)
      function fn() {
        alert(this.innerHTML);
        divs[0].removeEventListener("click", fn)
      })；
    </script>
  </body>

（三）eventTarget.detachEvent(eventNameWithOn, callback)

ie9以下

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
      var divs = document.querySelectorAll("div"); //事件源
      divs[0].attachEvent("onclick", fn)
      function fn() {
        alert(this.innerHTML);
        divs[0].detachEventListener("onclick", fn)
      })；
    </script>
  </body>

兼容

function addEventListener(element,eventName,fn){
    //判断当前浏览器是否支持addEventListener方法
    if（element.removeEventListener){
        element.removeEventListener(eventName,fn);
    }else if(element.attachEvent){
        element.detachEvent('on' + eventName,fn);
    }else{
    //相当于 element.onclick = fn
    element['on'+eventName]=fn;
    }
}

注意：删除事件和注册事件，必须是同一个事件，即同一个函数，才能删除成功。长得一样的函数在js看来是不一样的，因为函数的地址是不同的，删除的函数的地址必须与注册的函数的地址保持一致，才能删除成功。

二、DOM重点核心

（一）创建

1.document.write

2.innerHTML

3.creatElement

（二)增

1.appenChild

2.insertBefore

（三）删

remove

（四)改

1.修改元素属性：src、href、title

2.修改普通元素内容:innerHTML、innerText

3.修改表单元素：value、type、disable

4.修改元素样式：style、className

（五）查

1.DOM提供的API方法：getElementById、getElementsByTagName

2.HS提供的新方法：querySelsector、querySelectorAll

3.利用节点操作获取元素：父（parentNode）、子（chlidren）、兄（previousElementSibling、nextElementSling）

（六）属性操作

主要针对自定义属性

1.setAttribute

2.getAttribute

3.removeAttribute

（七）事件操作

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

键盘事件	触发条件
onkeyup	某个按键被松开时触发
onkeydown	某个按键被按下时触发
onkeypress	某个按键被按下时触发但是他不识别功能键如shift

三、兄弟节点的兼容性处理

（一）ie9以上

1.node.nextSibling

返回当前元素的下一个兄弟节点，找不到返回null

2.node.previousSibling

返回当前元素上一个兄弟节点，找不到返回null

（二）ie9以下

自己封装一个兼容性的函数

function getNextElementSibling（element){
    var el = element;
    while(el  = el.nextSibling){
        if(el.nodeType == 1){
            return el;
        }
    }
    return null;
}

四、this

（一）用法

1.在一般函数方法中使用 this 指代全局对象

function test(){
　　　　this.x = 1;
　　　　alert(this.x);
　　}
　　test(); // 1

2.作为对象方法调用，this 指代上级对象

function test(){
　　alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1

3.作为构造函数调用，this 指代new 出的对象

function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(o.x); // 1
    //运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：
　　var x = 2;
　　function test(){
　　　　this.x = 1;
　　}
　　var o = new test();
　　alert(x); //2

4.apply 调用，apply方法作用是改变函数的调用对象，此方法的第一个参数为改变后调用这个函数的对象，this指代第一个参数

　var x = 0;
　　function test(){
　　　　alert(this.x);
　　}
　　var o={};
　　o.x = 1;
　　o.m = test;
　　o.m.apply(); //0
//apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。如果把最后一行代码修改为

　　o.m.apply(o); //1