这篇文章给大家分享的是有关javascript是什么样的脚本语言的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

沁阳网站制作公司哪家好，找创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作，到程序开发，运营维护。创新互联公司于2013年开始到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。

javascript是一种事件驱动的脚本语言。javascript是采用事件驱动的机制来响应用户操作的，也就是说当用户对某个html元素进行操作的时候，会产生一个事件，该事件会驱动某些函数来处理。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

还记得当初学JAVA-GUI编程时学习过事件监听机制，此时再学习JavaScript中的事件驱动机制，不免简单。当初学习时也是画过原理图，所以从原理图开始吧！

js是采用事件驱动(event-driven)响应用户操作的。也就是说当用户对某个html元素进行操作的时候，会产生一个事件，该事件会驱动某些函数来处理。

比如通过鼠标或者按键在浏览器窗口或者网页元素(按钮，文本框...)上执行的操作，我们称之为事件(Event)。由鼠标或热键引发的一连串程序的动作，称之为事件驱动(Event-Driver)。对事件进行处理程序或函数，我们称之为事件处理程序(Event Handler)。

事件的分类：

鼠标事件：

当用户在页面上用鼠标点击页面元素时，对应的dom节点会触发鼠标事件，主要有click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove等。

键盘事件：

当用户用键盘输入信息时，会触发键盘操作事件。主要包括keydown、keypress、keyup三个。

HTML事件：

在html节点加载变更等相关的事件，比如window的onload、unload、abort、error，文本框select、change等等。

其它事件：

页面中一些特殊对象运行过程中产生的事件，比如xmlhttprequest对象的相关事件。

如下例：

作为第一个入门案例，会遇到一个问题如下：

代码如下：

    
    
    
        function test(e) {
            window.alert("x = "+ e.cientX + " y =" + e.clientY);
        }
    


    

以上代码的作用是，在鼠标按下后，弹出窗口显示x、y的坐标。

这段代码在IE9、Chrome下都不可以正常运行。这到底是什么原因呢?

后来，我就搜索了一下，发现有人和我有同样的问题，他也解决了，我是参考js的onmousedown事件放在标签下与firefox浏览器所产生的问题这篇文章的。

原来是body的原因。

于是，我就给body加了个宽高试试：

    
    
    
        function test(e) {
            window.alert("x = "+ e.cientX + " y =" + e.clientY);
        }
    


    

我们不难发现，当我们没有给body设置宽高时，body的范围仅仅是一条线，所以onmousedown事件也就无法响应。所以，在给body设置宽高后，我们就可以在body的宽高范围响应onmousedown事件了。

如何理解事件驱动机制

为了让大家进一步理解js的事件驱动机制，我们来看两个案例：

案例：显示一个按钮，点击按钮后弹出对话框显示当前时间。

    
    
    
        function test1() {
            window.alert(new Date().toLocaleString());
        }
    


    

案例：通过点击按钮改变div的颜色。

    
    
    
        //js如何访问元素的style属性，进行样式修改
        function test4(eventObj) {
            //怎么知道button1被按，还是button2被按下
            //window.alert(eventObj.value);
            if(eventObj.value == "黑色") {
                //获取div1
                var div1 = document.getElementById("div1");
                div1.style.background = "black";
            } else if(eventObj.value == "红色") {
                var div1 = document.getElementById("div1");
                div1.style.background = "red";
            }
        }
    


    div1