Java Script 事件&Dom对象

三、事件

1、事件绑定方式

（1）在标签中添加绑定事件

    <button onclick="window.clickFun()">点击1</button>

（2）获取标签节点，给标签对象设置onclick方法

    var $btn = document.querySelector('#btn');
    $btn.onclick = function() {
        console.log(this);  // button标签
        console.log('点击2');
    }

2、常用事件类型

（1）点击事件：onclick

（2）输入框事件

• （2.1）获得焦点：onfocus

    // 获得焦点事件
    $inp.onfocus = function() {
        console.log('输入框获得了焦点');
    }

• （2.2）失去焦点：onblur

    // 失去焦点事件
    $inp.onblur = function() {
        console.log('输入框失去了焦点');
    }

• （2.3）输入事件：oninput

    //输入事件
    $inp.oninput = function () {`
        console.log(this.value);
    }

（3）键盘事件

• （3.1）在用户按下按键时触发：onkeydown

   $inp2.onkeydown = function(event) {
       console.log(event);
       if (event.keyCode === 13) {
           alert('正在登录......')
       }
   }

• （3.2）当用户释放按键时触发：onkeyup

（4）鼠标事件

• （4.1）鼠标移入事件：onmouseover
• （4.2）鼠标移出事件：onmouseout

3、事件对象

（1）event：是事件的对象

    // event是事件的对象
    //双击事件的对象
    $btn.ondblclick = function (event) {
        console.log(event);
    }

（2）keyCode：按键的编号（event对象的一个属性）

• 回车keyCode为13

    $inp2.onkeyup = function (event) {
        console.log(event);
        if (event.keyCode === 13) {
            alert('正在登录......')
        }
    }

（3）event.currentTarget：表示绑定的元素

（4）event.target：表示点击的元素

    var $out = document.querySelector('#out');
    $out.onclick = function(event) {
        console.log('绑定的元素',event.currentTarget);
        console.log('点击的元素',event.target);
    }

4、addEventListener：事件监听（事件绑定）

（1）一个普通的函数，当它跟事件绑定在一起的时候，它有另外一个名字: 监听器

    /**
     * clickFun是个普通的函数
     * 当它跟事件绑定在一起的时候,它有另外一个名字: 监听器
     */ 
    function clickFun() {
        console.log('哈哈');
    }

• 与addEventListener区别
  • clickFun函数绑定多次却只能执行一次
  • addEventListener绑定多少次就能执行多少次

（2）JS事件的三个阶段

Dom树基本结构图

• （2.1）捕获：事件由页面元素接受，逐级向下（通过Dom树），到具体的元素
• （2.2）目标：具体元素
• （2.3）冒泡：与捕获相反，事件由具体元素接受，逐级向上（通过Dom树），到页面元素

（3）

• （3.1）事件捕获：当使用事件捕获时，父元素先触发，子元素后触发
• （3.2）事件冒泡：当使用事件冒泡时，子元素先触发，父元素后触发

（4）addEventListener的使用（绑定事件）

• （4.1）第一个参数：事件的类型
• （4.2）第二个参数：绑定的函数
• （4.3）第三个参数：监听阶段
  • false：冒泡阶段（常用）
  • true：捕获阶段

    $btn.addEventListener('click',function(event) {
        alert('嘿嘿');
    },false);

（5）阻止事件冒泡：event.stopPropagation();

• 设置后点击子元素，父元素不会再被触发

    var $gradeFather = document.querySelector('#gradeFather');
    $gradeFather.addEventListener('click',function(event) {
        alert('我是爷爷');
    },false)

    var $sun = document.querySelector('#sun');
    $sun.addEventListener('click',function(event) {
        // 阻止事件冒泡
        event.stopPropagation();
        alert('我是儿子');
    },false)

（6）阻止默认事件：event.preventDefault();

• 例如阻止a标签跳转

    var $a = document.querySelector('a');
    $a.addEventListener('click', function() {
        // 阻止默认事件
        event.preventDefault();
        alert('哈哈哈');
    },false)

四、Bom对象和Dom对象

• Bom对象：指浏览器对象模型，可以对浏览器窗口进行访问、操作。

• Dom对象：指文档对象模型，可以访问HTML文档所有元素。

1、navigator.userAgent：判断用户设备（浏览器检测）

2、通过Dom对象对页面的标签进行增、删、改、查操作

（1）查（常用方法）

• （1.1）document.querySelector(' ');
• （1.2）document.querySelectorAll(' ');
• （1.3）document.getElementById(' ');

（2）添加

    var num = 6;
    function addEle() {
        //1、创建节点
        var $li = document.createElement('li');
        //2、填充内容
        $li.innerText = `第${num++}个li`;
        //3、获取父元素节点
        var $list = document.querySelector('#list');
        //4、添加节点
        $list.appendChild($li);

（3）删

    document.querySelector('p').remove();  //把p标签删除
        //删除多个p
    function del() {
        var p = document.querySelectorAll('p');
        for (var i = 0; i < p.length; i++) {
            document.querySelector('p').remove();
        }
    }

（4）修改

• （4.1）通过样式进行修改
  • var style = window.getComputedStyle($content)：只能通过它来获取内部或外联样式
  • $content.style.display：只能获取内联样式

        function hid() {
            var $btn = document.querySelector('#btn'); //获取按钮节点
            var list = document.querySelector('#list');
            var style = window.getComputedStyle(list); // 获取内部或外联样式属性对象
            if (style.display == 'block') {
                list.style.display = 'none';  //通过内联样式进行修改
                $btn.innerHTML = '显示';
            } else {
                list.style.display = 'block';
                $btn.innerHTML = '隐藏';
            }
        }

• （4.2）通过类名进行修改

    function toggle() {
        var $btn = document.querySelector('#btn');
        //1、获取节点元素
        var $content = document.querySelector('#content');
        // 2、获取content的class值
        var className = $content.className;
        console.log(className);
        //3、判断className是否为空
        if (!className) {
            $content.className = 'dsn';
        } else {
            $content.className = '';
        }
    }