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

迈不过友情╰ 2022-09-18 09:57 90阅读 0赞

JS事件驱动编程  
JS事件

# 1. 概述 #

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

##  1) 事件(Event) ##

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

##  2) 事件源 ##

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

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

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

##  4) 事件驱动(Event Driven)  ##

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

# 2. 事件处理机制 #

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

##  1) 原理 ##

如图visio

![SouthEast][]

##  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) 获取鼠标点击坐标 ##

//-----------
    /*   
        1. 事件源 --> body (注: Firefox不支持在body上的mousedown)
        2. 事件   --> mousedown
        3. 事件处理处理程序 --> recordMouse(evt)
        4. 在事件源上 绑定 事件处理程序
            <body οnmοusedοwn="recordMouse(event)">
    
    */   
    
        var count = 0;
    
        function recordMouse(evt) {
    
            console.info( evt );
    
            console.info( 
    
                "鼠标点击次数: " + (++count) + "      " +
                "坐标: ( " + evt.clientX + ", " + evt.clientY + ")" 
    
                );
    
        }

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

<button οnclick="showCurrentTime(event)">showCurrentTime</button>

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

##  3) 按钮改变div的背景色  ##

/*
        1. 事件源  --> input
        2. 事件    --> click
        3. 事件处理程序--> changeColor(element)
        4. 在事件源上 绑定 事件处理程序
             <input type="button" value="red" οnclick="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属性值 #

# 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;
    }

# 7. 区分浏览器种类  #

[SouthEast]: /images/20220828/14b4e8aa8232462dac77366dda640de7.png