您的位置：首页 > Web前端 > JavaScript

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

2013-11-15 15:38 701 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航