美文网首页一句话写作大家园📝(夕雅编)摘星阁
复习笔记之API(2) 事件基础&&排他思想

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

作者: 晚月川 | 来源:发表于2020-04-12 11:31 被阅读0次

    事件基础

    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>
    

    innerTextinnerHTML的区别:
    这两个属性是可读写的,可以获取元素里面的内容

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

    常用元素的属性操作

    1. innerHTMLinnerText改变元素内容
    2. srchref
    3. idalttitle
        <!-- 通过点击按钮变换元素属性样式 -->
        <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可以操作如下表单元素的属性

    • typevaluecheckedselecteddisabled
    <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里面的样式采取驼峰命名法,例如:fontSizebackgroundColor
      • 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>
    

    相关文章

      网友评论

        本文标题:复习笔记之API(2) 事件基础&&排他思想

        本文链接:https://www.haomeiwen.com/subject/yrzmmhtx.html