js事件驱动机制（附有HTML5实例以及运行截图）

最新推荐文章于 2023-05-22 16:49:10 发布

GodGump

最新推荐文章于 2023-05-22 16:49:10 发布

阅读量638

点赞数

分类专栏： html复习

本文链接：https://blog.csdn.net/GodGump/article/details/113332592

版权

html复习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

js是采用事件驱动来响应用户操作的。比如通过鼠标或者按键（基本等同于热键）在浏览器窗口或者网页元素(按钮，文本框…)上执行的操作，我们称之为事件。由鼠标或热键引发的一连串程序的动作，称之为事件驱动。对事件进行处理程序或函数，我们称之为事件处理程序（也有教材上说是事件句柄）。
事件的分类（有的地方说是事件源分类法分出的，这个个人不赞同，两个是不同的东西怎么可以这么搞）：
鼠标事件：
当用户在页面上用鼠标点击页面元素时，对应的dom节点会触发鼠标事件，主要有click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove等。
键盘事件：
当用户用键盘输入信息时，会触发键盘操作事件。主要包括keydown、keypress、keyup三个。
HTML事件：
在html节点加载变更等相关的事件，比如window的onload、unload、abort、error，文本框select、change等等。
其它事件：
页面中一些特殊对象运行过程中产生的事件，比如xmlhttprequest对象的相关事件。
举个鼠标点击事件的例子：
（
补充说明：
event.type属性表示事件类型。
event.currentTarget是事件处理程序当前正在处理事件的那个元素，返回绑定事件的元素，和this的作用差不多，始终返回绑定事件的元素。（事件委托返回绑定的父元素）
event.target返回触发事件的元素(可以用来事件委托)
event.clientX或者event.clientY表示相应坐标（设置了宽高的元素才可以包括body）
event只是形式参数而不是具体的变量，要根据传递的参数进行修改
）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript">
        function test(e){
            document.writeln("<br>X:"+e.clientX+"<br>Y:"+e.clientY);
        }
    </script>
</head>
<body style="width: 1000px; height: 1000px;
 border: 1px solid red" onclick="test(event)">
</body>
</html>

以上代码的作用是，在鼠标按下后，弹出窗口显示x、y的坐标。
运行结果：
在这里插入图片描述
js事件驱动判定元素的方法：
通过向调用函数传递this指针的方法（学C的人一般爱这么叫）
举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript">
        // function test(e){
        //     document.writeln("<br>X:"+e.clientX+"<br>Y:"+e.clientY);
        // }
        function changeDivColor(e){
            if( e.value == "黄色" ) {
                //获取div1
                var div1 = document.getElementById("div1");
                div1.style.background = "yellow";
            } else if( e.value == "红色" ) {
                var div1 = document.getElementById("div1");
                div1.style.background = "red";
            }
        }
    </script>
</head>
<body style="width: 1000px; height: 1000px;
 border: 1px solid red" onclick="test(event)">
<div id="div1" style="width: 400px; height: 300px; background: white;">
    <input id="changToRedButton"    value="红色" type="button" onclick="changeDivColor(this)">
    <input id="changToYellowButton" value="黄色" type="button" onclick="changeDivColor(this)">
</div>
</body>
</html>

产生的效果是：点击对应图片改变div的颜色
在这里插入图片描述
这个时候有人问大多数CSS是专门放在外部CSS文件里面的，这个方法用不了，这个时候下个方法就起作用。
访问外部定义的CSS样式(类定义的CSS样式)
举个例子：
文件如下：

.style1 {
    width: 1000px;
    height: 800px;
    background: white;
}

html文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../static/css/controlledCss.css" />
    <script language="JavaScript">
        // function test(e){
        //     document.writeln("<br>X:"+e.clientX+"<br>Y:"+e.clientY);
        // }
        function changeDivColor(e){
            if( e.value == "黄色" ) {
                //获取div1
                var div1 = document.getElementById("div1");
                div1.style.background = "yellow";
            } else if( e.value == "红色" ) {
                var div1 = document.getElementById("div1");
                div1.style.background = "red";
            }
        }
        function changeDivColor2(e){
            //获取mycss.css中所有class选择器
            var ocssRules = document.styleSheets[0].cssRules;//或xxx.rules
            //从ocssRules中取出你希望的class
            //ocssRules[0]:这里的0表示mycss.css文件中的一个样式规则
            var style1 = ocssRules[0];
            window.alert("进入了");
            if( e.value == "黄色" ) {
                style1.style.background = "yellow";
            } else if( e.value == "红色" ) {
                style1.style.background = "red";
            }
        }
    </script>
</head>
<body style="width: 1000px; height: 1000px;
 border: 1px solid red">
<!--      οnclick="test(event)"--> //移动至body里面触发坐标函数
<div id="div1" style="width: 400px; height: 300px; background: white;">
    <input id="changToRedButton"    value="红色" type="button" onclick="changeDivColor(this)">
    <input id="changToYellowButton" value="黄色" type="button" onclick="changeDivColor(this)">
</div>
<div id="div2" class="style1">
    <input id="changToRedButton2"    value="红色" type="button" onclick="changeDivColor2(this)">
    <input id="changToYellowButton2" value="黄色" type="button" onclick="changeDivColor2(this)">
</div>
</body>
</html>

GodGump

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js事件驱动机制（附有HTML5实例以及运行截图）

js是采用事件驱动来响应用户操作的。比如通过鼠标或者按键（基本等同于热键）在浏览器窗口或者网页元素(按钮，文本框…)上执行的操作，我们称之为事件。由鼠标或热键引发的一连串程序的动作，称之为事件驱动。对事件进行处理程序或函数，我们称之为事件处理程序（也有教材上说是事件句柄）。事件的分类（有的地方说是事件源分类法分出的，这个个人不赞同，两个是不同的东西怎么可以这么搞）：鼠标事件：当用户在页面上用鼠标点击页面元素时，对应的dom节点会触发鼠标事件，主要有click、dblclick、mousedown、mo
复制链接

扫一扫

专栏目录