29-JavaScript-事件-事件驱动-更改外部css属性-区分浏览器内核

JS事件驱动编程
JS事件

1. 概述


    JS是采用 事件驱动(event-driven) 响应用户操作的.

 1) 事件(Event)


    如, 点击按钮 按键 等 都称之为 ~.

 2) 事件源

 
    ① 网页元素(按钮, 输入框, 文本域, ...)   
    ② 浏览器窗口
    ③ 其他

 3) 事件处理程序(Event Handler)


    对事件进行处理的程序或函数,称之为 ~.

 4) 事件驱动(Event Driven)   


    由点击按钮或按键引发的一连串程序的动作, 称之为 ~.

2. 事件处理机制


    在事件源上发生某个事件,产生某个效果
    即, 
       鼠标点击按钮, 
       发生一个点击事件, 并产生一个事件对象
       该事件触发一个函数的执行.

 1) 原理


    如图visio




 2) 说明


  ① 事件源
  ② 事件名称
     如, 鼠标移动 鼠标按下, 
         单击按钮
         网页加载, 网页关闭
         输入框内容改变
         等
  ③ 事件处理程序
        通常为函数, 通过发生的事件来驱动函数执行
  ④ 事件对象
        当某个事件发生时, 会产生一个描述该事件的对象.
        该对象包含该事件的一些详细信息,
        如, 按键时 会记录按下的是哪个键.

3. 事件及分类


    参考: 
        http://www.w3school.com.cn/js/jsref_events.asp
        http://www.w3school.com.cn/htmldom/dom_obj_event.asp

 1) 鼠标事件


    当用户在页面上用鼠标点击页面元素时,
    对应的dom结点会触发鼠标事件. 
    主要有:
     ① click
     ② dbclick
     ③ mousedown
     ④ mouseup
     ⑤ mouseover
     ⑥ mouseout
     ⑦ mousemove
     ⑧ 等...

 2) 键盘事件


    当用户用键盘输入信息时, 会触发键盘操作事件.
    主要有:
     ① keydown
     ② keypress
     ③ keyup

 3) HTML事件


    在html结点加载变更等相关事件, 如:
    window的
        onload, unload, abort, error
    文本框的
        select, change

 4) 其它事件


    页面中一些特殊对象运行过程中产生的事件, 
    如 XmlHttpRequest对象的相关事件.

4. 示例


 1) 获取鼠标点击坐标

<body onmousedown="recordMouse(event)">
<!-- onmousemove="recordMouse(event)" -->
</body>
//-----------
/*   
    1. 事件源 --> body (注: Firefox不支持在body上的mousedown)
    2. 事件   --> mousedown
    3. 事件处理处理程序 --> recordMouse(evt)
    4. 在事件源上 绑定 事件处理程序
        <body onmousedown="recordMouse(event)">

*/   

    var count = 0;

    function recordMouse(evt) {

        console.info( evt );

        console.info( 

            "鼠标点击次数: " + (++count) + "      " +
            "坐标: ( " + evt.clientX + ", " + evt.clientY + ")" 

            );

    }

 2) 点击按钮获取当前时间

<button onclick="showCurrentTime(event)">showCurrentTime</button>
/*
    1. 事件源  --> button
    2. 事件    --> click
    3. 事件处理程序--> showCurrentTime(evt)
    4. 在事件源上 绑定 事件处理程序
         <button onclick="showCurrentTime(event)">
*/
    function showCurrentTime(evt) {
        console.info( new Date().toLocaleString() );
    }


 3) 按钮改变div的背景色    

    <div style="width:200px;height:200px;background-color: gray;">
        
        <input type="button" value="red" onclick="changeColor(this)"/> 
        <input type="button" value="blue" onclick="changeColor(this)"/> 

    </div>
/*
    1. 事件源  --> input
    2. 事件    --> click
    3. 事件处理程序--> changeColor(element)
    4. 在事件源上 绑定 事件处理程序
         <input type="button" value="red" onclick="changeColor(this)"/>
    5. 同一事件确定是哪个事件源
         this 
*/
    function changeColor(element) {
        // console.info(element);

        // 获取父节点 div
        var divObj = element.parentElement;
        // 获取input元素的值
        var color = element.value;
        // 通过外部方式更div 的style
        divObj.style.backgroundColor = color;
    }


5. 更改元素的class属性值

    <div class="divCls-default">
        
        <input type="button" value="red" 
            onclick="changeCss(this,'divCls-little')"/> 

        <input type="button" value="blue" 
            onclick="changeCss(this,'divCls-big')"/> 

    </div>
<style type="text/css">

    .divCls-default {
        width: 200px;
        height: 200px;
        background-color: gray;
    }

    .divCls-little {
        width: 100px;
        height: 100px;
        background-color: green;        
    }

    .divCls-big {
        width: 300px;
        height: 300px;
        background-color: blue;        
    }    

</style>
<script type="text/javascript" charset="utf-8">

     var cssFiles = document.styleSheets; // 集合
     console.info( cssFiles );

     var rules = cssFiles[0].cssRules; // 集合
     console.info( rules );

     function changeCss(element, clsName) {
        var divElement = element.parentElement;
        // 更改div的class
        divElement.className = clsName;
     }

</script>


6. 更改外部css文件中的规则


    ① 获取样式表文件的集合

        var cssFiles = document.styleSheets;

    ② 获取样式表文件里的规则集合

        // firefox
        var rules = cssFiles[0].cssRules;
        // IE
        var rules = cssFiles[0].rules; 

    ③ 更改指定规则的属性

        rules[0].style.backgroundColor = "red";

.divCls-default {
    width: 200px;
    height: 200px;
    background-color: gray;
}
    <link rel="stylesheet" type="text/css" href="my.css"/>
    <div class="divCls-default">
        
        <input type="button" value="red" 
            onclick="changeCss(this)"/> 

        <input type="button" value="blue" 
            onclick="changeCss(this)"/> 

    </div>
<script type="text/javascript" charset="utf-8">

     var cssFiles = document.styleSheets; // 集合
     console.info( cssFiles );

     var rules = cssFiles[0].cssRules; // 集合
     console.info( rules );

     function changeCss(element) {
        var color = element.value;
        var divElement = element.parentElement;

        var defaultCls = rules[0];

        defaultCls.style.backgroundColor = color;
     }



</script>


7. 区分浏览器种类    

 
<script type="text/javascript">

     if ( window.XMLHttpRequest ) { // Mozilla Safari IE7/8

        if ( window.ActiveXObject ) {
            alert( "IE version > 6" );
        } else {
            alert( "Mozilla or Safari" );
        }

     } else {

        alert( "IE version = 6" );

     }    
</script>

你可能感兴趣的:(JavaScript,事件,事件驱动)