04JS第三天 ----- js核心第一天 --- 事件和事件对象

七、事件和事件对象

7.1、什么是事件

浏览网页时，当我们做出点击鼠标、按键盘、移动鼠标等行为时，这些行为会被浏览器内置的JavaScript引擎所捕获，并执行对应的某些操作（函数）。那么你的行为（动作）+ JavaScript引擎捕获 + 执行对应的操作 = 事件。

所以，一个完整的事件应该包括：

• 用户行为；
• 浏览器捕获你的行为；
• 执行对应的操作（函数）

常见行为有：鼠标点击、鼠标的移动、鼠标的移入和移出、键盘控制等等。

事件的作用是：通过事件，我们（浏览网页的人）就可以和浏览器进行一些交互了。

 

7.2、事件绑定方式

语法：

node.事件名 = function(){

//事件被触发时，执行这个函数。

};
//例如
document.getElementById('btn').onclick = function(){
     console.log('你点击我了');
}

<input type="button" value="点我试试" id="btn" />
<input type="text" id="username" value="请输入用户名" />

<script>
    //找到要绑定事件的元素节点
    var btn = document.getElementById('btn');
    //单击事件
    btn.onclick = function(){
        alert('你真敢点');
    };

    //找到username，绑定获取焦点事件
    document.getElementById('username').onfocus = function () {
        document.getElementById('username').value = '';
    };
</script>

在事件处理函数中，this表示绑定事件的那个元素：

所以上面获得焦点的事件可以优化代码为：

练习：

页面中有很多个td，点击td的时候，让td的背景颜色发生变化：

HTML代码：

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

css代码：

 table,td{
        border:solid 1px #ccc;
        border-collapse: collapse; /*合并边框*/
    }
    td{
        width:150px;
        height:50px;
        /*color:rgb(30,50,10);*/
    }
    table{
        margin:10px auto; /*让表格左右居中对齐*/
    }

JS代码：

    //点击页面中的td，点击之后，让被点击的td背景颜色改变成红色
    //先找到所有的td
    var tds = document.getElementsByTagName('td'); // 返回数组
    //循环，为每个td都绑定一个单击事件
    for(var i=0; i<tds.length; i++){
        tds[i].onclick = function () {
            //alert(123);
            //this 表示绑定事件的那个td
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            this.style.backgroundColor = 'rgb('+r+', '+g+', '+b+')';
            /*if(this.style.backgroundColor != 'red'){
                this.style.backgroundColor = 'red';
            }else{
                this.style.backgroundColor = 'white';
            }*/
        };
    }

效果：

7.3、常用事件列举

• 页面事件：
  • onload ：当页面载入完毕（页面中的标签和外部资源）后触发
• 焦点事件
  • onfocus ：当获取焦点时触发
  • onblur ：当失去焦点时触发
• 鼠标事件
  • onmouseover ：当鼠标悬浮时触发
  • onmouseout ：当鼠标离开时触发
• 键盘事件
  • onkeypress ：当键盘按下时触发（如果按住某个键不松开，会一直触发press事件）
  • onkeydown ：当键盘按下时触发
  • onkeyup ：当键盘弹起时触发
• 其他事件：
  • onchange ：内容改变时会触发，常用于select>option。
  • onsubmit ：表单提交时触发，这个事件要给form绑定而不是给提交按钮绑定
  • onresize ： 页面窗口改变大小时会触发
  • onscroll ：滚动条滚动时触发

 

7.3、什么是事件对象

事件对象也是一个对象，它提供了一些属性，这些属性描述了当前事件的特点；

不同的事件中，事件对象也有所差异，比如单击事件中，事件对象会提供pageX和pageY属性，表示点击的点距离页面的距离，比如键盘事件中，事件对象会提供keyCode属性，表示按的是什么键。

总之，事件对象中提供了一些属性，这些属性可以很好的描述当前的事件的特点。

 

7.4、获取事件对象

IE浏览器：window.event;

火狐浏览器：传递给事件处理函数的形参

下面代码演示获取事件对象的方式：

<input type="text">

<script>
    document.getElementsByTagName('input')[0].onclick = function(a){
        //console.log(a);  // IE8+ 支持，获取事件对象的方法
        //console.log(window.event); // IE8浏览器
        //兼容各个浏览器的获取事件对象的方法
        /*var e;
        if(window.event){
            e = window.event; //IE8
        }else{
            e = a; // IE8+
        }*/
        var e = window.event||a;
    };
</script>

7.5、事件对象常用属性

下面列举一些事件对象中的常用属性：

• keyCode：表示键盘上的键对应的数值。
• altKey：表示是否按了alt键，按了结果为true，没按结果为false（组合按键的时候，才会有作用）
• shiftKey：表示是否按了shift键，按了结果为true，没按结果为false（组合按键的时候，才会有作用）
• ctrlKey：表示是否按了ctrl键，按了结果为true，没按结果为false（组合按键的时候，才会有作用）
• pageX: 鼠标距离页面左边的距离
• pageY: 鼠标距离页面上面的距离
• screenX: 鼠标距离屏幕左边的距离
• screenY: 鼠标距离屏幕上面的距离

 

下面的代码是获取keyCode的代码：

<script>
    //在页面中任何位置，按键，当键盘弹起的时候，执行函数
    document.onkeyup = function(evt){
        //先获取事件对象
        var e = window.event||evt; //兼容各个浏览器的获取事件对象的方式
        //获取键盘对应的数字
        var keyCode = e.keyCode;
        //alert(keyCode);
        if(keyCode == 13){
            alert('您按了回车键');
        }
    }
</script>