js学习(六)

简介: js学习(六)

事件简单学习

* 功能: 某些组件被执行了某些操作后,触发某些代码的执行。
  * 造句:  xxx被xxx,我就xxx
    * 我方水晶被摧毁后,我就责备对友。
    * 敌方水晶被摧毁后,我就夸奖自己。
* 如何绑定事件
  1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码
    1. 事件:onclick--- 单击事件
  2. 通过js获取元素对象,指定事件属性,设置一个函数`

事件绑定的第一种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom</title>
    <script>
        //第一种事件绑定方式,耦合度比较高不利于维护
        //document.getElementById("id值"):通过元素的id获取元素对象
        function fun() {
            alert("我爱死你了");
            alert("我又爱死你了");
        }
    </script>
</head>
<body>
<img id="light" src="img/off.gif" onclick="fun();">
</body>
</html>
事件绑定的第二种方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom</title>
</head>
<body>
    <img id="light" src="img/off.gif">
<script>
    //第二种事件绑定,耦合度比较低,利于维护,要注意对象的位置
    //document.getElementById("id值"):通过元素的id获取元素对象
    function fun() {
        alert("我爱死你了");
    }
    var light = document.getElementById("light");
    light.onclick = fun;
</script>
</body>
</html>
相关文章
|
4月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
77 1
|
4月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
50 2
|
4月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
96 5
|
5月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
100 0
|
5月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
58 2
|
5月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
67 1
|
5月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
39 2
|
5月前
|
JavaScript
js学习--抽奖
js学习--抽奖
35 1
|
5月前
|
JavaScript
js学习--隔行换色
js学习--隔行换色
43 1
|
5月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
90 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件

热门文章

最新文章