16.8 css操作

16.8.1 `HTML` 元素的 `style` 属性

操作 CSS 样式最简单的方法，就是使用网页元素节点的setAttribute方法直接操作网页元素的style属性

    var div = document.getElementById("myDiv");
    div.setAttribute(
        'style',
        'background-color:green;' + 'border:1px solid black;'
    );

16.8.2 元素节点的`style`属性

    var divStyle = document.querySelector('div').style;
    divStyle.backgroundColor = 'red';
    divStyle.border = '1px solid black';
    divStyle.width = '400px';
    divStyle.height = '400px';
    divStyle.fontSize = '100px';
    divStyle.fontSize = '10em';

16.8.3 `cssText`属性

var divStyle = document.querySelector('div').style;
divStyle.cssText = 'background-color: red;'
 + 'border: 1px solid black;'
 + 'height: 100px;'
 + 'width: 100px;';

十七、事件处理程序

事件处理程序分为：

HTML事件处理
DOM0级事件处理
DOM2级事件处理

17.1 HTML事件

<button onClick="demo()">点击</button>
function demo(){
    alert("点击了鼠标");
}

缺点是HTML和JS没有分开

17.2 DOM0级事件处理

    <button id="btn">点击</button>
    var btn = document.getElementById("btn");
    btn.onclick = function (){
        alert("点击了鼠标")
    }

HTML和JS是分离的，但是无法同时添加多个事件

17.3 DOM2级事件处理（推荐）

    <button id="btn">点击</button>
    var btn = document.getElementById("btn");
    btn.addEventListener("click",click)
    function click(){
        alert("点击了鼠标")
    }

事件不会被覆盖

十八、事件类型

18.1 鼠标事件

鼠标事件

鼠标事件指与鼠标相关的事件，具体的事件主要有以下一些

click：按下鼠标时触发
dblclick：在同一个元素上双击鼠标时触发
mousedown：按下鼠标键时触发
mouseup：释放按下的鼠标键时触发
mousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发。
mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件
mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件
wheel：滚动鼠标的滚轮时触发

var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
  console.log("click事件");
}

温馨提示

这些方法在使用的时候，除了DOM2级事件，都需要添加前缀on

18.2 Event事件对象

事件发生以后，会产生一个事件对象，作为参数传给监听函数。就是函数中自带的隐式参数。

18.2.1 Event对象属性

Event.Target
Event.type

Event.target

Event.target属性返回事件当前所在的节点，就是点击谁返回谁。

    <button id="btn">点击</button>
    var btn = document.getElementById("btn");
    btn.onclick = function (event){
        console.log(event.target)  // <button id="btn">点击</button>
    }

Event.type

Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读

    <button id="btn">点击</button>
    var btn = document.getElementById("btn");
    btn.onclick = function (event){
        console.log(event.type) //click
    }

18.2.2 Event对象方法

Event.preventDefault()
Event.stopPropagation()

Event.preventDefault

Event.preventDefault方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了.

    <a id="btn" href="http://www.baidu.com">点击</a>
     var a = document.getElementById("btn");
     a.onclick = function (event){
         event.preventDefault();
     }

Event.stopPropagation()

stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #root{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
        #box{
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id = "root">
        <div id = "box"></div>
    </div>
<script>
    var root = document.getElementById("root");
    var box = document.getElementById("box");
    root.onclick = function (){
        console.log("root")
    }
    box.onclick = function (event){
        event.stopPropagation(); //阻止事件冒泡
        console.log("box")
    }
</script>
</body>
</html>

18.3 键盘事件

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件

keydown：按下键盘时触发。
keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
keyup：松开键盘时触发该事件

    <input type="text" id="username">
    var username = document.getElementById("username");
     username.onkeydown = function (event){
         console.log("键盘按下事件")
     }
     username.onkeyup = function (event){
         console.log(event.target.value);//value就是输入框的数据
     }

event对象

keyCode:唯一标识

var username = document.getElementById("username");
username.onkeydown = function(e){
  if(e.keyCode === 13){
    console.log("回车");
   }
}

18.4 表单事件

表单事件是在使用表单元素及输入框元素可以监听的一系列事件

input事件
select事件
Change事件
reset事件
submit事件

18.4.1 input事件

input事件当<input>、<select>、<textarea>的值发生变化时触发。对于复选框（<input type=checkbox>）或单选框（<input type=radio>），用户改变选项时，也会触发这个事件

input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。

    <input type="text" id="username">
    var username = document.getElementById("username");
    username.oninput = function (event){
        console.log(event.target.value)  //获取表单输入的内容
    }

