复习笔记之API(2) 事件基础&&排他思想

事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为(触发---响应机制)
网页中每个元素都可以产生某些可以触发JavaScript的事件

• 事件是由三部分组成的：事件源、事件类型、事件处理程序(事件三要素)
  • 事件源：触发事件的对象
  • 事件类型：如何触发，什么事件(鼠标点击、鼠标经过、键盘按下等)
  • 事件处理程序：通过一个函数赋值的方式完成

执行事件的步骤

• 获取事件源
• 注册事件(绑定事件)
• 添加事件处理程序(采用函数赋值形式)

常用的鼠标事件

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

操作DOM

JavaScript的DOM操作可以改变网页的内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等

• 改变元素内容
  • innerText：从起始位置到终止位置的内容，但它除去html标签，同时空格和换行也会去掉
  • innerHTML：从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

<button>显示当前系统时间</button>
<div>点击按钮显示系统时间</div>
<p>直接显示系统时间</p>
<script>
    // 点击按钮，div里面显示系统时间
    // 获取元素
    let btn = document.querySelector('button'),
        div = document.querySelector('div');
    // 绑定事件
    btn.onclick = function() {
        div.innerHTML = getDate();
    }
    // 获取当前系统时间
    function getDate() {
        let date = new Date(),
            year = date.getFullYear(),
            month = date.getMonth() + 1,
            dates = date.getDate(),
            arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六',],
            day = date.getDay();
        return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day];
    }
    // 元素不添加事件
    // 页面加载直接显示当前系统时间
    let p = document.querySelector('p');
    p.innerHTML = getDate();
</script>

innerText和innerHTML的区别:
这两个属性是可读写的，可以获取元素里面的内容

• innerText不会识别html标签(非标准),去除换行和空格
• innerHTML能识别html标签(W3C标准)，保留空格和换行

常用元素的属性操作

1. innerHTML、innerText改变元素内容
2. src、href
3. id、alt、title

    <!-- 通过点击按钮变换元素属性样式 -->
    <button id="red">红色</button>
    <button id="blue">蓝色</button>
    <div style="width: 200px; height: 200px; background-color: red;" title="红色"></div>
    <script>
        // 修改元素属性
        // 获取元素
        let red = document.getElementById('red'),
            blue = document.getElementById('blue'),
            div = document.querySelector('div');
        // 绑定事件
        blue.onclick = function () {
            div.style.backgroundColor = 'blue';
            div.title = '蓝色';
        }
        red.onclick = function () {
            div.style.backgroundColor = 'red';
            div.title = '红色';
        }
    </script>

表单元素的属性操作

利用DOM可以操作如下表单元素的属性

• type、value、checked、selected、disabled等

<button>点击</button>
<input type="text" value="输入内容">
<script>
    // 获取元素
    let btn = document.querySelector('button'),
        input = document.querySelector('input');
    // 绑定事件  处理程序
    but.onclick = function() {
        // 表单里面的值是通过value来修改的
        input.value = '被点击了';
        // 如果想要某个按钮被禁用，不能再次点击了 用disabled
        // btn.disabled = true;
        this.disabled = true;
        // this指向函数的调用者btn
    }
</script>

样式属性修改

通过JS修改元素的大小、样式和属性

• element.style 行内样式操作
  • JS里面的样式采取驼峰命名法，例如：fontSize、backgroundColor
  • JS修改style样式操作，产生的是行内样式，权重比较高
• element.className 类名样式操作
  • 如果操作样式比较多，可以采取操作类名方式更改元素样式

<div style="width:100px; height:100px; background-color:wheat;">文本</div>
<script>
    // 使用 element.style 获得修改属性样式
    let div = document.querySelector('div');
    div.onclick = function() {
        this.style.backgroundColor = 'purple';
        this.style.fontSize = '20px';
        this.style.color = '#fff';
        this.style.marginTop = '100px';
    }
</script>
<!-- 使用另一种方法修改添加属性比较简单，可以设置一个类名，然后在点击div的时候，把类名赋给它 -->
<!-- 简单地说：可以通过修改元素的类名来修改元素样式 -->

获得焦点onfocus、失去焦点onblur

<input type="text" value="手机">
<script>
    let inp = document.querySelector('input');
    inp.onfocus = function() {
        // 获得焦点
        // 获得焦点的时候，如果里面的值是手机则清空里面的内容
        if(this.value =='手机'){
            this.value = '';
        }
    }
    inp.onblur = function() {
        // 失去焦点
        // 失去焦点的时候如果内容为空，则改为默认值‘手机’
        if(this.value ==''){
            this.value = '手机';
        }
    }
</script>

排他思想

如果有同一组元素，我们要实现某一个元素的某种样式，需要用到循环的排他思想算法：

• 所有元素全都清除掉默认样式(干掉其他人)
• 给当前元素设置样式(留下自己)
• 注：顺序不能颠倒，首先排除其他人，再设置自己的样式

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
    let btns = document.querySelectorAll('button');
    for(let i = 0; i < btns.length; i++) {
        btns[i].onclick = function() {
            for(let i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
            }
            this.style.backgroundColor = 'blue';
        }
    }
</script>