18.4.2 select事件

select事件当在<input>、<textarea>里面选中文本时触发

// HTML 代码如下
// <input id="test" type="text" value="Select me!" />
var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {
 console.log(e.type); // "select"
}, false);

18.4.3Change 事件

Change事件当<input>、<select>、<textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发

var email = document.getElementById("email");
email.onchange = function(e){
  console.log(e.target.value);
}

18.4.4 reset 事件，submit 事件

这两个事件发生在表单对象<form>上，而不是发生在表单的成员上。

reset事件当表单重置（所有表单成员变回默认值）时触发。

submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是<form>元素，而不是<button>元素，因为提交的是表单，而不是按钮

<form id="myForm" onsubmit="submitHandle">
  <button onclick="resetHandle">重置数据</button>
  <button>提交</button>
</form>
var myForm = document.getElementById("myForm")
function resetHandle(){
  myForm.reset();
}
function submitHandle(){
  console.log("提交");
}

18.5 事件代理(事件委托)

在js中父元素的事件可以操作子元素触发，也就是事件冒泡。

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）

    <ul id="list">
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
    </ul>
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function (event) {
        if (event.target.innerHTML() === 'list1') {
            // some code
        }
    });

十九、定时器

19.1 setTimeout

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务.

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

var timerId = setTimeout(func|code, delay);

setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数

setTimeout(function(){
  console.log("定时器")
},1000)

温馨提示

还有一个需要注意的地方，如果回调函数是对象的方法，那么setTimeout使得方法内部的this关键字指向全局环境，而不是定义时所在的那个对象

    var name = "zhangsan";
    var user = {
        name: "lisi",
        getName: function () {
            console.log(this.name);
        }
    };
    user.getName(); //lisi

    var name = "zhangsan";
    var user = {
        name: "lisi",
        getName: function () {
            setTimeout(function(){
                console.log(this.name);
            },1000)
        }
    };
    user.getName(); //zhangsan

    var name = "zhangsan";
    var user = {
        name: "lisi",
        getName: function () {
            var that = this; //this指的是user
            setTimeout(function(){
                console.log(that.name);
            },1000)
        }
    };
    user.getName(); //lisi

定时器可以进行取消

var id = setTimeout(f, 1000);
clearTimeout(id);

19.2 setInterval

setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行

    var timer = setInterval(function() {
        console.log("1秒执行一次");
    }, 1000)

通过setInterval方法实现网页动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #someDiv{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="someDiv"></div>
    <script>
        var div = document.getElementById('someDiv');
        var opacity = 1;
        var fader = setInterval(function() {
         opacity -= 0.05;
         if (opacity > 0) {
          div.style.opacity = opacity;
          } else {
          clearInterval(fader);
          }
        }, 60);
    </script>
</body>
</html>

网页编程和设计 JavaScript语言（ES5）（六）

16.8 css操作

16.8.1 `HTML` 元素的 `style` 属性

16.8.2 元素节点的`style`属性

16.8.3 `cssText`属性

十七、事件处理程序

17.1 HTML事件

17.2 DOM0级事件处理

17.3 DOM2级事件处理（推荐）

十八、事件类型

18.1 鼠标事件

鼠标事件

18.2 Event事件对象

18.2.1 Event对象属性

18.2.2 Event对象方法

18.3 键盘事件

18.4 表单事件

18.4.1 input事件

18.4.2 select事件

18.4.3Change 事件

18.4.4 reset 事件，submit 事件

18.5 事件代理(事件委托)

十九、定时器

19.1 setTimeout

19.2 setInterval

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

网页编程和设计 JavaScript语言（ES5）（六）

16.8 css操作

16.8.1 HTML 元素的 style 属性

16.8.2 元素节点的style属性

16.8.3 cssText属性

十七、事件处理程序

17.1 HTML事件

17.2 DOM0级事件处理

17.3 DOM2级事件处理（推荐）

十八、事件类型

18.1 鼠标事件

鼠标事件

18.2 Event事件对象

18.2.1 Event对象属性

18.2.2 Event对象方法

18.3 键盘事件

18.4 表单事件

18.4.1 input事件

18.4.2 select事件

18.4.3Change 事件

18.4.4 reset 事件，submit 事件

18.5 事件代理(事件委托)

十九、定时器

19.1 setTimeout

19.2 setInterval

热门文章

最新文章

相关课程

相关电子书

16.8.1 `HTML` 元素的 `style` 属性

16.8.2 元素节点的`style`属性

16.8.3 `cssText`属性